/* Trilion Signature — botão flutuante de WhatsApp + cartão de uma pergunta (Nome).
   Discreto: círculo onyx com fio dourado; o rótulo aparece uma vez por visita e some.
   Desktop: cartão creme "amanhece" a partir do botão. <=560px: bottom-sheet. Só transform/opacity/clip-path animam. */

.wf{--onyx:#1A1612;--cream:#F7F2E8;--pearl:#FDFBF6;--ink:#1A1612;--ink2:#5E5546;--bronze:#8B7339;--gold:#C9A84C;--gold-l:#E4D4A0;
  --e-out:cubic-bezier(.16,1,.3,1)}

/* ---------- botão ---------- */
.wf-btn{position:fixed;z-index:40;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;height:54px;min-width:54px;padding:0;border-radius:27px;
  background:rgba(26,22,18,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--gold-l);box-shadow:0 0 0 1px rgba(201,168,76,.42),0 10px 30px -10px rgba(0,0,0,.6);
  font:500 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s var(--e-out),background-color .25s,box-shadow .25s}
.wf.is-in .wf-btn{opacity:1;transform:none}
.wf-btn:hover{background:var(--onyx);box-shadow:0 0 0 1px var(--gold),0 14px 34px -10px rgba(0,0,0,.65)}
.wf-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wf-btn:active{transform:scale(.97)}
.wf-ico{flex:none;display:grid;place-items:center;width:54px;height:54px}
.wf-ico svg{width:24px;height:24px;fill:currentColor}
.wf-lab{display:block;overflow:hidden;max-width:0;opacity:0;white-space:nowrap;padding-left:0;transition:max-width .6s var(--e-out),opacity .4s,padding .6s var(--e-out)}
.wf.is-hint .wf-lab,.wf-btn:hover .wf-lab,.wf-btn:focus-visible .wf-lab{max-width:200px;opacity:1;padding-left:22px}
/* o rótulo vem antes do ícone: o botão cresce para a esquerda */
.wf-btn{flex-direction:row-reverse}
.wf-lab{padding-right:0}
.wf.is-hint .wf-lab,.wf-btn:hover .wf-lab,.wf-btn:focus-visible .wf-lab{padding-left:0;padding-right:0;margin-left:22px}
/* um único pulso dourado ao entrar (não repete) */
.wf-btn:before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(201,168,76,.5);pointer-events:none}
.wf.is-in .wf-btn:before{animation:wf-pulse 1.8s .9s ease-out 1 both}
@keyframes wf-pulse{0%{box-shadow:0 0 0 0 rgba(201,168,76,.5)}100%{box-shadow:0 0 0 18px rgba(201,168,76,0)}}

/* ---------- cartão ---------- */
.wf-dlg{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;
  color:var(--ink);overflow:hidden;overflow:clip;overscroll-behavior:contain;font-family:var(--body);color-scheme:light}
.wf-dlg:not([open]){display:none}
.wf-dlg::backdrop{background:transparent}
.wf-scrim{position:absolute;inset:0;background:rgba(16,13,10,.42)}
.wf-ring{display:none;position:absolute;background:var(--gold);border-radius:6px;pointer-events:none}
.wf-card{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:calc(max(20px,env(safe-area-inset-bottom)) + 70px);
  width:min(384px,calc(100% - 32px));padding:34px 30px 28px;background:var(--cream);border-radius:6px;overflow:hidden;overflow:clip;
  box-shadow:0 0 0 1px rgba(26,22,18,.06),0 24px 48px -12px rgba(16,13,10,.38),0 60px 120px -30px rgba(16,13,10,.45)}
.wf-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink2);display:grid;place-items:center;padding:0;cursor:pointer;transition:background-color .2s,color .2s}
.wf-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.wf-x:hover{background:rgba(26,22,18,.07);color:var(--ink)}
.wf-x:focus-visible,.wf-card a:focus-visible,.wf-card .btn:focus-visible,.wf-card input:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.wf-card .kicker{display:block;color:var(--bronze)}
.wf-card h2{font-family:var(--disp);font-weight:300;font-size:30px;line-height:1.1;margin:12px 0 12px;color:var(--ink);outline:none;padding-right:34px}
.wf-card h2 em{font-style:italic;color:var(--bronze)}
.wf-card p.ap{margin:0 0 22px;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.wf-card label{display:grid;gap:6px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.wf-card input{font:300 17px/1.5 var(--body);letter-spacing:0;text-transform:none;color:var(--ink);background:transparent;border:0;border-bottom:1px solid #CDBF9C;border-radius:0;padding:9px 0;width:100%;box-sizing:border-box}
.wf-card input::placeholder{color:#9A8F7B}
.wf-card input:focus-visible{outline:none;border-bottom-color:var(--bronze);box-shadow:0 1px 0 var(--bronze)}
.wf-card input[aria-invalid="true"]{border-bottom-color:#A4503A;box-shadow:0 1px 0 #A4503A}
.wf-err{min-height:1.4em;margin:8px 0 14px;font-size:13px;color:#A4503A}
.wf-card .btn{width:100%;justify-content:center;margin-top:2px}
.wf-note{margin:14px 0 0;font-size:12px;color:#7A705F;text-align:center}
.wf-ok[hidden]{display:none}
.wf-ok{outline:none}
.wf-ok .btn{margin-top:4px}

@media (max-width:560px){
  /* no topo (a 100px da borda): o teclado do celular não cobre o formulário e o logo continua à vista */
  .wf-card{inset:100px 12px auto 12px;width:auto;border-radius:16px;padding:30px 22px 26px;box-shadow:0 24px 60px -16px rgba(16,13,10,.55)}
  .wf-card h2{font-size:28px}
  .wf-btn{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .wf-btn,.wf-lab,.wf-x{transition:none}
  .wf.is-in .wf-btn:before{animation:none}
  .wf-btn{transform:none}
}
@media (forced-colors:active){
  .wf-btn{border:1px solid ButtonText;background:ButtonFace;color:ButtonText;box-shadow:none}
  .wf-card{border:1px solid CanvasText}
}
@media print{.wf{display:none}}