/* extraído de docs/design/pacotes-de-temas (Materiais e Natal) */
/* ===== gato ilustrado ===== */
.gato{display:block;overflow:visible}
.gato *{transform-box:fill-box}
.gato .rabo,.gato .todo,.gato .corpo{transform-box:view-box}
.gato .rabo{transform-origin:36px 52px;animation:rabo 3.6s ease-in-out infinite}
.gato .corpo{transform-origin:62px 67px;animation:resp 3.2s ease-in-out infinite}
.gato .cabeca{transform-box:view-box;transform-origin:86px 50px;animation:cab 3.2s ease-in-out infinite}
.gato .olho{transform-origin:50% 50%;animation:pisca 5s infinite}
.gato .orelha{transform-origin:50% 100%;animation:orelha 7s infinite}
.gato .perna{transform-origin:50% 4%}
.gato .zz{opacity:0;font:700 14px "Sora",sans-serif;fill:#cfe3ff}
@keyframes rabo{0%,100%{rotate:-4deg}50%{rotate:9deg}}
@keyframes resp{0%,100%{scale:1 1}50%{scale:1 1.03}}
@keyframes cab{0%,100%{translate:0 0}50%{translate:0 .8px}}
@keyframes pisca{0%,93%,100%{scale:1 1}96%{scale:1 .1}}
@keyframes orelha{0%,90%,100%{rotate:0deg}93%{rotate:-9deg}96%{rotate:4deg}}
@keyframes ciclo{0%{rotate:-22deg;scale:1 1}50%{rotate:22deg;scale:1 1}75%{rotate:0deg;scale:1 .8}100%{rotate:-22deg;scale:1 1}}
@keyframes cicloR{0%{rotate:-38deg;scale:1 1}50%{rotate:38deg;scale:1 1}75%{rotate:2deg;scale:1 .74}100%{rotate:-38deg;scale:1 1}}
@keyframes pulo{0%,100%{translate:0 0}50%{translate:0 -2.4px}}
@keyframes puloR{0%,100%{translate:0 0}50%{translate:0 -5px}}
.gato.walk .todo{animation:pulo .4s ease-in-out infinite}
.gato.walk .perna{animation:ciclo .8s linear infinite}
.gato.walk .perna.B{animation-delay:-.4s}
.gato.walk .rabo{animation-duration:1.6s}
.gato.run .todo{animation:puloR .25s ease-in-out infinite}
.gato.run .perna{animation:cicloR .5s linear infinite}
.gato.run .perna.B{animation-delay:-.25s}
.gato.run .rabo{animation:none;rotate:-24deg}
.gato.run .corpo{animation:none;scale:1.05 .97}
.gato.run .orelha{animation:none;rotate:-18deg}
.gato.sleep .perna{display:none}
.gato.sleep .todo{translate:0 19px}
.gato.sleep .corpo{animation:resp 3s ease-in-out infinite;scale:1 .8}
.gato.sleep .cabeca{animation:none;rotate:20deg;translate:-1px 6px}
.gato.sleep .olho{animation:none;scale:1 .12}
.gato.sleep .rabo{animation:none;rotate:-38deg}
.gato.sleep .zz{animation:zz 3.2s ease-in infinite}
.gato.sleep .zz:nth-of-type(2){animation-delay:1.1s}
@keyframes zz{0%{opacity:0;translate:0 8px}25%{opacity:1}100%{opacity:0;translate:10px -18px}}
.pausa *,.pausa *::before,.pausa *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}

/* ===== docas ===== */
.cena{position:relative;border-radius:14px;overflow:hidden;padding:130px 24px 34px;margin-top:12px}
.dockw{position:relative;max-width:820px;margin:0 auto}
.dock{position:relative;display:flex;align-items:center;gap:14px;padding:14px 18px;width:100%}
.dock>*{position:relative;z-index:2}
.fx{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none;border-radius:inherit}
.passeio{position:absolute;left:0;bottom:calc(100% - 8px);width:112px;z-index:3;animation:passa 16s linear infinite;will-change:left}
.passeio.parado{animation:none;left:62%}
.passeio .gato{width:112px}
@keyframes passa{0%{left:2%;transform:scaleX(1)}49.5%{left:calc(100% - 118px);transform:scaleX(1)}50%{left:calc(100% - 118px);transform:scaleX(-1)}99.5%{left:2%;transform:scaleX(-1)}100%{left:2%;transform:scaleX(1)}}
.tile{width:58px;height:58px;display:grid;place-items:center;flex:none;position:relative}
.tile svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sep{width:1px;align-self:stretch;margin:6px 2px}
.w{height:58px;border-radius:14px;display:flex;align-items:center;gap:10px;padding:0 12px;flex:none}
.w svg.rel{width:38px;height:38px}
.w b{font:700 20px/1 "Sora",system-ui,sans-serif;display:block}
.w small{font-size:11px;opacity:.75;display:block;margin-top:2px}
.sp{flex:1}


