/* ==========================================================
   ===============  VERSÃO A — ALEGRE  ======================
   ========================================================== */
#site-a{
  --laranja:#F1AAA9; --coral:#D99A99; --verde:#85919B;
  --ameixa:#5E666C; --creme:#F5F5F5; --tinta:#3A3D40; --branco:#fff;
  --fur-escuro:#C98B8A; --sombra-dog:#D3D1D1;
  --n1:#85919B; --n2:#F1AAA9; --n3:#B8C0C6; --n4:#CBD1D6; --n5:#C9A9A8;
  --raio:20px; --raioG:24px; --borda:3px;
  --padSec:clamp(48px,8vw,90px); --padLat:clamp(20px,5vw,48px);
  --display:'Baloo 2',system-ui,sans-serif; --corpo:'Nunito',system-ui,sans-serif;
  background:var(--creme); color:var(--tinta);
  font-family:var(--corpo); font-size:17px; line-height:1.6;
}
#site-a h1,#site-a h2,#site-a h3{font-family:var(--display); margin:0}
#site-a a{color:var(--ameixa); text-decoration:none}
#site-a a:hover{color:var(--coral)}
#site-a a:focus-visible,#site-a summary:focus-visible{outline:3px solid var(--verde); outline-offset:3px; border-radius:6px}

.a-wrap{max-width:1120px; margin-inline:auto; padding-inline:var(--padLat); position:relative; z-index:1}
.a-sec{padding-block:var(--padSec)}
.a-faixa{position:relative; overflow:hidden}
.a-rot{margin:0 0 8px; font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase}
.a-rot--c{color:var(--coral)} .a-rot--v{color:var(--verde)} .a-rot--l{color:var(--laranja)}
.a-tit{margin:0 0 28px; font-weight:800; font-size:clamp(30px,4.6vw,46px); line-height:1.08; text-wrap:pretty}
.a-sub{margin:0 0 30px; max-width:52ch}
.a-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.a-linha{display:flex; flex-wrap:wrap; gap:16px; align-items:center}

.a-btn{display:inline-flex; align-items:center; justify-content:center; min-height:46px;
  padding:10px 24px; border-radius:999px; font-family:var(--display); font-weight:700; font-size:16px}
