/* =====================================================================
   FORMULÁRIO DE LEAD · um componente para o site inteiro
   <form class="lf" data-lead="demo|consultor|material|vendor" data-origem="plataforma"></form>
   O JS (form-lead.js) monta os campos. Aqui só o visual, sobre os tokens de deyel.css.
   Funciona em fundo escuro (.fecho, .s-dark, .s-deep, .phero) e claro (.s-paper, .s-mist).
   ===================================================================== */
.lf{--lf-bg:rgba(255,255,255,.04);--lf-b:rgba(255,255,255,.11);--lf-in:rgba(255,255,255,.055);--lf-inb:rgba(255,255,255,.16);
 --lf-tx:#fff;--lf-lb:#AEB6C4;--lf-dim:#8A92A0;--lf-ph:#6B7383;
 position:relative;display:block;margin:0;padding:clamp(22px,2.6vw,32px);border-radius:18px;
 background:var(--lf-bg);border:1px solid var(--lf-b);color:var(--lf-tx);
 box-shadow:0 40px 90px -50px rgba(0,0,0,.7)}
.s-paper .lf,.s-mist .lf,.lf.claro{--lf-bg:#fff;--lf-b:rgba(11,25,45,.11);--lf-in:#fff;--lf-inb:rgba(11,25,45,.16);
 --lf-tx:var(--text);--lf-lb:#3B4759;--lf-dim:var(--dim);--lf-ph:#8E97A6;
 box-shadow:0 30px 70px -44px rgba(14,27,51,.35)}
.lf *{box-sizing:border-box}
.lf-h{margin-bottom:20px}
.lf-h h3{font-family:var(--disp);font-weight:500;font-size:clamp(20px,2vw,24px);letter-spacing:-.012em;line-height:1.15;color:var(--lf-tx);margin:0}
.lf-h p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--lf-dim);text-wrap:pretty}

