/* ════ O GUARDIÃO DAS CHAVES — estilos (08/07/2026) ════ */
.valet-stage{position:fixed;right:0;bottom:0;z-index:900;pointer-events:none;width:440px;height:310px}
.valet{
  position:absolute;bottom:16px;left:100%;width:172px;height:228px;
  pointer-events:auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));
}
.valet svg{width:100%;height:100%;overflow:visible}
.v-ink{fill:#120c05;stroke:rgba(206,157,98,.5);stroke-width:1.1}
.v-ink2{fill:#120c05;stroke:rgba(206,157,98,.3);stroke-width:1}
.v-gold{fill:#CE9D62;opacity:.85}

.valet.v-in{animation:vWalkIn 3.4s cubic-bezier(0.25,0.1,0.25,1) forwards}
@keyframes vWalkIn{from{transform:translateX(0)}to{transform:translateX(-300px)}}
.valet.v-out{animation:vWalkOut 2.6s cubic-bezier(0.55,0,0.8,0.5) forwards}
@keyframes vWalkOut{from{transform:translateX(-300px)}to{transform:translateX(40px)}}

.valet.v-step .v-bob{animation:vBob .46s ease-in-out infinite}
@keyframes vBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.2px)}}
.v-leg{transform-box:fill-box;transform-origin:50% 8%}
.valet.v-step .v-leg-a{animation:vLegA .92s ease-in-out infinite}
.valet.v-step .v-leg-b{animation:vLegB .92s ease-in-out infinite}
@keyframes vLegA{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-14deg)}}
@keyframes vLegB{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(16deg)}}

.valet.v-idle .v-breathe{transform-box:fill-box;transform-origin:50% 100%;animation:vBreathe 3.6s ease-in-out infinite}
@keyframes vBreathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}

.v-torso{transform-box:fill-box;transform-origin:50% 96%;transition:transform .7s cubic-bezier(0.22,1,0.36,1)}
.valet.v-bow .v-torso{transform:rotate(12deg)}

/* a chave da marca está SEMPRE com ele: pendurada e balançando desde a entrada */
.v-keydrop{
  transform-box:fill-box;transform-origin:50% 0%;
  animation:vSway 2.4s ease-in-out infinite;
  transition:filter .5s ease;
}
@keyframes vSway{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-4deg)}}
/* na hora de servir ela acende */
.valet.v-serve .v-keydrop{filter:drop-shadow(0 0 10px rgba(226,194,155,.95))}

.valet-served{
  position:absolute;bottom:104px;right:210px;z-index:901;
  display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
}
.valet-served.show{
  opacity:1;transform:none;pointer-events:auto;
  transition:opacity .6s ease .8s,transform .7s cubic-bezier(0.34,1.56,0.64,1) .8s;
}
.valet-served a{
  font-family:'Albert Sans',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#1B1814;background:#CE9D62;padding:13px 20px;
  text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 26px -10px rgba(206,157,98,.65);
  transition:transform .3s cubic-bezier(0.22,1,0.36,1),box-shadow .3s ease;
}
.valet-served a:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(206,157,98,.8)}
.valet-served .vx{
  font-family:'Albert Sans',sans-serif;background:none;border:none;cursor:pointer;
  color:rgba(232,230,223,.45);font-size:15px;padding:6px;line-height:1;
}
.valet-served .vx:hover{color:#CE9D62}

/* auto-despedida: atravessa, espera, pula e vai embora */
.valet.v-cross{animation:vCross 4.6s ease-in-out forwards}
@keyframes vCross{from{transform:translateX(-300px)}to{transform:translateX(calc(-100vw + 150px))}}
.valet.v-hop svg{animation:vHop .62s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes vHop{
  0%{transform:translateY(0)}
  38%{transform:translateY(-26px)}
  70%{transform:translateY(0) scaleY(.94)}
  100%{transform:translateY(0) scaleY(1)}
}
.valet.v-leave{animation:vLeave 1.9s cubic-bezier(0.55,0,0.8,0.5) forwards}
@keyframes vLeave{from{transform:translateX(calc(-100vw + 150px))}to{transform:translateX(calc(-100vw - 240px))}}

@media (max-width:700px){
  .valet.v-cross{animation-name:vCrossM}
  @keyframes vCrossM{from{transform:translateX(-206px)}to{transform:translateX(calc(-100vw + 116px))}}
  .valet.v-leave{animation-name:vLeaveM}
  @keyframes vLeaveM{from{transform:translateX(calc(-100vw + 116px))}to{transform:translateX(calc(-100vw - 200px))}}
  .valet{width:132px;height:176px;bottom:86px}       /* acima do float do WhatsApp */
  .valet.v-in{animation-name:vWalkInM}
  @keyframes vWalkInM{from{transform:translateX(0)}to{transform:translateX(-206px)}}
  .valet.v-out{animation-name:vWalkOutM}
  @keyframes vWalkOutM{from{transform:translateX(-206px)}to{transform:translateX(30px)}}
  .valet-served{bottom:150px;right:130px}
}
@media (prefers-reduced-motion: reduce){
  .valet-stage{display:none}
}