.a-btn--s{background:var(--laranja); color:var(--tinta); box-shadow:0 4px 14px rgba(58,61,64,.18)} .a-btn--s:hover{color:#fff; background:var(--fur-escuro)}
.a-btn--v{border:var(--borda) solid var(--tinta); color:var(--tinta)}
.a-btn--claro{border:var(--borda) solid #fff; background:#fff; color:var(--tinta); border-radius:15px; min-height:50px}
.a-btn--claro:hover{color:var(--tinta); background:var(--creme); border-color:var(--creme)}
.a-btn--creme{border:var(--borda) solid var(--creme); background:var(--creme); color:var(--ameixa); border-radius:15px; min-height:50px}
.a-btn--creme:hover{color:var(--tinta); background:#fff; border-color:#fff}

.a-grad{background:linear-gradient(-45deg,var(--n1),var(--n2),var(--n3),var(--n4),var(--n1),var(--n5));
  background-size:400% 400%; animation:aGrad 30s ease infinite}
.a-grad--b{animation-delay:-10s} .a-grad--c{animation-delay:-20s}
@keyframes aGrad{0%{background-position:0% 50%}25%{background-position:50% 100%}50%{background-position:100% 50%}75%{background-position:50% 0%}100%{background-position:0% 50%}}
.a-mold{border-radius:var(--raioG); padding:6px}
.a-grid .a-mold{--tb:0deg; transform:rotate(var(--tb)); transition:transform .5s ease-in-out}
.a-grid .a-mold:hover{transform:perspective(900px) translateY(-4px) rotate(var(--tb)) rotate3d(.5,1,0,12deg)}
.a-grid .a-mold:nth-child(even):hover{transform:perspective(900px) translateY(-4px) rotate(var(--tb)) rotate3d(-.5,1,0,-12deg)}
.a-mold__i{background:var(--creme); border-radius:18px; padding:26px 24px; height:100%}

/* ambiente */
.a-aura{position:absolute; z-index:0; pointer-events:none; width:clamp(280px,42vw,540px);
  aspect-ratio:1; border-radius:50%; filter:blur(90px); opacity:.30; will-change:transform}
.a-aura--1{background:var(--n1); top:-12%; left:-8%}
.a-aura--2{background:var(--n2); bottom:-18%; right:-6%; opacity:.22}
.a-aura--3{background:var(--n4); top:38%; left:46%; opacity:.20}
.a-aura--4{background:var(--n5); top:-10%; right:12%; opacity:.26}
.a-slab .a-aura{opacity:.42; filter:blur(80px)}
@media (max-width:700px){.a-aura{filter:blur(60px); opacity:.24} .a-aura--3{display:none}}
.a-tex::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.055;
  background-size:120px 120px; background-position:0 var(--tex,0px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%232E2233'%3E%3Cellipse cx='30' cy='40' rx='9' ry='7'/%3E%3Ccircle cx='21' cy='29' r='3.6'/%3E%3Ccircle cx='30' cy='25' r='3.6'/%3E%3Ccircle cx='39' cy='29' r='3.6'/%3E%3Cg transform='rotate(28 85 84)'%3E%3Cellipse cx='85' cy='84' rx='9' ry='7'/%3E%3Ccircle cx='76' cy='73' r='3.6'/%3E%3Ccircle cx='85' cy='69' r='3.6'/%3E%3Ccircle cx='94' cy='73' r='3.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.a-slab{position:relative; overflow:hidden; margin-inline:clamp(12px,3vw,32px);
  border-radius:clamp(28px,5vw,56px); background:var(--ameixa); color:var(--creme)}
.a-slab .a-tit{color:var(--creme)} .a-slab .a-sub{color:color-mix(in srgb,var(--creme) 85%,transparent)}
.a-regra{height:5px; width:min(180px,40vw); border-radius:999px; margin:-14px 0 30px; transform-origin:left center}

/* topo + hero */
.a-topo{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--creme) 90%,transparent);
  backdrop-filter:blur(10px); border-bottom:var(--borda) solid var(--tinta)}
.a-topo__i{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:10px}
.a-marca{display:flex; flex-direction:column; line-height:1.1}
.a-marca b{font-family:var(--display); font-weight:800; font-size:20px; color:var(--tinta)}
.a-marca span{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ameixa)}

.a-hero{position:relative; overflow:hidden; min-height:100svh; display:flex; align-items:center}
.a-hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 105% at 26% 38%, color-mix(in srgb,var(--tinta) 90%,transparent) 0%,
  color-mix(in srgb,var(--tinta) 62%,transparent) 46%, color-mix(in srgb,var(--tinta) 12%,transparent) 76%, transparent 92%)}