/* --- Aurora (vidro líquido) --- */
.t-aurora .cena{background:linear-gradient(120deg,#1b2a5c,#6a3fa0 45%,#e5708f 80%,#ffb36b)}
.t-aurora .dock{border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.1));backdrop-filter:blur(22px) saturate(1.8);border:1px solid rgba(255,255,255,.42);box-shadow:0 24px 44px rgba(10,5,40,.4),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.14)}
.t-aurora .fx::before,.t-aurora .fx::after{content:"";position:absolute;width:260px;height:160px;border-radius:50%;filter:blur(34px);opacity:.55;animation:deriva 12s ease-in-out infinite alternate}
.t-aurora .fx::before{background:#7be4ff;left:8%;top:-60px}.t-aurora .fx::after{background:#ff7ad9;right:6%;bottom:-70px;animation-delay:-6s}
@keyframes deriva{to{translate:140px 30px;scale:1.25}}
.t-aurora .tile{border-radius:16px;color:#fff;background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 8px 16px rgba(10,5,40,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.t-aurora .tile::after{content:"";position:absolute;left:8px;right:8px;top:100%;height:14px;margin-top:2px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent);opacity:.6}
.t-aurora .tile.ativo::before{content:"";position:absolute;bottom:-9px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff}
.t-aurora .sep{background:rgba(255,255,255,.35)}
.t-aurora .w{color:#fff;background:rgba(15,10,50,.32);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.t-aurora .passeio .gato{filter:drop-shadow(0 0 6px rgba(255,150,230,.55))}

/* --- Carta (carta náutica, identidade do ATLAS) --- */
.t-carta .cena{background:radial-gradient(120% 120% at 50% 0%,#2f4a52,#1b2a30 70%)}
.t-carta .dock{border-radius:6px;background:#f1e7cf;color:#27261f;font-family:Georgia,"Times New Roman",serif;box-shadow:0 18px 30px rgba(0,0,0,.45),inset 0 0 0 4px #f1e7cf,inset 0 0 0 5px #27261f,inset 0 0 40px rgba(150,110,50,.18)}
.t-carta .fx{background:repeating-linear-gradient(90deg,#27261f 0 1px,transparent 1px 12px) 0 6px/100% 6px no-repeat,repeating-linear-gradient(90deg,#27261f 0 1px,transparent 1px 12px) 0 calc(100% - 6px)/100% 6px no-repeat}
.t-carta .fx::after{content:"";position:absolute;right:210px;top:50%;width:150px;height:150px;margin-top:-75px;opacity:.1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100' fill='none' stroke='%2327261f' stroke-width='.8'%3E%3Ccircle r='40'/%3E%3Ccircle r='30'/%3E%3Cpath d='M0-48L6-6 48 0 6 6 0 48-6 6-48 0-6-6Z' fill='%2327261f'/%3E%3Cpath d='M-34-34L34 34M34-34L-34 34'/%3E%3C/svg%3E") center/contain no-repeat}
.t-carta .tile{color:#27261f;border:1px solid #27261f;border-radius:3px;background:rgba(255,255,255,.35)}
.t-carta .tile::before,.t-carta .tile::after{content:"";position:absolute;width:6px;height:6px;border:1px solid #b8322a}
.t-carta .tile::before{left:-3px;top:-3px;border-right:0;border-bottom:0}.t-carta .tile::after{right:-3px;bottom:-3px;border-left:0;border-top:0}
.t-carta .tile svg{stroke-width:1.2}
.t-carta .tile.ativo{background:#fff6dd;box-shadow:0 0 0 2px #f1e7cf,0 0 0 3px #b8322a}
.t-carta .sep{background:#27261f;opacity:.5}
.t-carta .w{border:1px solid #27261f;border-radius:3px;color:#27261f;background:rgba(255,255,255,.35)}
.t-carta .w small{letter-spacing:.14em;text-transform:uppercase;font-size:9px}
.t-carta .passeio .gato{filter:sepia(.25) contrast(.95)}

/* --- Jardim (fim de tarde) --- */
.t-jardim .cena{background:linear-gradient(180deg,#ffd89b,#f7a76c 55%,#c75b6b)}
.t-jardim .dock{border-radius:30px;background:linear-gradient(180deg,rgba(255,244,225,.62),rgba(255,224,190,.38));backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.6);box-shadow:0 20px 40px rgba(120,50,40,.35),inset 0 1px 0 #fff}
.t-jardim .fx::before{content:"";position:absolute;right:-40px;top:-80px;width:260px;height:200px;background:radial-gradient(closest-side,rgba(255,236,170,.95),rgba(255,200,120,0));animation:sol 9s ease-in-out infinite alternate}
@keyframes sol{to{opacity:.6;scale:1.15}}
.t-jardim .folhas{position:absolute;left:0;right:0;top:-1px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='22'%3E%3Cpath d='M0 0H46V4C40 4 40 14 35 20 30 12 28 4 22 4 17 4 15 10 11 17 7 9 5 4 0 4Z' fill='%23355f3b'/%3E%3C/svg%3E") repeat-x}
.t-jardim .petalas i{position:absolute;top:-10px;width:8px;height:5px;border-radius:50%;background:#ffc2d1;opacity:.9;animation:cai 8s linear infinite}
.t-jardim .petalas i:nth-child(1){left:12%}.t-jardim .petalas i:nth-child(2){left:30%;animation-delay:-3s;animation-duration:10s}.t-jardim .petalas i:nth-child(3){left:52%;animation-delay:-5s}.t-jardim .petalas i:nth-child(4){left:70%;animation-delay:-1.5s;animation-duration:9s}.t-jardim .petalas i:nth-child(5){left:88%;animation-delay:-6.5s;animation-duration:11s}
@keyframes cai{to{translate:-40px 120px;rotate:300deg;opacity:0}}
.t-jardim .tile{border-radius:18px;color:#5b3a22;background:linear-gradient(180deg,#fffaf0,#ffe9c9);box-shadow:0 6px 12px rgba(120,50,40,.28),inset 0 1px 0 #fff}
.t-jardim .tile.ativo::before{content:"";position:absolute;bottom:-10px;left:50%;width:10px;height:6px;margin-left:-5px;border-radius:0 100% 0 100%;background:#4f8a45}
.t-jardim .sep{background:rgba(120,50,40,.28)}
.t-jardim .w{color:#4a2c1a;background:rgba(255,250,240,.7);border:1px solid rgba(255,255,255,.7)}
.t-jardim .passeio .gato{filter:drop-shadow(0 0 5px rgba(255,214,140,.8))}

/* --- Chuva (janela à noite) --- */
.t-chuva .cena{background:radial-gradient(40% 50% at 20% 70%,rgba(255,64,160,.5),transparent),radial-gradient(35% 45% at 78% 60%,rgba(0,220,255,.45),transparent),radial-gradient(30% 40% at 52% 30%,rgba(255,180,60,.3),transparent),#0a1020}
.t-chuva .dock{border-radius:22px;background:linear-gradient(180deg,rgba(18,28,50,.7),rgba(10,16,30,.6));backdrop-filter:blur(14px) saturate(1.5);border:1px solid rgba(160,200,255,.28);box-shadow:0 20px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(200,225,255,.35)}
.t-chuva .chuva{position:absolute;inset:0;background:repeating-linear-gradient(104deg,transparent 0 9px,rgba(190,215,255,.22) 9px 10px,transparent 10px 23px);background-size:60px 60px;animation:chove .55s linear infinite;opacity:.7}
@keyframes chove{to{background-position:-18px 60px}}
.t-chuva .gota{position:absolute;width:6px;height:9px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.85),rgba(160,200,255,.25));animation:desce 6s ease-in infinite}
.t-chuva .gota:nth-of-type(1){left:14%;animation-delay:-1s}.t-chuva .gota:nth-of-type(2){left:41%;animation-delay:-3.4s;animation-duration:7s}.t-chuva .gota:nth-of-type(3){left:67%;animation-delay:-2s}.t-chuva .gota:nth-of-type(4){left:90%;animation-delay:-4.6s;animation-duration:8s}
@keyframes desce{0%{top:-10px;opacity:0}15%{opacity:1}100%{top:100%;opacity:.2}}
.t-chuva .tile{border-radius:16px;color:var(--n);background:rgba(255,255,255,.06);border:1px solid rgba(160,200,255,.25);box-shadow:0 0 14px color-mix(in srgb,var(--n) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.2)}
.t-chuva .tile svg{filter:drop-shadow(0 0 4px var(--n))}
.t-chuva .tile.ativo::before{content:"";position:absolute;bottom:-9px;left:50%;width:14px;height:3px;margin-left:-7px;border-radius:2px;background:#5ff;box-shadow:0 0 10px #5ff}
.t-chuva .sep{background:rgba(160,200,255,.3)}
.t-chuva .w{color:#d9ecff;background:rgba(255,255,255,.07);border:1px solid rgba(160,200,255,.25)}
.t-chuva .passeio .gato{filter:saturate(.8) brightness(.9) drop-shadow(0 0 6px rgba(80,240,255,.4))}

/* ===== palco dos mascotes ===== */
.palcoM{position:relative;height:230px;border-radius:12px;overflow:hidden;display:flex;justify-content:center;align-items:flex-end;background:radial-gradient(120% 90% at 50% 0%,var(--p1),var(--p2) 60%,var(--p3))}
.palcoM .m,.palcoM .gato{width:200px;position:relative;z-index:2;margin-bottom:34px}
.palcoM .chao{position:absolute;left:0;right:0;bottom:30px;height:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 50px,transparent 50px 180px);border-radius:2px}
.palcoM .base{position:absolute;left:0;right:0;bottom:0;height:30px;background:rgba(0,0,0,.28)}
.palcoM .chao.r1{animation:rola 2s linear infinite}.palcoM .chao.r2{animation:rola .76s linear infinite}.palcoM .chao.r3{animation:rola 1.2s linear infinite}
@keyframes rola{to{background-position-x:-180px}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.grid2 .card{margin-top:0}
.passeio.ar{bottom:calc(100% + 4px)}
.passeio .m,.passeio .gato{width:100%}
.palcoM .jv{width:150px}.palcoM .gv{width:230px}
/* ===== mascotes ilustrados novos ===== */
.m{display:block;overflow:visible}.m *{transform-box:fill-box}
.m .zz{opacity:0;font:700 12px "Sora",sans-serif;fill:#cfe3ff}
.m.sleep .zz{animation:zz 3.2s ease-in infinite}.m.sleep .zz:nth-of-type(2){animation-delay:1.1s}
@keyframes zz{0%{opacity:0;translate:0 8px}25%{opacity:1}100%{opacity:0;translate:10px -18px}}
/* água-viva */
.jv .flut{animation:flut 3.4s ease-in-out infinite}
@keyframes flut{0%,100%{translate:0 0}50%{translate:0 -7px}}
.jv .sino{transform-origin:50% 80%;animation:pulso 3.4s ease-in-out infinite}
@keyframes pulso{0%,100%{scale:1 1}45%{scale:1.07 .92}}
.jv .tent path{transform-origin:50% 0%;animation:ond 2.4s ease-in-out infinite}
.jv .tent path:nth-child(2n){animation-delay:-.8s}.jv .tent path:nth-child(3n){animation-delay:-1.4s}
@keyframes ond{0%,100%{rotate:-7deg}50%{rotate:7deg}}
.jv .olhoJ{transform-origin:50% 50%;animation:pisca 5s infinite}
.jv .corpoJ{filter:drop-shadow(0 0 8px rgba(160,230,255,.55))}
.jv.swim .sino,.jv.swim .flut,.jv.swim .tent path{animation-duration:.95s}
.jv.glow .corpoJ{animation:brilha 1.6s ease-in-out infinite}
@keyframes brilha{0%,100%{filter:drop-shadow(0 0 8px rgba(160,230,255,.6))}50%{filter:drop-shadow(0 0 16px #aef) drop-shadow(0 0 32px #f0a8ff) brightness(1.12)}}
.jv.sleep .flut{animation-duration:6s}.jv.sleep .corpoJ{opacity:.82;filter:none}.jv.sleep .sino{animation:none;scale:.9 .82}.jv.sleep .olhoJ{animation:none;scale:1 .12}
/* gaivota */
.gv .todoG{animation:gvResp 3s ease-in-out infinite}
@keyframes gvResp{0%,100%{translate:0 0}50%{translate:0 1px}}
.gv .cabG{transform-origin:15% 95%;animation:gvCab 3.4s ease-in-out infinite}
@keyframes gvCab{0%,100%{rotate:0deg}50%{rotate:-5deg}}
.gv .olhoG{transform-origin:50% 50%;animation:pisca 5s infinite}
.gv .asaVoo{display:none;transform-origin:92% 92%}
.gv.walk .todoG{animation:gvPulo .5s ease-in-out infinite}
@keyframes gvPulo{0%,100%{translate:0 0}50%{translate:0 -2px}}
.gv .pernaG{transform-origin:50% 4%}
.gv.walk .pernaG{animation:gvPerna .8s linear infinite}.gv.walk .pernaG.B{animation-delay:-.4s}
@keyframes gvPerna{0%{rotate:-24deg;scale:1 1}50%{rotate:24deg;scale:1 1}75%{rotate:0deg;scale:1 .78}100%{rotate:-24deg;scale:1 1}}
.gv.walk .cabG{animation:gvPeca .8s ease-in-out infinite}
@keyframes gvPeca{0%,100%{translate:0 0}50%{translate:3px 2px}}
.gv.fly .asaVoo{display:block;animation:bate .45s ease-in-out infinite alternate}
.gv.fly .asaVoo.B{animation-delay:-.12s}
@keyframes bate{from{rotate:-28deg}to{rotate:42deg}}
.gv.fly .asaDobrada,.gv.fly .pernaG{display:none}
.gv.fly .todoG{animation:gvVoo .9s ease-in-out infinite}
@keyframes gvVoo{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -5px;rotate:2deg}}
.gv.sleep .cabG{animation:none;rotate:38deg;translate:-16px 9px}.gv.sleep .olhoG{animation:none;scale:1 .1}
/* sapo */
.sp .todoS{transform-origin:50% 100%;animation:spResp 3s ease-in-out infinite}
@keyframes spResp{0%,100%{scale:1 1}50%{scale:1.02 1.04}}
.sp .guarda{transform-origin:50% 100%;animation:spGuarda 5s ease-in-out infinite}
@keyframes spGuarda{0%,100%{rotate:-4deg}50%{rotate:4deg}}
.sp .olhoS{transform-origin:50% 50%;animation:pisca 4.6s infinite}
.sp .papo{opacity:0;transform-origin:50% 0%}
.sp.croak .papo{opacity:.9;animation:papo 1.2s ease-in-out infinite}
@keyframes papo{0%,100%{scale:1 1}40%,60%{scale:1.6 1.8}}
.sp .nota{opacity:0;font:700 16px sans-serif;fill:#ffcf4a}
.sp.croak .nota{animation:nota 1.2s ease-out infinite}
@keyframes nota{0%{opacity:0;translate:0 6px}30%{opacity:1}100%{opacity:0;translate:8px -16px}}
.sp.hop .todoS{animation:salto 1.1s ease-in-out infinite}
@keyframes salto{0%,100%{translate:0 0;scale:1 1}12%{translate:0 3px;scale:1.12 .82}40%{translate:0 -28px;scale:.92 1.14}70%{translate:0 -4px;scale:.94 1.1}84%{translate:0 3px;scale:1.14 .8}}
.sp.hop .guarda{animation:spHop 1.1s ease-in-out infinite}
@keyframes spHop{0%,100%{rotate:0deg}40%{rotate:-14deg}84%{rotate:6deg}}
.sp.sleep .guarda{animation:none;rotate:-16deg;translate:-8px 8px}.sp.sleep .olhoS{animation:none;scale:1 .1}
.sp.sleep .todoS{animation:spResp 4s ease-in-out infinite}
/* ===== rena ===== */
.rn .todoR{animation:rnResp 3s ease-in-out infinite}@keyframes rnResp{0%,100%{translate:0 0}50%{translate:0 1px}}
.rn .cabR{transform-box:view-box;transform-origin:88px 48px;animation:rnCab 3.6s ease-in-out infinite}@keyframes rnCab{0%,100%{rotate:0deg}50%{rotate:-3deg}}
.rn .rabo{transform-origin:50% 50%;animation:rnRabo 2.4s ease-in-out infinite}@keyframes rnRabo{0%,100%{rotate:-8deg}50%{rotate:10deg}}
.rn .olhoR{transform-origin:50% 50%;animation:pisca 5s infinite}
.rn .orelhaR{transform-origin:50% 100%;animation:rnOr 6s infinite}@keyframes rnOr{0%,90%,100%{rotate:0deg}94%{rotate:-12deg}97%{rotate:5deg}}
.rn .cachecol{transform-origin:0% 0%;animation:rnCach 2.2s ease-in-out infinite}@keyframes rnCach{0%,100%{rotate:-3deg}50%{rotate:6deg}}
.rn .perna{transform-origin:50% 4%}
.rn.walk .perna{animation:rnPerna .8s linear infinite}.rn.walk .perna.B{animation-delay:-.4s}
@keyframes rnPerna{0%{rotate:-24deg;scale:1 1}50%{rotate:24deg;scale:1 1}75%{rotate:0deg;scale:1 .82}100%{rotate:-24deg;scale:1 1}}
.rn.walk .todoR{animation:rnPulo .4s ease-in-out infinite}@keyframes rnPulo{0%,100%{translate:0 0}50%{translate:0 -2.4px}}
.rn.walk .cabR{animation:rnCabW .8s ease-in-out infinite}@keyframes rnCabW{0%,100%{rotate:2deg}50%{rotate:-4deg}}
.rn.walk .cachecol{animation-duration:.8s}
.rn .sinoR{transform-origin:50% 0%}.rn .nota{opacity:0;font:700 14px sans-serif;fill:#ffd23f}
.rn.sino .todoR{animation:rnFesta .9s ease-in-out infinite}@keyframes rnFesta{0%,100%{translate:0 0}40%{translate:0 -10px}}
.rn.sino .cabR{animation:rnBal .45s ease-in-out infinite alternate}@keyframes rnBal{from{rotate:-14deg}to{rotate:12deg}}
.rn.sino .sinoR{animation:rnSino .22s ease-in-out infinite alternate}@keyframes rnSino{from{rotate:-30deg}to{rotate:30deg}}
.rn.sino .nota{animation:rnNota 1.2s ease-out infinite}.rn.sino .nota:nth-of-type(2){animation-delay:.5s}
@keyframes rnNota{0%{opacity:0;translate:0 6px}30%{opacity:1}100%{opacity:0;translate:8px -22px}}
.rn.sleep .perna{display:none}.rn.sleep .todoR{animation:none;translate:0 20px}.rn.sleep .corpoR{transform-box:view-box;transform-origin:62px 66px;scale:1 .8}
.rn.sleep .cabR{animation:none;rotate:24deg;translate:-2px 8px}.rn.sleep .olhoR{animation:none;scale:1 .1}
/* ===== papai noel ===== */
.nl .todoN{animation:nlResp 3s ease-in-out infinite}@keyframes nlResp{0%,100%{scale:1 1}50%{scale:1.015 1.02}}
.nl .todoN{transform-origin:50% 100%}
.nl .cabN{transform-box:view-box;transform-origin:60px 56px;animation:nlCab 4s ease-in-out infinite}@keyframes nlCab{0%,100%{rotate:-2deg}50%{rotate:2deg}}
.nl .braco{transform-origin:50% 8%}
.nl.idle .braco.D,.nl:not(.walk):not(.ho):not(.sleep) .braco.D{animation:nlAcena 1s ease-in-out infinite alternate}
@keyframes nlAcena{from{rotate:-130deg}to{rotate:-165deg}}
.nl .perna{transform-origin:50% 5%}
.nl .prancha,.nl .bolha,.nl .fechados{display:none}
.nl.walk .prancha{display:block}
.nl.walk .perna{animation:nlPerna .9s linear infinite}.nl.walk .perna.B{animation-delay:-.45s}
@keyframes nlPerna{0%{rotate:-20deg;scale:1 1}50%{rotate:20deg;scale:1 1}75%{rotate:0deg;scale:1 .86}100%{rotate:-20deg;scale:1 1}}
.nl.walk .braco.E{animation:nlBr .9s ease-in-out infinite alternate}@keyframes nlBr{from{rotate:14deg}to{rotate:-14deg}}
.nl.walk .braco.D{animation:nlBr .9s ease-in-out infinite alternate-reverse}
.nl.walk .todoN{animation:nlGinga .9s ease-in-out infinite}@keyframes nlGinga{0%,100%{translate:-2px 0;rotate:-2.5deg}50%{translate:2px -3px;rotate:2.5deg}}
.nl.ho .braco.E{rotate:-38deg}.nl.ho .braco.D{rotate:38deg}.nl.ho .cabN{animation:nlHo .45s ease-in-out infinite alternate}@keyframes nlHo{from{rotate:-9deg}to{rotate:-2deg}}
.nl.ho .corpo{animation:nlBarriga .3s ease-in-out infinite alternate}@keyframes nlBarriga{from{scale:1 1}to{scale:1.07 .95}}
.nl.ho .bolha{display:block;animation:nlBolha 1.4s ease-in-out infinite}@keyframes nlBolha{0%,100%{scale:1;opacity:1}50%{scale:1.08}}
.nl.sleep .oculos{display:none}.nl.sleep .fechados{display:block}
.nl.sleep .cabN{animation:none;rotate:14deg;translate:2px 6px}.nl.sleep .braco{rotate:0deg}.nl.sleep .todoN{animation:nlResp 4.5s ease-in-out infinite}
/* ===== temas de Natal (materiais) ===== */
.t-vitrine .cena{background:radial-gradient(40% 50% at 15% 30%,rgba(255,200,90,.35),transparent),radial-gradient(35% 45% at 85% 25%,rgba(255,150,90,.3),transparent),#3a0f18}
.t-vitrine .dock{border-radius:16px;background:radial-gradient(circle at 10px 10px,rgba(255,255,255,.28) 2.2px,transparent 2.7px) 0 0/22px 22px,radial-gradient(circle at 21px 21px,rgba(255,226,122,.3) 1.6px,transparent 2.1px) 0 0/22px 22px,linear-gradient(180deg,#d62839,#a31423);box-shadow:0 22px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.25)}
.t-vitrine .fita{position:absolute;top:0;bottom:0;left:calc(50% - 15px);width:30px;background:linear-gradient(90deg,#b8841a,#ffe27a 35%,#ffd23f 55%,#b8841a);box-shadow:0 0 0 1px rgba(0,0,0,.15);z-index:1}
.t-vitrine .laco{position:absolute!important;left:calc(50% - 38px);top:-30px;width:76px;height:44px;z-index:3;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.t-vitrine .brilho{position:absolute;width:12px;height:12px;background:radial-gradient(closest-side,#fff,rgba(255,226,122,.9) 35%,transparent 70%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:brilhoNatal 3s ease-in-out infinite;scale:1.8}
@keyframes brilhoNatal{0%,100%{opacity:.15;rotate:0deg}50%{opacity:1;rotate:45deg}}
.t-vitrine .tile{border-radius:8px;color:var(--c);background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 8px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.t-vitrine .tile::before{content:"";position:absolute;left:0;right:0;top:calc(50% - 5px);height:10px;background:linear-gradient(180deg,#ffe27a,#c9971f)}
.t-vitrine .tile::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 5px);width:10px;background:linear-gradient(90deg,#c9971f,#ffe27a,#c9971f)}
.t-vitrine .tile svg{position:relative;z-index:2;width:34px;height:34px;padding:5px;border-radius:50%;background:#fff6e0;box-shadow:0 1px 3px rgba(0,0,0,.35);stroke-width:2}
.t-vitrine .etq{display:none;position:absolute;left:50%;bottom:-17px;width:14px;height:18px;margin-left:-7px;background:#fff6e0;clip-path:polygon(50% 0,100% 22%,100% 100%,0 100%,0 22%);z-index:3}
.t-vitrine .tile.ativo .etq{display:block}
.t-vitrine .tile.ativo .etq::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:#a31423}
.t-vitrine .sep{display:none}
.t-vitrine .w{background:#fff4dc;border:1px solid #c9971f;color:#7a1220;box-shadow:0 5px 10px rgba(0,0,0,.3);z-index:2}
.t-vitrine .passeio .m{filter:drop-shadow(0 0 6px rgba(255,226,122,.55))}
.t-brasil .cena{background:linear-gradient(180deg,#2b1a5c 0%,#9e3a8c 38%,#ff7a5a 66%,#ffc36b 86%,#ffe3a0 100%);padding-bottom:70px}
.t-brasil .cena::before{content:"";position:absolute;inset:0;z-index:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 220'%3E%3Cpath d='M60 220C58 150 62 90 66 40' stroke='%231b1038' stroke-width='7' fill='none'/%3E%3Cg fill='%231b1038'%3E%3Cpath d='M66 40C40 22 14 30 4 52 26 40 48 42 66 40Z'/%3E%3Cpath d='M66 40C92 18 118 30 118 54 98 40 84 40 66 40Z'/%3E%3Cpath d='M66 40C56 14 34 6 18 12 40 18 54 28 66 40Z'/%3E%3Cpath d='M66 40C78 12 100 4 114 12 94 16 80 26 66 40Z'/%3E%3Cpath d='M66 40C50 40 34 56 30 78 46 58 56 50 66 40Z'/%3E%3Cpath d='M66 40C82 40 98 58 102 80 88 60 76 50 66 40Z'/%3E%3C/g%3E%3C/svg%3E") left 8px bottom -10px/120px 220px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 220'%3E%3Cpath d='M60 220C62 150 58 90 54 40' stroke='%231b1038' stroke-width='7' fill='none'/%3E%3Cg fill='%231b1038'%3E%3Cpath d='M54 40C28 18 2 30 2 54 22 40 36 40 54 40Z'/%3E%3Cpath d='M54 40C80 22 106 30 116 52 94 40 72 42 54 40Z'/%3E%3Cpath d='M54 40C64 14 86 6 102 12 80 18 66 28 54 40Z'/%3E%3Cpath d='M54 40C42 12 20 4 6 12 26 16 40 26 54 40Z'/%3E%3C/g%3E%3C/svg%3E") right 8px bottom -10px/110px 200px no-repeat}
.t-brasil .cena::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;z-index:1;background:linear-gradient(180deg,rgba(60,170,190,.0),#2fb4c4 30%,#1b7f9c);animation:mar 6s ease-in-out infinite alternate}
@keyframes mar{to{height:56px}}
.t-brasil .dockw{z-index:2}
.t-brasil .dock{border-radius:24px;background:linear-gradient(180deg,rgba(255,236,205,.5),rgba(255,206,160,.34));backdrop-filter:blur(14px) saturate(1.5);border:1px solid rgba(255,255,255,.6);box-shadow:0 20px 36px rgba(60,10,50,.4),inset 0 1px 0 #fff}
.t-brasil .fx::before{content:"";position:absolute;left:0;right:0;top:-3px;height:18px;background:radial-gradient(circle at 10px 6px,#2f8f4e 8px,transparent 8.5px) 0 0/20px 18px repeat-x,radial-gradient(circle at 20px 5px,#46b36a 7px,transparent 7.5px) 0 0/20px 18px repeat-x,radial-gradient(circle at 0 9px,#276f3d 6px,transparent 6.5px) 0 0/20px 18px repeat-x}
.t-brasil .luz{position:absolute;top:5px;width:6px;height:6px;border-radius:50%;background:var(--lc);box-shadow:0 0 8px 2px var(--lc);animation:luz 2.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes luz{0%,100%{opacity:.45}50%{opacity:1}}
.t-brasil .bola{position:absolute;top:12px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--bc) 40%,rgba(0,0,0,.35));box-shadow:0 2px 3px rgba(0,0,0,.35)}
.t-brasil .tile{border-radius:18px;color:#5b2a22;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,235,205,.7));box-shadow:0 6px 12px rgba(80,20,40,.3),inset 0 1px 0 #fff}
.t-brasil .tile.ativo::before{content:"";position:absolute;bottom:-12px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e5333f 45%,#8c1420);box-shadow:0 0 10px 2px rgba(255,80,90,.7)}
.t-brasil .sep{background:rgba(90,40,50,.3)}
.t-brasil .w{color:#5b2a22;background:rgba(255,248,235,.75);border:1px solid rgba(255,255,255,.8)}
.t-brasil .passeio .m{filter:drop-shadow(0 0 5px rgba(255,200,120,.7))}

.sem-efeitos .neveCena{display:none!important}
.palcoM .nl{width:150px}.palcoM .bn{width:150px}
/* ===== boneco de neve ilustrado ===== */
.bn .todoB{transform-origin:50% 100%;animation:bnResp 3.4s ease-in-out infinite}@keyframes bnResp{0%,100%{scale:1 1}50%{scale:1.02 .985}}
.bn .cabB{transform-box:view-box;transform-origin:60px 62px;animation:bnCab 4s ease-in-out infinite}@keyframes bnCab{0%,100%{rotate:-2deg}50%{rotate:3deg}}
.bn .olhoB{transform-origin:50% 50%;animation:pisca 5s infinite}
.bn .cachecolB{transform-box:view-box;transform-origin:70px 66px;animation:bnCach 2.6s ease-in-out infinite}@keyframes bnCach{0%,100%{rotate:-3deg}50%{rotate:5deg}}
.bn .braco.E{transform-origin:100% 30%;animation:bnBr 4s ease-in-out infinite}.bn .braco.D{transform-origin:0% 30%;animation:bnBr 4s ease-in-out infinite reverse}
@keyframes bnBr{0%,100%{rotate:0deg}50%{rotate:5deg}}
.bn .fechados{display:none}
.bn.wave .braco.D{animation:bnAcena .5s ease-in-out infinite alternate}@keyframes bnAcena{from{rotate:-10deg}to{rotate:-62deg}}
.bn.walk .todoB{animation:bnPasso .7s ease-in-out infinite}@keyframes bnPasso{0%,100%{translate:-2px 0;rotate:-4deg}25%,75%{translate:0 -7px;rotate:0deg}50%{translate:2px 0;rotate:4deg}}
.bn.walk .braco.E{animation:bnBr2 .7s ease-in-out infinite alternate}.bn.walk .braco.D{animation:bnBr2 .7s ease-in-out infinite alternate-reverse}
@keyframes bnBr2{from{rotate:-14deg}to{rotate:14deg}}
.bn.walk .cachecolB{animation-duration:.7s}
.bn.sleep .olhoB{display:none}.bn.sleep .fechados{display:block}
.bn.sleep .cabB{animation:none;rotate:18deg;translate:-4px 8px}.bn.sleep .braco{animation:none}.bn.sleep .cachecolB{animation:none}
.bn.sleep .todoB{animation:bnResp 5s ease-in-out infinite}
/* ===== Noite de neve (materiais) ===== */
.t-neve2 .cena{background:radial-gradient(60% 50% at 82% 8%,rgba(150,190,255,.38),transparent),linear-gradient(180deg,#09173a,#17356c 62%,#2d5a9a)}
.t-neve2 .dock{border-radius:22px;background:linear-gradient(180deg,rgba(220,238,255,.26),rgba(160,200,255,.1));backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.5);box-shadow:0 22px 40px rgba(0,10,40,.55),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.12)}
.t-neve2 .fx::before{content:"";position:absolute;left:-2px;right:-2px;top:-3px;height:16px;background:radial-gradient(circle at 12px 5px,#fff 9px,transparent 9.5px) 0 0/26px 16px repeat-x,radial-gradient(circle at 25px 6px,#e6f1ff 7px,transparent 7.5px) 0 0/26px 16px repeat-x}
.t-neve2 .fx::after{content:"";position:absolute;left:0;right:0;top:10px;height:14px;opacity:.8;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='14'%3E%3Cpath d='M0 0H46L40 3 35 14 30 3Z' fill='%23dcecff'/%3E%3Cpath d='M0 0H10L7 2 4 9 1 2Z' fill='%23dcecff'/%3E%3C/svg%3E") repeat-x}
.t-neve2 .luz2{position:absolute;top:8px;width:6px;height:9px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:var(--lc);box-shadow:0 0 9px 2px var(--lc);animation:luz 3s ease-in-out infinite;animation-delay:var(--d);z-index:2}
.t-neve2 .luz2::before{content:"";position:absolute;left:2px;top:-4px;width:2px;height:4px;background:#1b2a4a}
.t-neve2 .tile{border-radius:16px;color:var(--n);background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.45);box-shadow:0 8px 16px rgba(0,10,40,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.t-neve2 .tile svg{filter:drop-shadow(0 0 4px var(--n))}
.t-neve2 .tile.ativo::before{content:"❄";position:absolute;bottom:-19px;left:50%;translate:-50% 0;font-size:14px;color:#fff;text-shadow:0 0 8px #bfe0ff,0 0 14px #7fb6ff}
.t-neve2 .sep{background:rgba(255,255,255,.35)}
.t-neve2 .w{color:#eaf4ff;background:rgba(10,30,80,.45);border:1px solid rgba(255,255,255,.35)}
.t-neve2 .passeio .m{filter:drop-shadow(0 0 6px rgba(160,210,255,.6))}
.neveCena{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.floco{position:absolute;top:-10px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:.85;filter:blur(.4px);animation:cai2 var(--v) linear infinite;animation-delay:var(--d)}
@keyframes cai2{0%{translate:0 0}50%{translate:14px 140px}100%{translate:-6px 290px}}
.dock canvas{display:none}
</style>
</head>
<body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <symbol id="i-pasta" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2.5h8a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></symbol>
  <symbol id="i-globo" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"/></symbol>
  <symbol id="i-term" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2.5"/><path d="M7 9l3 3-3 3M12.5 15H17"/></symbol>
  <symbol id="i-musica" viewBox="0 0 24 24"><path d="M9 18V6l10-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="16.5" cy="16" r="2.5"/></symbol>
  <symbol id="i-chat" viewBox="0 0 24 24"><path d="M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-8l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/></symbol>
  <symbol id="relogio" viewBox="0 0 40 40"><circle cx="20" cy="20" r="17" fill="none" stroke="currentColor" stroke-width="2"/><path d="M20 20V10M20 20l7 4" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" fill="none"/><circle cx="20" cy="20" r="1.8" fill="currentColor"/></symbol>
</svg>

<main>
<span class="tag">ATLAS · pacote de temas 3</span>
<h1>Pacote Natal</h1>
<p class="lead">Quatro temas de Natal que não deixam dúvida: luzinhas, neve, presentes e um Natal brasileiro de calor. Mascotes novos, com efeitos de época ligados por padrão.</p>
<div class="row"><button id="pausa" aria-pressed="false">Pausar animações</button><button id="fxb" aria-pressed="true">Efeitos de época: ligados</button></div>

<h2>1. Mascotes</h2>
<p>Boneco de neve em pixel art e em ilustração; rena e Papai Noel ilustrados. Cada um tem 4 estados. A rena não tem nariz vermelho de propósito, para não lembrar personagem de terceiros.</p>
<div class="grid3" id="mascotes"></div>

<h2>2. Temas</h2>