/* ==========================================================================
   O CACHORRINHO DO RODAPÉ
   As regras de forma dele moravam no 02-versao-a-alegre.css, que não vem
   no site entregue — só a versão Marcante veio. A marcação continuava no
   rodapé, mas sem estas regras nada era desenhado.
   As VARIÁVEIS DE COR que ele usa (--fur-escuro, --laranja, --raio…) são
   redeclaradas para #site-b dentro do 04-interacoes.css; por isso este
   arquivo precisa carregar depois daquele.
   ========================================================================== */
.a-brinca{position:relative; height:240px; margin:26px 0 8px; border-radius:var(--raioG); overflow:hidden;
  background:radial-gradient(120% 90% at 50% 120%, color-mix(in srgb,var(--n5) 22%,transparent), transparent 70%),
  color-mix(in srgb,var(--tinta) 30%, transparent)}
.a-chao{position:absolute; left:5%; right:5%; bottom:34px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--creme) 26%,transparent) 15% 85%,transparent)}
.a-trilho{position:absolute; left:0; bottom:15px; width:100%; height:300px; pointer-events:none; animation:aPasseio 30s linear infinite}
.a-dogbox{position:absolute; left:0; bottom:0; width:300px; height:300px; animation:aVirada 30s linear infinite}
.a-esc{width:300px; height:300px; transform:scale(.46); transform-origin:center bottom}
.a-brinca.pausado *{animation-play-state:paused !important}
.a-dogbox{animation-duration:22s}
.dog{--fur:var(--laranja); --fur-d:var(--fur-escuro); --spot:var(--coral); --snout:var(--ameixa); --collar:var(--verde);
  --dur:.8s; --semi:calc(var(--dur)/2); --ease:cubic-bezier(.5,0,.5,1); --stagger:calc(-1 * var(--semi) / 2);
  position:relative; z-index:1; height:300px; width:300px; display:flex; justify-content:center; align-items:center}
.dog *,.dog *::before,.dog *::after{animation-timing-function:var(--ease)}
.dog *{position:absolute}
.dog::before{content:""; position:absolute; bottom:13.333%; left:0; width:100%; height:3.333%;
  background:var(--sombra-dog); border-radius:2px; animation:dSh var(--semi) infinite; animation-timing-function:var(--ease)}