.a-hero__i{position:relative; z-index:1; width:100%; padding-block:clamp(48px,8vh,90px) clamp(40px,7vh,72px);
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(28px,5vw,72px)}
.a-hero__t{flex:1 1 360px; min-width:min(100%,300px); color:#fff}
.a-h1{margin:0; font-weight:800; font-size:clamp(34px,6vw,60px); line-height:1.05; text-wrap:pretty}
.a-lead{margin:18px 0 0; font-size:clamp(17px,2vw,20px); max-width:36ch; color:color-mix(in srgb,#fff 92%,transparent)}
.a-tags{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0}
.a-tag{display:inline-flex; align-items:center; min-height:36px; padding:4px 16px; border:2px solid #fff;
  border-radius:999px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:#fff}
.a-acoes{display:flex; flex-wrap:wrap; gap:16px; margin:30px 0 0; align-items:center}
.a-hero__f{flex:1 1 420px; display:flex; justify-content:center}

.a-palco{position:relative; display:grid; place-items:end center; min-height:600px; width:min(460px,88vw)}
.a-palco__img{grid-area:1/1; width:min(440px,86vw); height:560px; object-fit:cover; object-position:center 30%; border-radius:28px}
.a-queda{grid-area:1/1; transform-origin:center bottom; will-change:transform; animation:aQueda 1.5s cubic-bezier(.5,0,.75,0) both}
@keyframes aQueda{0%{transform:translateY(-125vh) rotate(-9deg)}38%{transform:translateY(0) rotate(3deg); animation-timing-function:cubic-bezier(.2,.8,.3,1)}
46%{transform:translateY(0) rotate(2deg) scale(1.10,.88)}60%{transform:translateY(-64px) rotate(-2deg) scale(.95,1.06)}
72%{transform:translateY(0) rotate(1deg) scale(1.05,.94)}84%{transform:translateY(-20px) scale(.98,1.02)}93%{transform:translateY(0) scale(1.02,.98)}100%{transform:none}}
.a-flut{animation:aFlut 4.5s ease-in-out 1.5s infinite}
@keyframes aFlut{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(1.2deg)}}
.a-sombra{grid-area:1/1; position:absolute; bottom:8px; left:50%; width:58%; height:18px; translate:-50% 0;
  border-radius:50%; background:color-mix(in srgb,var(--tinta) 55%,transparent); filter:blur(6px); opacity:.26}
.a-conf{position:absolute; animation:aConf 1.1s cubic-bezier(.4,0,.7,0) both}
.a-conf:nth-of-type(1){animation-delay:1.35s}.a-conf:nth-of-type(2){animation-delay:1.55s}
.a-conf:nth-of-type(3){animation-delay:1.72s}.a-conf:nth-of-type(4){animation-delay:1.9s}
@keyframes aConf{0%{transform:translateY(-60vh) rotate(-30deg); opacity:0}20%{opacity:1}
70%{transform:translateY(0) rotate(8deg); animation-timing-function:cubic-bezier(.2,.8,.3,1)}85%{transform:translateY(-12px) rotate(-4deg)}100%{transform:none}}

/* CTA borda gradiente */
.a-cta{--r:15px; --lb:4px; position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:1em 2em; border:0; border-radius:var(--r); background:var(--laranja);
  font-family:var(--display); font-size:18px; font-weight:700; color:var(--tinta); z-index:2;
  box-shadow:0 4px 14px rgba(58,61,64,.14)}
.a-cta:hover{color:var(--tinta); background:var(--coral)}
.a-cta::after{--mi:linear-gradient(#000,#000); --mo:content-box,padding-box; content:""; position:absolute; inset:0;
  padding:var(--lb); border-radius:var(--r);
  background-image:conic-gradient(#F1AAA9,#85919B,#E4E4E4,#F1AAA9);
  -webkit-mask-image:var(--mi),var(--mi); mask-image:var(--mi),var(--mi);
  -webkit-mask-origin:var(--mo); mask-origin:var(--mo); -webkit-mask-clip:var(--mo); mask-clip:var(--mo);
  mask-composite:exclude; -webkit-mask-composite:destination-out;
  animation:none; animation-play-state:paused}
.a-cta:hover::after,.a-cta:focus-visible::after{animation-play-state:running}
@keyframes aHue{to{filter:hue-rotate(1turn)}}

/* cartões */
.a-card{background:#fff; border:var(--borda) solid var(--tinta); border-radius:var(--raio); overflow:hidden;
  --tb:0deg; --ty:0px; transform:translateY(var(--ty)) rotate(var(--tb)); transition:transform .5s ease-in-out}
.a-card:hover{transform:perspective(900px) translateY(calc(var(--ty) - 4px)) rotate(var(--tb)) rotate3d(.5,1,0,12deg)}
.a-card:nth-child(even):hover{transform:perspective(900px) translateY(calc(var(--ty) - 4px)) rotate(var(--tb)) rotate3d(-.5,1,0,-12deg)}
.a-card--a{--tb:-1deg} .a-card--b{--tb:1deg}
.a-card__f{height:10px}
.a-card__c{padding:20px 22px 22px}
.a-card__h{margin:0; font-weight:700; font-size:21px}
.a-card__p{margin:6px 0 0; font-size:15.5px}
.a-passo{display:flex; flex-direction:column; gap:12px; background:#fff; border:var(--borda) solid var(--tinta);
  border-radius:var(--raio); padding:26px 24px}
.a-passo__n{width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-family:var(--display); font-weight:800; font-size:26px; color:var(--tinta)}
.a-selo{display:inline-flex; align-items:center; min-height:32px; padding:2px 14px; background:var(--tinta);
  border-radius:999px; font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--creme)}
.a-fh{margin:14px 0 0; font-weight:800; font-size:26px; color:var(--tinta)}
.a-fp{margin:8px 0 0; color:var(--tinta)}

/* depoimentos */
.a-depo{width:100%; max-width:360px; padding:12px; perspective:1000px}
.a-depo__c{--rot:0deg; position:relative; padding-top:44px; border:var(--borda) solid var(--tinta);
  background-color:var(--tinta);
  background-image:linear-gradient(135deg,#0000 18.75%,var(--creme) 0 31.25%,#0000 0),
    repeating-linear-gradient(45deg,var(--creme) -6.25% 6.25%,var(--tinta) 0 18.75%);
  background-size:60px 60px; transform:rotate(var(--rot)); transform-style:preserve-3d;
  box-shadow:rgba(84,66,88,.28) 0 30px 30px -10px;
  transition:transform .5s ease-in-out, background-position .5s ease-in-out}
.a-depo:nth-child(1) .a-depo__c{--rot:-1.5deg} .a-depo:nth-child(3) .a-depo__c{--rot:1.2deg}
.a-depo__c:hover{background-position:-100px 100px,-100px 100px; transform:rotate(var(--rot)) rotate3d(.5,1,0,22deg)}
.a-depo__b{background:var(--laranja); padding:26px 25px 25px; transform-style:preserve-3d}
.a-depo__a{display:inline-block; color:var(--tinta); font-family:var(--display); font-size:52px; font-weight:800; line-height:.6; transform:translate3d(0,0,50px)}
.a-depo__t{margin:10px 0 0; font-size:17px; font-weight:600; color:var(--tinta); line-height:1.55; transform:translate3d(0,0,30px)}
.a-depo__n{margin-top:1rem; display:inline-block; font-family:var(--mono); font-weight:700; font-size:13px;
  text-transform:uppercase; color:var(--creme); background:var(--tinta); padding:.5rem .7rem; transform:translate3d(0,0,20px)}

/* área, faq */
.a-cx{flex:1 1 320px; background:#fff; border:var(--borda) solid var(--tinta); border-radius:var(--raioG);
  padding:28px clamp(22px,4vw,34px); display:flex; flex-direction:column; gap:18px}
.a-hl{display:flex; justify-content:space-between; gap:16px; padding-bottom:4px;
  border-bottom:2px dashed color-mix(in srgb,var(--ameixa) 30%,transparent)}
.a-hl:last-child{border-bottom:0}
.a-faq{display:flex; flex-direction:column; gap:12px}
.a-faq details{background:#fff; border:var(--borda) solid var(--tinta); border-radius:18px; padding:0 20px}
.a-faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:56px; padding:12px 0; font-family:var(--display); font-weight:700; font-size:19px}
.a-faq summary::-webkit-details-marker{display:none}
.a-faq__i{flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-size:20px; font-weight:800; color:var(--tinta); transition:transform .25s ease}
.a-faq details[open] .a-faq__i{transform:rotate(45deg)}
.a-faq p{margin:0; padding:0 0 18px}

/* rodapé + cachorro */
.a-rod{background:var(--ameixa); color:var(--creme)}
.a-rod a{color:var(--creme)}
.a-rod__h{margin:0 0 20px; font-weight:800; font-size:clamp(28px,5vw,48px); line-height:1.06; max-width:20ch}
.a-rod__b{margin-top:40px; padding-top:24px; border-top:2px solid color-mix(in srgb,var(--creme) 30%,transparent);
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; font-size:15px}
.a-rod__col{display:flex; flex-direction:column; gap:4px}

.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}
@keyframes aPasseio{0%{transform:translateX(-150px)}46%,50%{transform:translateX(calc(100% - 150px))}96%,100%{transform:translateX(-150px)}}
.a-dogbox{position:absolute; left:0; bottom:0; width:300px; height:300px; animation:aVirada 30s linear infinite}
@keyframes aVirada{0%,46%{transform:scaleX(1)}50%,96%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
.a-esc{width:300px; height:300px; transform:scale(.46); transform-origin:center bottom}
.a-brinca.pausado *{animation-play-state:paused !important}
@media (max-width:640px){.a-brinca{height:180px}.a-trilho{bottom:19px; animation-duration:22s}
  .a-dogbox{animation-duration:22s}.a-esc{transform:scale(.36)}}

/* cachorro CSS */
.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)}
@keyframes dSh{from,to{transform:scaleX(.75)}45%,55%{transform:scaleX(.5)}}
.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}
@keyframes dCo{from,to{transform:none}50%{transform:translateY(-25%)}}
.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}
@keyframes dTg{from,to{transform:rotate(-15deg)}50%{transform:rotate(-15deg) scaleY(1.5)}}
.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}
@keyframes dHd{from,to{transform:rotate(-10deg)}50%{transform:rotate(-15deg)}}
.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}
@keyframes dEf{50%{transform:rotate(-15deg)}}
.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}
@keyframes dEm{from,to{transform:rotate(0)}50%{transform:rotate(25deg)}}
.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}
@keyframes dEb{from,to{transform:rotate(0)}50%{transform:rotate(-10deg)}}
.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}
@keyframes dTo{from,to{transform:none}50%{transform:translateY(15%)}}
.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}
@keyframes dSp{from,66%,to{transform:none}33%{transform:translateX(10px)}}
.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}
@keyframes dTa{from,to{transform:rotate(-45deg) translateX(-15%)}50%{transform:rotate(-25deg) translateX(15%)}}
.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}
@keyframes dTi{from,to{transform:rotate(-10deg) translateY(50%) scaleX(.8) scaleY(.9)}50%{transform:rotate(5deg) translateY(50%) scaleX(.8) scaleY(.9)}}
.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)}
@keyframes dLe{from,to{transform:none}33%{transform:rotate(-55deg)}66%{transform:rotate(-20deg)}}
.dog__leg>.dog__leg-inner{transform:rotate(90deg); animation:dLi infinite var(--dur) var(--delay,0s)}
@keyframes dLi{from,to{transform:none}33%{transform:rotate(70deg)}76%{transform:none}}
.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)}

