/* Convite de saída: mesmos tokens e botões do checkout (painel.css). */
.retencao{color:var(--tinta);background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio-bloco);padding:clamp(20px,5vw,32px);width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-shadow:var(--sombra)}
.retencao::backdrop{background:color-mix(in srgb,var(--topo) 60%,transparent);backdrop-filter:blur(4px)}
.retencao-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.retencao-selo{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:color-mix(in srgb,var(--azul) 12%,var(--papel));color:var(--azul);position:relative}
.retencao-selo::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid currentColor;opacity:0}
.retencao-selo .ic{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.retencao-ondas{display:flex;align-items:center;gap:3px;height:28px}
.retencao-ondas i{display:block;width:4px;height:100%;border-radius:2px;background:currentColor;transform:scaleY(.35)}
.retencao-ondas i:nth-child(2),.retencao-ondas i:nth-child(4){transform:scaleY(.7)}
.retencao-ondas i:nth-child(3){transform:scaleY(1)}
.retencao h2{margin:16px 0 0;font-size:clamp(1.4rem,5vw,1.75rem);font-weight:650;line-height:1.2;text-wrap:balance}
.retencao-fechar{flex:none;width:44px;height:44px;min-height:44px;margin:-8px -8px 0 0;padding:0;background:transparent;border:0;border-radius:999px;color:var(--suave)}
.retencao-fechar:hover{background:var(--fundo);color:var(--tinta)}
.retencao-fechar .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .2s var(--curva)}
.retencao-fechar:hover .ic{transform:rotate(90deg)}
.retencao p{margin:12px 0 0;color:var(--tinta)}
.retencao .suave{color:var(--suave);font-size:.9rem}
.retencao-acoes{display:grid;gap:10px;margin-top:24px}
.retencao-acoes>button,.retencao-acoes>.botao{width:100%;margin:0;justify-content:center}
.retencao-teste{margin-top:20px;padding:16px 18px;background:var(--fundo);border-radius:var(--raio)}
.retencao-teste h3{margin:0;font-size:1rem}
.retencao-teste p{margin:6px 0 8px;font-size:.95rem}
.retencao-teste a{font-weight:600}
.retencao-texto{display:inline;background:transparent;border:0;border-radius:0;color:var(--azul);padding:0;min-height:44px;margin:0;box-shadow:none;text-decoration:underline;text-underline-offset:3px;font:inherit;cursor:pointer}
.retencao-texto:hover{background:transparent;color:var(--azul-escuro)}
.retencao-atalho{font-size:.95rem;color:var(--suave)}
/* Entrada com mola, saída curta; fundo escurece e desfoca junto. Só transform/opacity (60 fps). */
@media(prefers-reduced-motion:no-preference){
.retencao[open]{animation:retencao-entrar .32s var(--curva)}
.retencao[open]::backdrop{animation:retencao-fundo .32s ease-out}
.retencao.saindo{animation:retencao-sair .16s ease-in forwards}
.retencao.saindo::backdrop{animation:retencao-fundo .16s ease-in reverse forwards}
@keyframes retencao-entrar{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes retencao-sair{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes retencao-fundo{from{opacity:0;backdrop-filter:blur(0)}}
.retencao[open] .retencao-selo{animation:retencao-selo .5s var(--curva) .08s both}
.retencao[open] .retencao-ondas i{animation:retencao-onda .8s ease-in-out infinite alternate}
.retencao[open] .retencao-selo::after{animation:retencao-anel 1.8s ease-out .5s infinite}
.retencao-ondas i:nth-child(2){animation-delay:-.2s!important}.retencao-ondas i:nth-child(3){animation-delay:-.45s!important}
.retencao-ondas i:nth-child(4){animation-delay:-.7s!important}.retencao-ondas i:nth-child(5){animation-delay:-.9s!important}
.retencao[open] .retencao-selo>.ic{animation:retencao-flutua 1.4s ease-in-out .5s infinite alternate}
@keyframes retencao-selo{from{opacity:0;transform:scale(.6) rotate(-8deg)}}
@keyframes retencao-onda{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@keyframes retencao-anel{from{opacity:.45;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}
@keyframes retencao-flutua{from{transform:translateY(2px) rotate(6deg)}to{transform:translateY(-4px) rotate(-8deg)}}}