.dog__neck{width:50%; height:100px; right:-5px; bottom:calc(100% - 10px); transform-origin:center bottom; transform:rotate(15deg); z-index:2}
.dog__neck>.dog__fur{border-bottom-left-radius:10px; height:100%; width:100%}
.dog__neck>.dog__fur::before{content:""; position:absolute; top:0; right:0; height:50px; width:100%; background:var(--fur-d); z-index:1; transform-origin:right bottom; transform:rotate(15deg)}
.dog__collar{width:calc(100% + 10px); height:15%; background:var(--collar); left:-5px; bottom:30px; border-radius:5px; z-index:2; animation:dCo var(--semi) calc(var(--semi)/4) infinite}
.dog__collar::after{content:""; width:18%; height:120%; border-radius:50%; background:var(--snout); position:absolute; right:0; top:110%; transform-origin:center top; animation:dTg var(--semi) infinite both}
.dog__head{height:80%; width:145%; left:-2%; bottom:50%; transform-origin:left center; z-index:2; animation:dHd var(--semi) calc(var(--semi)/4) infinite}
.dog__head>.dog__fur{height:100%; width:100%; border-bottom-right-radius:80px}
.dog__head>.dog__fur::before{content:""; position:absolute; top:-80%; left:-30%; width:100%; height:0; padding-top:100%; background:var(--spot); z-index:1; border-radius:50%}
.dog__snout{--color:var(--snout); width:25%; height:0; padding-top:25%; background:var(--color); top:0; right:-5px; border-bottom-left-radius:100%; z-index:1}
.dog__ears{bottom:40%; height:100%; width:30%; left:0; z-index:-1}
.dog__ear{--color:var(--spot); width:100%; height:100%; bottom:0; left:0; transform-origin:left bottom; transform:rotate(-10deg); animation:dEf var(--semi) infinite}
.dog__ear::before{content:""; position:absolute; height:25px; width:15px; z-index:2; top:-2px; right:-7px; border-top-left-radius:100%; border:2px solid transparent; border-left:2px solid var(--snout); transform-origin:bottom left; animation:dEm var(--semi) calc(-1*var(--semi)) infinite}
.dog__ear>.dog__fur{border-top-left-radius:100%; height:100%; width:100%}
.dog__ear:nth-child(2){left:15px; bottom:5px; transform:rotate(-5deg); --color:var(--fur); z-index:-1; animation:dEb var(--semi) infinite both}
.dog__eye{--size:6%; --color:var(--snout); width:var(--size); height:0; padding:var(--size); left:35%; top:20%; border-radius:50%; background:var(--color); z-index:1}
.dog__eye::before{content:""; position:absolute; inset:0; border-radius:50%; background:var(--color); z-index:1}
.dog__eye::after{content:""; width:100%; height:100%; position:absolute; left:-50%; top:-50%; border-top-left-radius:100%; border:2px solid var(--color); border-bottom-color:var(--spot); border-right-color:var(--spot); transform:scale(1.25); z-index:0}
.dog__torso{width:56.667%; height:33.333%; animation:dTo var(--semi) both infinite}
.dog__torso>.dog__fur{height:100%; width:185px; border-top-left-radius:40px; transform-origin:left center; transform:rotate(-20deg) translateY(10px); z-index:1}
.dog__torso>.dog__fur::after{height:100%; width:100%; border-bottom-left-radius:200px 85px; border-bottom-right-radius:100px}
.dog__torso>.dog__legs{position:absolute; top:0; left:0; width:100%; height:100%}
.dog__spot{width:120px; height:120px; bottom:40px; left:-20px; border-radius:50%; background:var(--spot); z-index:1; animation:dSp var(--dur) calc(-1*var(--semi)) both infinite}
.dog__spot::after{content:""; height:20px; width:20px; border-radius:50%; background:inherit; position:absolute; bottom:-10px; right:5px}
.dog__torso>.dog__tail{--color:var(--spot); bottom:calc(100% - 15px); left:0; transform-origin:center bottom; transform:rotate(-45deg)}
.dog__tail{height:15px; width:20px; background:var(--color); border-top-right-radius:10px 100%; border-top-left-radius:10px 100%; animation:dTa var(--semi) infinite}
.dog__tail>.dog__tail{bottom:90%; transform-origin:bottom left; transform:rotate(-10deg) translateY(50%) scaleX(.8) scaleY(.9); animation:dTi var(--semi) var(--stagger) infinite}
.dog__legs>.dog__leg{bottom:5px; --color:var(--fur)}
.dog__legs>.dog__leg:nth-child(1),.dog__legs>.dog__leg:nth-child(3){right:15px}
.dog__legs>.dog__leg:nth-child(3),.dog__legs>.dog__leg:nth-child(4){--color:var(--fur-d); z-index:-1}
.dog__legs>.dog__leg:nth-child(1),.dog__legs>.dog__leg:nth-child(4){--delay:0s}
.dog__legs>.dog__leg:nth-child(2),.dog__legs>.dog__leg:nth-child(3){--delay:calc(-1*var(--dur)/2)}
.dog__legs>.dog__leg:nth-child(2),.dog__legs>.dog__leg:nth-child(4){left:0}
.dog__leg{position:absolute; height:65px; width:45px; background:var(--color); transform-origin:center 5px; animation:dLe infinite var(--dur) var(--delay,0s)}
.dog__leg>.dog__leg-inner{transform:rotate(90deg); animation:dLi infinite var(--dur) var(--delay,0s)}
.dog__leg>.dog__fur{width:144.444%; height:100%}
.dog__leg>.dog__fur::after{width:45px; bottom:0; top:initial; transform:rotate(15deg)}
.dog__fur{position:absolute; overflow:hidden}
.dog__fur::after{content:""; position:absolute; width:100%; height:150%; top:0; left:0; background:var(--color,var(--fur)); transform-origin:center bottom}
.dog__leg-inner{position:absolute; height:65%; width:100%; top:100%; transform-origin:center top}
.dog__leg-inner::before{content:""; width:45px; height:45px; background:var(--color); position:absolute; border-radius:50%; top:-22.5px}
.dog__leg-inner>.dog__fur{width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden}
.dog__leg-inner>.dog__fur::after{content:""; position:absolute; width:100%; height:150%; top:0; left:0; background:var(--color); transform-origin:center top; transform:rotate(15deg)}
@keyframes aPasseio{0%{transform:translateX(-150px)}46%,50%{transform:translateX(calc(100% - 150px))}96%,100%{transform:translateX(-150px)}}
@keyframes aVirada{0%,46%{transform:scaleX(1)}50%,96%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
@keyframes dSh{from,to{transform:scaleX(.75)}45%,55%{transform:scaleX(.5)}}
@keyframes dCo{from,to{transform:none}50%{transform:translateY(-25%)}}
@keyframes dTg{from,to{transform:rotate(-15deg)}50%{transform:rotate(-15deg) scaleY(1.5)}}
@keyframes dHd{from,to{transform:rotate(-10deg)}50%{transform:rotate(-15deg)}}
@keyframes dEf{50%{transform:rotate(-15deg)}}
@keyframes dEm{from,to{transform:rotate(0)}50%{transform:rotate(25deg)}}
@keyframes dEb{from,to{transform:rotate(0)}50%{transform:rotate(-10deg)}}
@keyframes dTo{from,to{transform:none}50%{transform:translateY(15%)}}
@keyframes dSp{from,66%,to{transform:none}33%{transform:translateX(10px)}}
@keyframes dTa{from,to{transform:rotate(-45deg) translateX(-15%)}50%{transform:rotate(-25deg) translateX(15%)}}
@keyframes dTi{from,to{transform:rotate(-10deg) translateY(50%) scaleX(.8) scaleY(.9)}50%{transform:rotate(5deg) translateY(50%) scaleX(.8) scaleY(.9)}}
@keyframes dLe{from,to{transform:none}33%{transform:rotate(-55deg)}66%{transform:rotate(-20deg)}}
@keyframes dLi{from,to{transform:none}33%{transform:rotate(70deg)}76%{transform:none}}