/* ==========================================================================
   INTERACAO DOS BOTOES (mesmo vocabulario da versao Marcante)
   Sobe no hover, afunda no clique. Aqui a sombra e difusa em vez de dura,
   porque a linguagem da Alegre e mais macia - o movimento e o mesmo, o
   acabamento acompanha o estilo de cada versao.
   ========================================================================== */
.a-btn,.a-cta{transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease}
.a-btn:hover,.a-cta:hover{transform:translateY(-3px); box-shadow:0 10px 22px rgba(58,61,64,.22)}
.a-btn:active,.a-cta:active{transform:translateY(1px); box-shadow:0 3px 8px rgba(58,61,64,.20)}

@media (prefers-reduced-motion: reduce){
  .a-btn,.a-cta{transition:none}
  .a-btn:hover,.a-cta:hover,.a-btn:active,.a-cta:active{transform:none}
}
/* ==========================================================================
   CONTRASTE DOS BOTOES
   Quando a paleta viva foi trocada pela da marca dela (rosas mais suaves),
   o texto branco caiu para 2,3:1 de contraste - abaixo do minimo de 4,5:1
   e praticamente ilegivel. Agora o texto e escuro sobre o rosa:
     texto #3A3D40 sobre #F1AAA9 = 5,76:1
     texto #3A3D40 sobre #D99A99 = 4,70:1
   ========================================================================== */
.a-btn--s:hover{background:var(--coral); color:var(--tinta)}
/* ==========================================================================
   LISTA DE FORMACAO - VERSAO ALEGRE
   ========================================================================== */
.a-form{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.a-form li{position:relative; padding-left:26px; font-size:15.5px; line-height:1.5; color:var(--tinta)}
.a-form li::before{content:"✦"; position:absolute; left:0; top:0; color:var(--coral); font-size:14px}

/* ==========================================================================
   TEMAS DA ALEGRE
   Aqui muda so o conjunto de neons. O "padrao" e o do molde; o "marca" e o
   mesmo desenho puxado para o azul ciano e o amarelo do Instagram dele.
   ========================================================================== */
#site-a[data-tema="padrao"]{
  --n1:#00EFF8; --n2:#F800B4; --n3:#EBF503; --n4:#02F6C1; --n5:#9400F8;
  --coral:#F9584C}
#site-a[data-tema="marca"]{
  --n1:#7FB08C; --n2:#1E2E24; --n3:#EFDCB4; --n4:#DDE9DC; --n5:#4F7A5B;
  --coral:#4F7A5B}