/* progresso: dois traços e o rótulo do passo */
.lf-passos{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lf-dim)}
.lf-passos i{flex:1;height:2px;border-radius:2px;background:var(--lf-inb);position:relative;overflow:hidden}
.lf-passos i:after{content:"";position:absolute;inset:0;background:var(--accent-hi,#7FA5FF);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e,ease)}
.lf-passos i.on:after{transform:scaleX(1)}
.s-paper .lf .lf-passos i:after,.s-mist .lf .lf-passos i:after,.lf.claro .lf-passos i:after{background:var(--accent)}

/* painéis (passos) */
.lf-p{display:none}
.lf-p.on{display:block;animation:lf-entra .4s var(--e,ease)}
@keyframes lf-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lf-p.on{animation:none}}

/* grade de campos */
.lf-g{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lf-g .full{grid-column:1/-1}
@media(max-width:520px){.lf-g{grid-template-columns:1fr}.lf-g .full{grid-column:auto}}
.lf-f{display:block;position:relative;min-width:0}
.lf-f>span{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--lf-lb);margin-bottom:6px}
.lf-f>span small{font-weight:400;color:var(--lf-dim);margin-left:4px}
.lf-f input,.lf-f select,.lf-f textarea{width:100%;font:inherit;font-size:14.5px;color:var(--lf-tx);
 background:var(--lf-in);border:1px solid var(--lf-inb);border-radius:10px;padding:12px 13px;
 transition:border-color .2s,background .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
.lf-f input::placeholder,.lf-f textarea::placeholder{color:var(--lf-ph)}
.lf-f input:focus,.lf-f select:focus,.lf-f textarea:focus{outline:0;border-color:var(--accent-hi,#7FA5FF);box-shadow:0 0 0 3px rgba(47,107,255,.22)}
.lf-f textarea{min-height:82px;resize:vertical;line-height:1.5}
.lf-f select{padding-right:38px;cursor:pointer;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A92A0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 13px center;background-size:14px}
.lf-f select option{color:#0E1B33;background:#fff}
.lf-f select:invalid,.lf-f select.vazio{color:var(--lf-ph)}
.lf-f .err{display:none;font-style:normal;font-size:12px;color:var(--bad-hi,#FF8593);margin-top:6px;line-height:1.4}
.s-paper .lf .err,.s-mist .lf .err,.lf.claro .err{color:var(--bad-lo,#A8182F)}
.lf-f.bad input,.lf-f.bad select,.lf-f.bad textarea{border-color:var(--bad-hi,#FF8593);box-shadow:0 0 0 3px rgba(212,35,64,.16)}
.lf-f.bad .err{display:block}

/* consentimento */
.lf-ck{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--lf-dim);cursor:pointer}
.lf-ck input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.lf-ck a{color:var(--lf-tx);text-decoration:underline;text-underline-offset:2px}
.lf-ck.bad{color:var(--bad-hi,#FF8593)}
.s-paper .lf .lf-ck.bad,.s-mist .lf .lf-ck.bad,.lf.claro .lf-ck.bad{color:var(--bad-lo,#A8182F)}

/* ações */
.lf-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.lf-act .cta{flex:1 1 auto;justify-content:center;min-height:48px}
.lf-act .cta[disabled]{opacity:.65;cursor:progress}
.lf-volta{appearance:none;background:none;border:0;padding:8px 2px;font:inherit;font-size:13.5px;color:var(--lf-dim);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lf-volta:hover{color:var(--lf-tx)}
.lf-nota{margin-top:14px;font-size:12px;color:var(--lf-dim);line-height:1.5}
.lf-nota b{color:var(--lf-lb);font-weight:600}

/* estado de envio e erro */
.lf-st{display:none;margin-top:14px;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.5}
.lf-st.on{display:block}
.lf-st.bad{background:rgba(212,35,64,.12);border:1px solid rgba(255,133,147,.35);color:#FFC2C9}
.s-paper .lf .lf-st.bad,.s-mist .lf .lf-st.bad,.lf.claro .lf-st.bad{background:rgba(212,35,64,.06);color:var(--bad-lo)}
.lf-st a{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600}
.lf-ok{text-align:center;padding:18px 6px}
.lf-ok .ic{width:50px;height:50px;border-radius:15px;margin:0 auto 16px;display:grid;place-items:center;background:rgba(18,166,106,.16);color:var(--ok-hi,#3ad19a)}
.lf-ok .ic svg{width:24px;height:24px}
.lf-ok b{display:block;font-family:var(--disp);font-weight:500;font-size:21px;color:var(--lf-tx)}
.lf-ok p{margin:8px 0 0;font-size:14px;color:var(--lf-dim);line-height:1.55}

/* honeypot: fora da tela, sem display:none (alguns bots respeitam display:none) */
.lf-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* compacto (variante material): uma linha em tela larga */
.lf.lf-c{padding:clamp(18px,2vw,24px);box-shadow:none}
.lf.lf-c .lf-h{margin-bottom:14px}
.lf.lf-c .lf-h h3{font-size:18px}
.lf.lf-c .lf-g{grid-template-columns:1.1fr 1.3fr 1fr 1fr}
.lf.lf-c .lf-act{margin-top:12px}
.lf.lf-c .lf-act .cta{flex:0 0 auto}
@media(max-width:980px){.lf.lf-c .lf-g{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.lf.lf-c .lf-g{grid-template-columns:1fr}}

/* ===== o fecho das páginas com formulário =====
   a coluna da esquerda mantém título e texto; os dois caminhos antigos (demo
   interativa e WhatsApp) viram uma linha de links pequenos embaixo do texto */
.fecho-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px}
.fecho-links a{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:#C9CFD9;
 padding:4px 0;border-bottom:1px solid rgba(255,255,255,.18);transition:color .2s,border-color .2s}
.fecho-links a:hover{color:#fff;border-color:var(--accent-hi,#7FA5FF)}
.fecho-links a svg{width:14px;height:14px;color:var(--accent-hi,#7FA5FF)}
.fecho-in>.lf{align-self:center}
@media(min-width:941px){.fecho-in{align-items:start}.fecho-in>div:first-child{padding-top:10px}}