/* ===== Assinatura do Hofy ===== */
.ass{gap:16px}
.ass-top{display:flex;align-items:center;gap:12px}
.ass-sit{align-self:flex-start;display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800;background:var(--soft);color:var(--muted)}
.ass-sit.ok{background:var(--ok-soft);color:var(--ok)}
.ass-sit.w{background:var(--gold-soft);color:var(--gold-ink)}
.ass-sit.mal{background:var(--bad-soft);color:var(--bad)}
.ass-lead{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.ass-plano{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:var(--card);border:1.5px solid var(--line);cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.ass-plano input{position:absolute;opacity:0;pointer-events:none}
.ass-plano.on{border-color:var(--gold);background:linear-gradient(180deg,#FFFDF7,var(--card));box-shadow:0 10px 26px -14px rgba(201,162,77,.7)}
.ass-plano:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.ass-plano .small{line-height:1.4}
.ass-ic{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--soft);color:var(--muted)}
.ass-plano.on .ass-ic{background:var(--gold-soft);color:var(--gold-ink)}
.ass-selo{font-size:11px;font-weight:800;padding:3px 8px;border-radius:8px;background:var(--ok-soft);color:var(--ok);white-space:nowrap}
.ass-preco{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;text-align:right}
.ass-preco strong{font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ass-preco span{font-size:12px;color:var(--muted)}
.ass-dados{padding:14px;gap:12px;display:flex;flex-direction:column}
.ass-dados>*{border-bottom:none !important;padding:0 !important}
.ass-fino{margin:0;text-align:center;line-height:1.45}
.ass-pix{padding:18px;gap:12px;display:flex;flex-direction:column;align-items:center;text-align:center}
.ass-pix>*{border-bottom:none !important;padding-left:0 !important;padding-right:0 !important}
.ass-pix strong{font-size:17px}
.ass-pix .small{line-height:1.5;max-width:420px}
.ass-qr{width:220px;height:220px;max-width:100%;border-radius:14px;background:#fff;padding:8px;border:1px solid var(--line);image-rendering:pixelated}
.ass-cod{width:100%;font-size:12px;font-family:ui-monospace,Menlo,monospace;resize:none;word-break:break-all}
.ass-espera{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);text-align:left}
.ass-ponto{width:10px;height:10px;border-radius:5px;background:var(--gold);flex-shrink:0;animation:assPulso 1.4s ease-in-out infinite}
@keyframes assPulso{50%{opacity:.25;transform:scale(.7)}}
.ass-link{border:none !important;background:transparent !important;color:var(--muted);font-size:13px}
.ass-resumo{padding:4px 16px}
.ass-resumo>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--soft)}
.ass-resumo>div:last-child{border-bottom:none}
.ass-resumo span{color:var(--muted);font-size:14px}
.ass-cancela{color:var(--bad);border-color:rgba(155,44,44,.25)}
@media (prefers-reduced-motion:reduce){.ass-ponto{animation:none}}
@media (min-width:900px){#app:has(> .screen.ass){max-width:640px}}
.ass-mini{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px !important;border-radius:12px;background:var(--soft);font-size:13px;color:var(--muted);text-align:left}
.ass-mini strong{font-size:16px;color:var(--ink);white-space:nowrap}
.ass-mini small{font-size:12px;font-weight:600;color:var(--muted)}
.ass-ganho{padding:10px 14px;border-radius:12px;background:var(--ok-soft);color:var(--ok);font-size:13px;font-weight:700;line-height:1.45}
.ass-seguro{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);line-height:1.4;text-align:left}
.ass-seguro svg{flex-shrink:0;color:var(--ok)}
.ass-preco s{font-size:12px;color:var(--muted);font-weight:600;text-decoration-thickness:1.5px}
.ass-plano.destaque{margin-top:12px;border-width:2px}
.ass-fita{position:absolute;top:-11px;left:16px;padding:3px 10px;border-radius:999px;background:var(--ok);color:#fff;font-size:11px;font-weight:800;letter-spacing:.01em;box-shadow:0 4px 12px -4px rgba(47,93,78,.5)}
.ass-selo.ouro{background:linear-gradient(180deg,#EDD291,#C9A24D);color:#1F1B1A}
.ass-botao{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.ass-botao svg{width:20px;height:20px;flex-shrink:0}
.ass-mini-ic{display:flex;color:var(--gold-ink)}
.ass-mini-ic svg{width:18px;height:18px}
.ass-plano .ass-ic svg{width:22px;height:22px}
.ass-pix-logo{width:22px;height:22px;display:block;object-fit:contain}
.ass-botao .ass-pix-logo{width:20px;height:20px;background:#fff;border-radius:6px;padding:2px;box-sizing:border-box}
.ass-mini-ic .ass-pix-logo{width:18px;height:18px}
.ass-plano .ass-ic:has(.ass-pix-logo){background:#fff;border:1px solid var(--line)}
/* animação ao passar o mouse nos planos */
.ass-plano{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease,background .25s ease}
.ass-plano .ass-ic{transition:transform .3s cubic-bezier(.2,.8,.2,1),background .25s ease}
.ass-plano .ass-preco strong{transition:color .2s ease}
.ass-fita{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .ass-plano:hover{transform:translateY(-3px);border-color:rgba(201,162,77,.75);box-shadow:0 14px 32px -16px rgba(122,90,30,.45)}
  .ass-plano:hover .ass-ic{transform:scale(1.08) rotate(-4deg)}
  .ass-plano:hover .ass-preco strong{color:var(--gold-ink)}
  .ass-plano.destaque:hover .ass-fita{transform:translateY(-2px)}
}
.ass-plano:active{transform:scale(.99)}
@media (prefers-reduced-motion:reduce){.ass-plano,.ass-plano .ass-ic,.ass-fita{transition:none}.ass-plano:hover,.ass-plano:hover .ass-ic{transform:none}}
/* botão de assinar: brilho passando, sobe ao passar o mouse e o ícone pulsa */
.ass-botao{position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,filter .2s ease}
.ass-botao::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);pointer-events:none;animation:assBrilho 3.6s ease-in-out 1.2s infinite}
.ass-botao svg,.ass-botao .ass-pix-logo{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@keyframes assBrilho{0%,70%{left:-60%}100%{left:130%}}
@media (hover:hover){
  .ass-botao:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(201,162,77,.8);filter:saturate(1.08)}
  .ass-botao:hover::after{animation-duration:1.1s;animation-delay:0s}
  .ass-botao:hover svg,.ass-botao:hover .ass-pix-logo{transform:scale(1.12) rotate(-6deg)}
}
.ass-botao:active{transform:scale(.98)}
.ass-botao:disabled::after{display:none}
@media (prefers-reduced-motion:reduce){.ass-botao::after{animation:none;display:none}.ass-botao,.ass-botao svg,.ass-botao .ass-pix-logo{transition:none}.ass-botao:hover{transform:none}}
/* brilho que atravessa o plano quando ele é escolhido */
.ass-luz{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.ass-plano.on .ass-luz::after{content:"";position:absolute;top:-20%;left:-70%;width:45%;height:140%;background:linear-gradient(100deg,transparent,rgba(255,236,190,.0) 10%,rgba(255,240,205,.85) 50%,rgba(255,236,190,0) 90%,transparent);transform:skewX(-18deg);animation:assLuz .9s cubic-bezier(.3,.6,.3,1) forwards}
.ass-plano.on{animation:assEscolha .45s cubic-bezier(.2,.8,.2,1)}
@keyframes assLuz{from{left:-70%}to{left:135%}}
@keyframes assEscolha{0%{box-shadow:0 0 0 0 rgba(201,162,77,.55)}60%{box-shadow:0 0 0 7px rgba(201,162,77,0)}100%{box-shadow:0 10px 26px -14px rgba(201,162,77,.7)}}
@media (prefers-reduced-motion:reduce){.ass-plano.on .ass-luz::after{display:none}.ass-plano.on{animation:none}}
/* brilho mais lento e suave (substitui o anterior) */
.ass-plano.on .ass-luz::after{width:70%;left:-90%;background:linear-gradient(100deg,rgba(255,240,205,0) 0%,rgba(255,240,205,.18) 35%,rgba(255,244,215,.42) 50%,rgba(255,240,205,.18) 65%,rgba(255,240,205,0) 100%);transform:skewX(-14deg);filter:blur(6px);animation:assLuz 1.8s cubic-bezier(.45,.05,.25,1) .05s both}
@keyframes assLuz{from{left:-90%;opacity:0}20%{opacity:1}80%{opacity:1}to{left:140%;opacity:0}}
.ass-plano.on{animation:assEscolha 1.1s cubic-bezier(.25,.8,.25,1)}
@keyframes assEscolha{0%{box-shadow:0 0 0 0 rgba(201,162,77,.28)}55%{box-shadow:0 0 0 6px rgba(201,162,77,0)}100%{box-shadow:0 10px 26px -14px rgba(201,162,77,.7)}}
.ass-selo.verde{background:var(--ok);color:#fff}
.ass-doc{font-size:12px;font-weight:700;min-height:16px;margin-top:4px}
.ass-doc.ok{color:var(--ok)}
.ass-doc.erro{color:var(--bad)}
#assDoc.ok{border-color:rgba(47,93,78,.55)}
#assDoc.erro{border-color:rgba(155,44,44,.6);background:#FFF8F7}
/* ===== convite para assinar no menu lateral (só no computador) ===== */
.nav .nav-ass{display:none}
@media (min-width:900px){
  .nav .nav-ass{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;margin-top:auto;padding:10px 12px;border-radius:14px;text-decoration:none;color:var(--ink);border:1px solid rgba(201,162,77,.35);background:var(--gold-soft);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s}
  .nav .nav-ass + .nav-sair{margin-top:6px}
  .nav-ass-ic{width:32px;height:32px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(#211A14,#0F0C09)}
  .nav-ass-ic svg{width:14px;height:18px}
  .nav-ass-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
  .nav-ass-tx strong{font-size:13px;font-weight:800;line-height:1.2;white-space:nowrap}
  .nav-ass-tx small{font-size:11.5px;color:var(--gold-ink);font-weight:600;line-height:1.25}
  .nav .nav-ass:hover{transform:translateY(-2px);border-color:rgba(201,162,77,.7);box-shadow:0 10px 22px -12px rgba(122,90,30,.5)}
  .nav .nav-ass.forte{background:linear-gradient(160deg,#EDD291,#C9A24D 60%,#B48C3A);border-color:transparent;box-shadow:0 8px 20px -10px rgba(201,162,77,.8)}
  .nav .nav-ass.forte .nav-ass-tx small{color:#3A2C10}
  .nav .nav-ass.forte::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);animation:assBrilho 4s ease-in-out 1s infinite;pointer-events:none}
  .nav .nav-ass.mal{background:var(--bad-soft);border-color:rgba(155,44,44,.3)}
  .nav .nav-ass.mal .nav-ass-tx strong,.nav .nav-ass.mal .nav-ass-tx small{color:var(--bad)}
  .nav .nav-ass.on{outline:2px solid var(--gold);outline-offset:1px}
}
@media (prefers-reduced-motion:reduce){.nav .nav-ass.forte::after{display:none}}
/* clique no convite do menu: o mesmo brilho suave dos planos */
@media (min-width:900px){
  .nav .nav-ass .nav-ass-luz{display:none}
  .nav .nav-ass.clicou::before{content:"";position:absolute;top:-20%;left:-90%;width:70%;height:140%;background:linear-gradient(100deg,rgba(255,240,205,0) 0%,rgba(255,240,205,.25) 35%,rgba(255,246,222,.6) 50%,rgba(255,240,205,.25) 65%,rgba(255,240,205,0) 100%);transform:skewX(-14deg);filter:blur(5px);animation:assLuz .9s cubic-bezier(.45,.05,.25,1) both;pointer-events:none;z-index:1}
  .nav .nav-ass.clicou{animation:assEscolha .9s cubic-bezier(.25,.8,.25,1);transform:scale(.985)}
  .nav .nav-ass.clicou .nav-ass-ic{transform:scale(1.1) rotate(-6deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
}