/* ===== reset de transicao mockup -> app (spec 4) — bloco unico, topo ===== */
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;font-family:inherit}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
[hidden]{display:none!important}
svg{width:18px;height:18px;flex:none}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#060913; --bg2:#0a1020; --card:rgba(255,255,255,.045); --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16); --tx:#eaf2ef; --tx2:#9fb3ad; --tx3:#6b7f7a;
  --em:#2563eb; --em2:#60a5fa; --em3:#1d4ed8; --am:#f0b429; --vi:#a855f7; --gold:#f0b429; --gold2:#fcd34d;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--tx);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-weight:700;letter-spacing:-.035em;line-height:1.08}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
[x-cloak]{display:none!important}
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.grid-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%);opacity:.6}

.view > header{position:sticky;top:0;z-index:50;background:rgba(7,10,9,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;letter-spacing:-.03em}
.mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(150deg,var(--em2),var(--em3));display:grid;place-items:center;box-shadow:0 0 24px -4px rgba(37,99,235,.7)}
.mark svg{width:18px;height:18px;stroke:#050b18;stroke-width:2.2}
.navlinks{display:none;gap:28px;font-size:14px;color:var(--tx2)}
.navlinks a:hover{color:var(--tx)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-weight:600;font-size:15px;padding:13px 20px;transition:.2s}
.btn svg{width:16px;height:16px;stroke-width:2.2}
.btn-p{background:linear-gradient(180deg,var(--em2),var(--em3));color:#050b18;box-shadow:0 10px 30px -10px rgba(37,99,235,.8)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 16px 40px -12px rgba(37,99,235,.9)}
.btn-g{border:1px solid var(--line2);background:var(--card);color:var(--tx)}
.btn-g:hover{background:rgba(255,255,255,.09)}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:10px}
.burger{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--line2);background:var(--card)}
.burger svg{width:20px;height:20px;stroke:var(--tx);stroke-width:1.8}
.sheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.sheet-in{position:absolute;left:12px;right:12px;top:12px;border-radius:20px;background:#0d1413;border:1px solid var(--line2);padding:16px;display:grid;gap:2px}
.sheet-in a{padding:14px 8px;border-bottom:1px solid var(--line);font-size:16px}

.hero{position:relative;padding:64px 0 40px;text-align:center;overflow:hidden}
.hero .glow{width:620px;height:420px;background:rgba(37,99,235,.22);top:-160px;left:50%;transform:translateX(-50%)}
.tagline{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line2);background:var(--card);border-radius:999px;padding:6px 14px 6px 6px;font-size:12.5px;color:var(--tx2)}
.tagline b{background:rgba(37,99,235,.14);color:var(--em2);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700;letter-spacing:.04em}
.hero h1{font-size:clamp(36px,9.5vw,66px);margin:24px auto 0;max-width:14ch}
.hero h1 span{background:linear-gradient(100deg,var(--em2),var(--gold2) 52%,var(--em2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin:20px auto 0;color:var(--tx2);font-size:clamp(15.5px,4.1vw,18.5px);max-width:44ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.microcta{margin-top:14px;font-size:12.5px;color:var(--tx3)}

/* dashboard */
.dash{position:relative;border:1px solid var(--line2);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  backdrop-filter:blur(20px);padding:14px;box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.09) inset;text-align:left}
.live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--em2);background:rgba(37,99,235,.12);border-radius:999px;padding:4px 10px;font-weight:600}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--gold2);box-shadow:0 0 0 0 rgba(96,165,250,.7);animation:p 1.8s infinite}
@keyframes p{70%{box-shadow:0 0 0 8px rgba(96,165,250,0)}100%{box-shadow:0 0 0 0 rgba(96,165,250,0)}}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpi{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:14px}
.kpi small{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.kpi b{display:block;font-size:23px;letter-spacing:-.03em;margin-top:6px}
.kpi u{text-decoration:none;font-size:11.5px;color:var(--em2);display:inline-flex;gap:4px;align-items:center;margin-top:2px}
.chart{margin-top:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:16px}

.logos{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-top:56px;background:var(--bg2)}
.logos .wrap{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;align-items:center;font-size:12.5px;color:var(--tx3);font-weight:600;letter-spacing:.04em}
.logos b{color:var(--tx2);display:inline-flex;align-items:center;gap:7px}
.logos svg{width:15px;height:15px;stroke:var(--em);stroke-width:2}

.view > section{padding:66px 0;position:relative}
.sh{max-width:40ch}
.sh span{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--em2)}
.sh h2{font-size:clamp(28px,7vw,42px);margin:12px 0 12px}
.sh p{color:var(--tx2);font-size:16px}

.bento{display:grid;gap:12px;margin-top:36px}
.b{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid var(--line);border-radius:20px;padding:24px;position:relative;overflow:hidden;transition:.25s}
.b:hover{border-color:var(--line2);transform:translateY(-2px)}
.b i.ico{width:42px;height:42px;border-radius:13px;background:rgba(37,99,235,.13);border:1px solid rgba(37,99,235,.28);display:grid;place-items:center;margin-bottom:16px}
.b i.ico svg{width:21px;height:21px;stroke:var(--em2);stroke-width:1.8}
.b.v i.ico{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.3)}
.b.v i.ico svg{stroke:#a78bfa}
.b.a i.ico{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.3)}
.b.a i.ico svg{stroke:var(--am)}
.b h3{font-size:19px;margin-bottom:8px}
.b p{color:var(--tx2);font-size:14.5px}

/* steps horizontal */
.rail{display:grid;gap:0;margin-top:34px;border-left:1px solid var(--line)}
.rl{position:relative;padding:0 0 30px 26px}
.rl:last-child{padding-bottom:0}
.rl::before{content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--em);box-shadow:0 0 0 4px rgba(37,99,235,.16)}
.rl small{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.rl h3{font-size:18px;margin:6px 0 5px}
.rl p{font-size:14.5px;color:var(--tx2)}

/* simulador */

/* comparativo */

/* pricing */
.plans{display:grid;gap:14px;margin-top:36px}
.plan{border:1px solid var(--line);border-radius:22px;padding:26px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));position:relative}
.plan.hi{border-color:rgba(37,99,235,.5);box-shadow:0 30px 70px -40px rgba(37,99,235,.7)}
.plan .tag{position:absolute;top:-11px;left:26px;background:linear-gradient(180deg,var(--em2),var(--em3));color:#050b18;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:99px}
.plan h3{font-size:17px}
.plan .price{font-size:40px;letter-spacing:-.04em;margin:10px 0 2px;font-weight:700}
.plan .price small{font-size:14px;color:var(--tx3);font-weight:500}
.plan .desc{font-size:13px;color:var(--tx3);margin-bottom:18px}
.pl{display:flex;gap:10px;font-size:14px;color:var(--tx2);padding:7px 0}
.pl svg{width:17px;height:17px;stroke:var(--em2);stroke-width:2.6;flex:none;margin-top:3px}
.plan .btn{width:100%;margin-top:18px}

.faq{margin-top:34px}
.q{border-bottom:1px solid var(--line)}
.q .h{width:100%;display:flex;justify-content:space-between;gap:14px;align-items:center;text-align:left;padding:19px 0;font-weight:600;font-size:15.5px}
.q .h svg{width:19px;height:19px;stroke:var(--em2);stroke-width:2.2;flex:none;transition:.25s}
.q p{color:var(--tx2);font-size:14.5px;padding-bottom:19px;max-width:60ch}

.final{position:relative;overflow:hidden;text-align:center;padding:74px 0;border-top:1px solid var(--line)}
.final .glow{width:560px;height:360px;background:rgba(37,99,235,.2);bottom:-180px;left:50%;transform:translateX(-50%)}
.final h2{font-size:clamp(30px,7.5vw,48px);max-width:16ch;margin:0 auto}
.final p{color:var(--tx2);max-width:44ch;margin:16px auto 0}
.view > footer{border-top:1px solid var(--line);padding:34px 0;color:var(--tx3);font-size:13px}
.fg{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
.fg .zap{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--tx);text-decoration:none}
.fg .zap svg{width:17px;height:17px;stroke:#16a34a;stroke-width:1.8;flex:none}
.fg .zap small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3)}
.fg .zap b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em}
.fg .zap:hover{border-color:#16a34a}

@media(min-width:780px){
  .navlinks{display:flex}.burger{display:none}
  .hero{padding:96px 0 40px}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .bento{grid-template-columns:repeat(3,1fr)}
  .bento .b:nth-child(1){grid-column:span 2}
  .bento .b:nth-child(6){grid-column:span 2}
  .plans{grid-template-columns:repeat(3,1fr);align-items:start}
  .two{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}
  .view > section{padding:96px 0}
}
.nsa{position:absolute;color:var(--gold);pointer-events:none}
.hero .nsa{width:300px;height:450px;top:-30px;left:50%;transform:translateX(-50%);opacity:.13;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.final .nsa{width:230px;height:345px;left:50%;top:-40px;transform:translateX(-50%);opacity:.11;
  -webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.marian{display:inline-flex;align-items:center;gap:9px;color:var(--gold2);font-size:12.5px;font-weight:600;
  border:1px solid rgba(240,180,41,.3);background:rgba(240,180,41,.08);border-radius:999px;padding:6px 14px;margin-bottom:18px}
.marian svg{width:15px;height:15px;stroke:var(--gold2);stroke-width:2}
@media(min-width:780px){.hero .nsa{width:420px;height:630px;top:-70px;opacity:.11}}
.check{margin:32px auto 0;max-width:560px;text-align:left}
.check .cl-lab{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);margin-bottom:11px;display:block}
.cbox{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:16px;padding:6px 6px 6px 15px;transition:.2s}
.cbox:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(240,180,41,.14)}
.cbox .pre{font-size:16px;font-weight:700;color:var(--tx2);white-space:nowrap;letter-spacing:-.02em}
.cbox input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--tx);font-size:16px;font-weight:700;letter-spacing:-.02em;padding:12px 0}
.cbox input::placeholder{color:var(--tx3);font-weight:500}
.cbox .btn{flex:none}
.cres{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:13.5px;font-weight:600;min-height:22px}
.cres svg{width:17px;height:17px;stroke-width:2.6;flex:none}
.cres.ok{color:#4ade80}.cres.ok svg{stroke:#4ade80}
.cres.no{color:#fb7185}.cres.no svg{stroke:#fb7185}
.cres.wait{color:var(--tx3)}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:var(--gold2);animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.cres small{color:var(--tx3);font-weight:500}
.flowbox{margin-top:46px;border:1px solid var(--line2);border-radius:24px;text-align:left;padding:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));backdrop-filter:blur(20px);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.09) inset}
.fsteps{display:flex;gap:7px;margin-bottom:14px}
.fstep{flex:1;text-align:left}
.fstep .track{display:block;height:3px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden;margin-bottom:8px}
.fstep .fill{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--em2),var(--gold2))}
.fstep.done .fill{width:100%;opacity:.55}
.fstep.now .fill{animation:fl 3.4s linear forwards}
@keyframes fl{from{width:0}to{width:100%}}
.fstep b{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);display:none}
.fstep.now b{display:block;color:var(--gold2)}
.fstage{position:relative;min-height:326px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.7)}70%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
.cartaz{width:210px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid var(--line2);
  border-radius:18px;padding:16px;text-align:center;animation:rise .5s ease both}
.cartaz small{font-size:9.5px;letter-spacing:.16em;color:var(--gold2);font-weight:800}
.qrbox{position:relative;margin:12px auto 10px;width:132px;height:132px;border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:#0b1120;padding:6px}
.qrbox svg{width:100%;height:100%;display:block}
@keyframes scan{from{top:-8%}to{top:82%}}
.cartaz b{font-size:12px;color:var(--em2);letter-spacing:-.01em}
.mini{width:236px;background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:22px;padding:14px;animation:rise .45s ease both}
.mbar{display:flex;justify-content:space-between;font-size:10px;color:var(--tx3);font-weight:700;margin-bottom:12px}
.mfld{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-bottom:8px;animation:rise .45s ease both;opacity:0}
.mfld span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--tx3);font-weight:800}
.mfld b{font-size:13.5px;font-weight:600}
.mbtn{margin-top:10px;text-align:center;border-radius:12px;padding:11px;font-size:13.5px;font-weight:700;color:#050b18;
  background:linear-gradient(180deg,var(--em2),var(--em3));animation:rise .45s ease both;opacity:0}
.wa{width:268px;animation:rise .4s ease both}
.wa .bub{background:rgba(255,255,255,.94);color:#0b1120;border-radius:14px 14px 14px 4px;padding:12px 14px;font-size:12.5px;
  white-space:pre-line;margin-bottom:10px;max-width:92%;animation:rise .5s ease both;opacity:0;line-height:1.5}
.wa .bub.me{background:#bbf7d0;margin-left:auto;border-radius:14px 14px 4px 14px;max-width:78%}
.pixok{text-align:center;animation:rise .4s ease both}
.pixok .ring{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;
  background:rgba(240,180,41,.12);border:1px solid rgba(240,180,41,.4);animation:pop .6s cubic-bezier(.2,1.4,.4,1) both;
  box-shadow:0 0 60px -10px rgba(240,180,41,.6)}
.pixok .ring svg{width:40px;height:40px;stroke:var(--gold2);stroke-width:2.6}
.pixok b{display:block;font-size:21px;letter-spacing:-.03em}
.pixok small{display:block;font-size:13px;color:var(--tx2);margin-top:5px}
.pixok .conta{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:700;color:var(--em2);
  background:rgba(37,99,235,.16);border:1px solid rgba(37,99,235,.35);border-radius:999px;padding:5px 12px}
.pan{width:100%;max-width:400px;border:1px solid var(--line2);border-radius:16px;overflow:hidden;background:rgba(0,0,0,.4);animation:rise .45s ease both}
.pbar{display:flex;align-items:center;gap:5px;padding:9px 12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.04)}
.pbar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.pbar span{margin-left:8px;font-size:10.5px;color:var(--tx3);font-weight:700;letter-spacing:.06em}
.pbody{display:flex}
.pside{width:52px;border-right:1px solid var(--line);padding:12px 10px;display:grid;gap:9px;align-content:start}
.pside span{height:7px;border-radius:99px;background:rgba(255,255,255,.14)}
.pside span.on{background:var(--gold2)}
.plist{flex:1;padding:6px 12px 12px}
.prow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);animation:rise .5s ease both;opacity:0}
.prow:last-child{border-bottom:0}
.prow em{width:8px;height:8px;border-radius:50%;flex:none;font-style:normal}
.prow em.ok{background:#4ade80}.prow em.go{background:var(--gold2)}.prow em.wt{background:var(--em2)}
.prow b{font-size:13px;display:block;font-weight:600}
.prow small{font-size:11px;color:var(--tx3)}
.prow u{text-decoration:none;margin-left:auto;font-size:13px;font-weight:700;color:var(--gold2)}
.fcap{display:flex;gap:12px;align-items:flex-start;padding:16px 6px 4px}
.fnum{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--gold2);background:rgba(240,180,41,.12);
  border:1px solid rgba(240,180,41,.3);border-radius:8px;padding:4px 8px;flex:none}
.fcap b{font-size:15.5px;letter-spacing:-.02em}
.fcap p{font-size:13.5px;color:var(--tx2)}
@media(min-width:780px){.fstep b{display:block}.fstage{min-height:360px}}

/* ======================= TEMA CLARO (áreas internas) ======================= */
body.lt{
  --bg:#f3f5fa; --card:#fff; --soft:#f7f8fc;
  --tx:#0f172a; --tx2:#475569; --tx3:#94a3b8;
  --line:#eaecf3; --line2:#dde1ea;
  --em:#2563eb; --em2:#1d4ed8; --em3:#1e40af;
  --gold:#b45309; --gold2:#a16207; --goldbg:#fef6e0;
  --sh:0 1px 2px rgba(16,24,40,.05);
  --sh2:0 18px 40px -26px rgba(16,24,40,.4);
  background:var(--bg); color:var(--tx);
}
body.lt .btn-p{background:linear-gradient(180deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 10px 22px -12px rgba(37,99,235,.75)}
body.lt .btn-g{background:var(--card);border:1px solid var(--line2);color:var(--tx);box-shadow:var(--sh)}
body.lt .btn-g:hover{background:var(--soft);border-color:#c9cfdd}
body.lt .glow,body.lt .grid-bg{display:none}
body.lt .brand{color:var(--tx)}
body.lt .brand .mark{background:linear-gradient(150deg,#2563eb,#1d4ed8)}
body.lt .brand .mark svg{stroke:#fff}

/* ======================= DEMO BAR ======================= */

/* ======================= JOIN (adesão pública) ======================= */
.join_top{border-bottom:1px solid var(--line);background:var(--card)}
.join_top .in{max-width:520px;margin:0 auto;padding:18px 20px;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:9px}
.join_top .cross{width:56px;height:56px;border-radius:50%;background:var(--goldbg);border:1px solid #f2dfae;display:grid;place-items:center;flex:none}
.join_top .cross svg{width:26px;height:26px;stroke:var(--gold);stroke-width:2}
.join_top .mark{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sh)}
.join_top b{font-size:15px;display:block;letter-spacing:-.02em}
.join_top small{font-size:11.5px;color:var(--tx3)}
@media (min-width:640px){.join_top .cross,.join_top .mark{width:64px;height:64px}
  .join_top .cross svg{width:30px;height:30px}.join_top b{font-size:16.5px}}
.join{max-width:520px;margin:0 auto;padding:26px 20px 130px}
.join_bar{display:flex;gap:6px;margin-bottom:26px}
.join_bar i{height:4px;flex:1;border-radius:99px;background:#e3e7f0;transition:.35s}
.join_bar i.on{background:linear-gradient(90deg,#2563eb,#d99a15)}
.join h2{font-size:clamp(26px,7vw,34px);letter-spacing:-.04em;margin-bottom:8px;color:var(--tx)}
.join .sub{color:var(--tx2);font-size:15px;margin-bottom:24px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);margin-bottom:7px}
.fld input,.fld select{width:100%;background:var(--card);border:1px solid var(--line2);border-radius:14px;
  padding:14px 15px;color:var(--tx);font-size:15.5px;outline:0;transition:.2s;box-shadow:var(--sh)}
.fld input:focus,.fld select:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.fld input::placeholder{color:#b8c0cf}
.fld .hint{font-size:12px;color:var(--tx3);margin-top:6px}
.two_col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border:1px solid var(--line2);background:var(--card);
  border-radius:16px;padding:15px;margin-bottom:11px;transition:.2s;box-shadow:var(--sh)}
.pick.on,.pick:has(input:checked){border-color:#2563eb;background:#f4f8ff;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.pick i{width:40px;height:40px;border-radius:12px;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.pick i svg{width:19px;height:19px;stroke:var(--em);stroke-width:1.9}
.pick b{display:block;font-size:15px}
.pick small{font-size:12.5px;color:var(--tx3)}
.pick .tick{margin-left:auto;width:20px;height:20px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;flex:none}
.pick.on .tick,.pick:has(input:checked) .tick{background:#2563eb;border-color:#2563eb}
.pick .tick svg{width:12px;height:12px;stroke:#fff;stroke-width:3.4;opacity:0}
.pick.on .tick svg,.pick:has(input:checked) .tick svg{opacity:1}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.chips button,.chips label,.chips a{border:1px solid var(--line2);background:var(--card);border-radius:14px;padding:15px 4px;font-size:16px;font-weight:700;box-shadow:var(--sh)}
.chips button.on,.chips label:has(input:checked),.chips a.on{background:linear-gradient(180deg,#2563eb,#1d4ed8);color:#fff;border-color:#1d4ed8}
.join_foot{position:fixed;left:0;right:0;bottom:0;padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(243,245,250,0),var(--bg) 34%);z-index:20}
.join_foot .in{max-width:520px;margin:0 auto;display:flex;gap:10px}
.join_foot .btn{flex:1}
.blessed{text-align:center;padding:30px 0 10px}
.blessed .ring{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;
  background:var(--goldbg);border:1px solid #eddcae;box-shadow:0 20px 40px -22px rgba(180,83,9,.5);animation:pop .6s cubic-bezier(.2,1.4,.4,1) both}
.blessed .ring svg{width:44px;height:44px;stroke:var(--gold);stroke-width:2.4}
.resume{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:6px 16px;margin:22px 0;text-align:left;box-shadow:var(--sh)}
.resume div{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid var(--line);font-size:14.5px}
.resume div:first-child{border-top:0}
.resume span{color:var(--tx3)}
.resume b{font-weight:700}

/* ======================= AUTH ======================= */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:36px 20px 120px;position:relative;
  background:radial-gradient(60% 45% at 50% 0%,#e8effc 0%,transparent 70%)}
.auth_card{width:100%;max-width:420px;position:relative;z-index:2}
.auth_card .brand{justify-content:center;margin-bottom:26px}
.auth_card h2{font-size:27px;letter-spacing:-.04em;text-align:center}
.auth_card .sub{color:var(--tx2);font-size:14.5px;text-align:center;margin:8px 0 26px}
.auth_box{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 30px 60px -34px rgba(16,24,40,.4)}
.auth_hi{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);background:var(--goldbg);border:1px solid #f0e0b6;border-radius:999px;padding:6px 12px;margin-bottom:16px}
.auth_hi svg{width:14px;height:14px;stroke:var(--gold);stroke-width:2.4}
.auth_alt{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--tx3);font-size:12px}
.auth_alt::before,.auth_alt::after{content:"";flex:1;height:1px;background:var(--line)}
.auth_way{display:flex;align-items:center;gap:11px;width:100%;border:1px solid var(--line2);background:var(--card);
  border-radius:14px;padding:13px 15px;margin-bottom:9px;text-align:left;transition:.2s}
.auth_way:hover{background:var(--soft);border-color:#c9cfdd}
.auth_way svg{width:18px;height:18px;stroke:var(--tx2);stroke-width:1.9;flex:none}
.auth_way b{font-size:14.5px;font-weight:600}
.auth_way small{display:block;font-size:12px;color:var(--tx3)}
.auth_link{display:block;text-align:center;font-size:13.5px;color:var(--em);margin-top:16px;font-weight:600}
.auth_sent{text-align:center;padding:8px 0}
.auth_sent .ring{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;
  background:#eaf1ff;border:1px solid #cfdefb;animation:pop .6s cubic-bezier(.2,1.4,.4,1) both}
.auth_sent .ring svg{width:34px;height:34px;stroke:var(--em);stroke-width:2}

/* ======================= APP (dizimista) ======================= */
.app_top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.app_top .in{max-width:560px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:12px}
.app_top .av{width:38px;height:38px;border-radius:13px;background:linear-gradient(150deg,#2563eb,#1d4ed8);display:grid;place-items:center;
  font-weight:800;font-size:14px;color:#fff;flex:none}
.app_top b{font-size:15px;display:block;letter-spacing:-.02em}
.app_top small{font-size:12px;color:var(--tx3)}
.app_shell{max-width:560px;margin:0 auto;padding:20px 18px 120px}
.app_hero{background:linear-gradient(150deg,#eaf1ff,#fdf6e6);border:1px solid #dbe4f7;border-radius:24px;padding:22px;box-shadow:var(--sh2)}
.app_hero small{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.app_hero .val{font-size:40px;font-weight:800;letter-spacing:-.05em;margin:8px 0 2px}
.app_hero .val span{font-size:16px;color:var(--tx2);font-weight:600;letter-spacing:0}
.app_hero p{font-size:13.5px;color:var(--tx2)}
.app_hero .btn{width:100%;margin-top:18px}
.sec_t{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--tx3);margin:26px 0 12px;display:flex;justify-content:space-between;align-items:center}
.sec_t u{text-decoration:none;color:var(--em);font-size:12px;letter-spacing:0;text-transform:none}
.row_card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh)}
.row{display:flex;align-items:center;gap:13px;padding:14px 16px;border-top:1px solid var(--line);width:100%;text-align:left;flex-wrap:wrap;row-gap:8px;position:relative}
.row:first-child{border-top:0}
.row i.dot{width:9px;height:9px;border-radius:50%;flex:none}
.row .ic{width:38px;height:38px;border-radius:12px;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.row .ic svg{width:18px;height:18px;stroke:var(--em);stroke-width:1.9}
.row b{font-size:14.5px;display:block;font-weight:600}
.row small{font-size:12.5px;color:var(--tx3)}
.row .end{margin-left:auto;text-align:right;display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end;flex:0 1 auto;min-width:0}
.row .end b{font-size:14.5px}
.tagx{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px;display:inline-block}
.tagx.ok{background:#e7f8ee;color:#15803d}
.tagx.wt{background:var(--goldbg);color:var(--gold)}
.tagx.no{background:#feecee;color:#be123c}
.tagx.nt{background:#eef1f6;color:var(--tx2)}
.credit_box{background:linear-gradient(150deg,#fdf6e6,#fff);border:1px solid #f0e2bd;border-radius:20px;padding:18px;box-shadow:var(--sh)}
.credit_box .top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px}
.credit_box b{font-size:30px;font-weight:800;letter-spacing:-.04em;display:block}
.credit_box small{font-size:11.5px;color:var(--tx3);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bar{height:7px;border-radius:99px;background:#e6e9f1;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2563eb,#d99a15)}
.app_nav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.app_nav .in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.app_nav button,.app_nav a{padding:11px 4px 13px;display:grid;justify-items:center;gap:4px;position:relative;color:var(--tx3)}
.app_nav button.on,.app_nav a.on{color:var(--em2)}
.app_nav svg{width:22px;height:22px;stroke-width:1.9}
.app_nav span{font-size:10.5px;font-weight:700}
.app_nav em{position:absolute;top:6px;left:50%;margin-left:6px;min-width:17px;height:17px;border-radius:99px;background:#e11d48;color:#fff;
  font-size:10px;font-weight:800;font-style:normal;display:grid;place-items:center;padding:0 5px;border:2px solid #fff}

/* ======================= BOTTOM SHEET ======================= */
.sheet_bg{position:fixed;inset:0;z-index:80;background:rgba(15,23,42,.4);backdrop-filter:blur(3px)}
.sheet_p{position:fixed;left:0;right:0;bottom:0;z-index:81;background:var(--card);border:1px solid var(--line);border-bottom:0;
  border-radius:26px 26px 0 0;box-shadow:0 -24px 60px -20px rgba(16,24,40,.35);display:flex;flex-direction:column;max-height:94vh;touch-action:none}
.sheet_h{padding:10px 0 6px;display:grid;place-items:center;cursor:grab}
.sheet_h i{width:44px;height:5px;border-radius:99px;background:#dfe3ec;display:block}
.sheet_b{padding:8px 20px calc(24px + env(safe-area-inset-bottom));overflow:auto}
.sheet_b h3{font-size:20px;letter-spacing:-.03em;margin-bottom:4px}
.sheet_b .sub{font-size:13.5px;color:var(--tx3);margin-bottom:18px}
.pix_code{background:var(--soft);border:1px dashed var(--line2);border-radius:14px;padding:13px 15px;font-size:12.5px;
  color:var(--tx2);word-break:break-all;line-height:1.5}
.qr_mini{width:150px;height:150px;margin:0 auto 16px;background:#fff;border:1px solid var(--line2);border-radius:16px;padding:8px}
.qr_mini svg{width:100%;height:100%;display:block}

/* ======================= PAINEL ======================= */
.panel{display:flex;min-height:100vh}
.panel_side{position:fixed;z-index:70;top:0;bottom:0;left:0;width:264px;transform:translateX(-100%);transition:.28s cubic-bezier(.4,0,.2,1);
  background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:auto}
.panel_side.open{transform:none;box-shadow:24px 0 60px -30px rgba(16,24,40,.5)}
.panel.su .panel_side{background:#fffdf5;border-right-color:#f0e3c0}
.side_top{padding:18px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.side_top .mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(150deg,#2563eb,#1d4ed8);display:grid;place-items:center;flex:none}
.panel.su .side_top .mark{background:linear-gradient(150deg,#e0a92a,#b45309)}
.side_top .mark svg{width:17px;height:17px;stroke:#fff;stroke-width:2.2}
.side_top b{font-size:14.5px;display:block;letter-spacing:-.03em}
.side_top small{font-size:11px;color:var(--tx3)}
.side_grp{padding:16px 12px 4px;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3)}
.side_i{display:flex;align-items:center;gap:11px;text-align:left;padding:11px 12px;border-radius:12px;color:var(--tx2);font-size:14px;font-weight:500;margin:1px 6px;width:calc(100% - 12px)}
.side_i svg{width:19px;height:19px;stroke-width:1.8;flex:none;stroke:#9aa3b3}
.side_i:hover{background:var(--soft);color:var(--tx)}
.side_i.on{background:#eaf1ff;color:#1d4ed8;font-weight:600}
.side_i.on svg{stroke:#2563eb}
.panel.su .side_i.on{background:#fdf3d9;color:#92400e}
.panel.su .side_i.on svg{stroke:var(--gold)}
.side_i em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:800;background:#eef1f6;border-radius:99px;padding:2px 7px;color:var(--tx2)}
.plat{margin:14px 6px 6px;border:1px solid #f0e0b6;background:linear-gradient(180deg,#fdf6e5,#fffdf7);border-radius:16px;padding:6px 4px 8px}
.plat .side_grp{color:var(--gold);padding:8px 12px 6px;display:flex;align-items:center;gap:7px}
.plat .side_grp svg{width:13px;height:13px;stroke:var(--gold);stroke-width:2.4}
.plat .side_i svg{stroke:#c99a3e}
.plat .side_i.on{background:#fbe9c4;color:#92400e}
.side_user{margin-top:auto;border-top:1px solid var(--line);padding:14px 16px;display:flex;align-items:center;gap:11px}
.side_user .av{width:34px;height:34px;border-radius:11px;background:#eef1f6;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none;color:var(--tx2)}
.panel.su .side_user .av{background:#fbe9c4;color:#92400e}
.side_user b{font-size:13.5px;display:block}
.side_user small{font-size:11.5px;color:var(--tx3)}
.side_bg{position:fixed;inset:0;z-index:69;background:rgba(15,23,42,.35)}
.panel_main{flex:1;min-width:0;display:flex;flex-direction:column}
.imperso{position:relative;z-index:40;display:flex;align-items:center;gap:11px;padding:11px 16px;flex-wrap:nowrap;line-height:1.35;
  background:linear-gradient(90deg,#fdf0cd,#fdf8ea);border-bottom:1px solid #f0e0b6;font-size:13px;color:#7c4a05}
.imperso svg{width:17px;height:17px;stroke:var(--gold);stroke-width:2;flex:none}
.imperso b{color:#92400e}
.imperso button,.imperso a{margin-left:auto;font-size:12px;font-weight:700;border:1px solid #e3c893;color:#92400e;background:#fff;border-radius:999px;padding:6px 13px;flex:none}
.panel_top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.92);backdrop-filter:blur(16px)}
.panel_top .mb{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;border:1px solid var(--line2);background:var(--card);flex:none}
.panel_top .mb svg{width:19px;height:19px;stroke:var(--tx);stroke-width:1.9}
.panel_top h1{font-size:17px;letter-spacing:-.03em;min-width:0;max-width:none;margin:0;line-height:1.2;overflow-wrap:break-word}
.panel_top .sm{font-size:12px;color:var(--tx3)}
.panel_top .right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none;max-width:100%}
.role_pill{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:999px;
  background:#eaf1ff;color:#1d4ed8;border:1px solid #cfdefb;white-space:nowrap}
.role_pill.gold{background:var(--goldbg);color:#92400e;border-color:#f0e0b6}
.panel_body{padding:20px 16px 120px;flex:1}
.kpi_g{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.kpi_c{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--sh)}
.kpi_c small{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);display:block}
.kpi_c b{font-size:25px;font-weight:800;letter-spacing:-.04em;display:block;margin-top:7px;line-height:1.1;overflow-wrap:break-word}
.kpi_c u{text-decoration:none;font-size:11.5px;color:var(--em);font-weight:600}
.kpi_c u.gold{color:var(--gold)}
.card_x{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;margin-top:14px;box-shadow:var(--sh)}
.card_x .hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card_x .hd b{font-size:15px;letter-spacing:-.02em}
.card_x .hd small{font-size:12px;color:var(--tx3)}
.search{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:11px 14px;margin-bottom:14px;box-shadow:var(--sh)}
.search svg{width:18px;height:18px;stroke:var(--tx3);stroke-width:2;flex:none}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--tx);font-size:14.5px}
.mini_b{font-size:12px;font-weight:700;border:1px solid var(--line2);border-radius:10px;padding:7px 12px;color:var(--tx2);white-space:nowrap;background:var(--card)}
.mini_b:hover{border-color:var(--gold);color:var(--gold)}
.tabs{display:flex;gap:6px;overflow:auto;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs::-webkit-scrollbar{display:none}
.tabs button,.tabs a{font-size:13.5px;font-weight:600;color:var(--tx3);padding:11px 13px;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on,.tabs a.on{color:#1d4ed8;border-bottom-color:#2563eb}
.cfg_i{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:15px 16px;border-top:1px solid var(--line);flex-wrap:wrap;row-gap:9px;position:relative}
.cfg_i:first-child{border-top:0}
.cfg_i .ic{width:40px;height:40px;border-radius:12px;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.cfg_i .ic svg{width:19px;height:19px;stroke:var(--em);stroke-width:1.8}
.cfg_i b{font-size:14.5px;display:block}
.cfg_i small{font-size:12.5px;color:var(--tx3);display:block}
.cfg_i .rt{margin-left:auto;display:flex;align-items:center;gap:11px;flex:none}
.tog{width:44px;height:25px;border-radius:99px;background:#dfe3ec;position:relative;transition:.22s;flex:none;border:1px solid #d3d9e4}
.tog i{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.22s;display:block;box-shadow:0 1px 3px rgba(16,24,40,.3)}
.tog.on{background:linear-gradient(90deg,#1d4ed8,#3b82f6);border-color:transparent}
.tog.on i{left:21px}
.tog.gold.on{background:linear-gradient(90deg,#b45309,#e0a92a)}

/* ======================= DRAWER ======================= */
.dw_bg{position:fixed;inset:0;z-index:90;background:rgba(15,23,42,.4);backdrop-filter:blur(3px)}
.dw{position:fixed;z-index:91;left:0;right:0;bottom:0;height:92vh;background:var(--card);border:1px solid var(--line);border-bottom:0;
  border-radius:26px 26px 0 0;display:flex;flex-direction:column;box-shadow:0 -24px 60px -20px rgba(16,24,40,.35);touch-action:none}
.dw_h{padding:10px 0 4px;display:grid;place-items:center}
.dw_h i{width:44px;height:5px;border-radius:99px;background:#dfe3ec;display:block}
.dw_top{display:flex;align-items:flex-start;gap:13px;padding:12px 20px 16px;border-bottom:1px solid var(--line)}
.dw_top .ic{width:44px;height:44px;border-radius:13px;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.dw_top .ic svg{width:21px;height:21px;stroke:var(--em);stroke-width:1.8}
.dw_top b{font-size:16.5px;letter-spacing:-.02em;display:block}
.dw_top small{font-size:12.5px;color:var(--tx3)}
.dw_x{margin-left:auto;width:34px;height:34px;border-radius:11px;border:1px solid var(--line2);display:grid;place-items:center;flex:none;background:var(--card)}
.dw_x svg{width:17px;height:17px;stroke:var(--tx2);stroke-width:2}
.dw_b{padding:18px 20px calc(28px + env(safe-area-inset-bottom));overflow:auto;flex:1}
.kv{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid var(--line);font-size:14px}
.kv:first-of-type{border-top:0}
.kv span{color:var(--tx3)}
.kv b{font-weight:600;text-align:right;word-break:break-all}
.mask{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.adv{margin-top:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.adv > button,.adv > summary{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 16px;font-size:13.5px;font-weight:600;color:var(--tx2);background:var(--soft)}
.adv > button svg,.adv > summary svg{width:17px;height:17px;stroke:var(--tx3);stroke-width:2.2;transition:.22s}
.adv .in{padding:14px 16px 4px;border-top:1px solid var(--line)}
.dw_acts{display:flex;gap:9px;margin-top:22px;flex-wrap:wrap}
.dw_acts .btn{flex:1;min-width:130px}
.btn-d{border:1px solid #f3cdd4;color:#be123c;background:#fff5f6}
.oauth_step{display:flex;gap:13px;padding:13px 0;border-top:1px solid var(--line)}
.oauth_step:first-child{border-top:0}
.oauth_step em{width:26px;height:26px;border-radius:9px;background:#eaf1ff;border:1px solid #cfdefb;color:#1d4ed8;
  font-style:normal;font-size:12px;font-weight:800;display:grid;place-items:center;flex:none}
.oauth_step b{font-size:14px;display:block}
.oauth_step small{font-size:12.5px;color:var(--tx3)}
.lock{display:flex;align-items:center;gap:11px;background:var(--soft);border:1px dashed var(--line2);border-radius:14px;padding:14px;font-size:13px;color:var(--tx2)}
.lock svg{width:18px;height:18px;stroke:var(--tx3);stroke-width:1.9;flex:none}

@media(min-width:900px){
  .panel_side{transform:none;position:sticky;height:100vh}
  .side_bg{display:none}
  .panel_top .mb{display:none}
  .panel_body{padding:24px 28px 60px}
  .panel_top{padding:16px 28px}
  .imperso{padding:12px 28px}
  .kpi_g{grid-template-columns:repeat(4,1fr)}
  .dw{left:auto;right:0;top:0;bottom:0;width:480px;height:auto;border-radius:0;border-right:0;border-top:0;box-shadow:-24px 0 60px -30px rgba(16,24,40,.45)}
  .dw_h{display:none}
  .sheet_p{left:auto;right:24px;bottom:24px;width:420px;border-radius:24px}
  .app_shell{padding-bottom:40px}
  .app_nav{position:sticky;bottom:0}
}

.tl{position:relative;padding-left:6px}
.tl_i{display:flex;gap:13px;position:relative;padding:0 0 16px 16px;border-left:1px solid var(--line2)}
.tl_i:last-child{border-left-color:transparent;padding-bottom:0}
.tl_i > span{position:absolute;left:-5px;top:4px;width:9px;height:9px;border-radius:50%;background:#2563eb;box-shadow:0 0 0 3px #eaf1ff}
.tl_i b{font-size:14px;display:block;font-weight:600}
.tl_i small{font-size:12px;color:var(--tx3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.evid{display:flex;align-items:center;gap:12px;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:13px 14px}
.evid > span{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.evid > span svg{width:19px;height:19px;stroke:var(--em);stroke-width:1.8}
.evid b{font-size:13.5px;display:block}
.evid small{font-size:12px;color:var(--tx3)}
.evid button,.evid a{margin-left:auto}

/* ===== complementos de transicao (spec 4#3 e 4#7) — depois do verbatim ===== */
.fld textarea{width:100%;background:var(--card);border:1px solid var(--line2);border-radius:14px;
  padding:14px 15px;color:var(--tx);font-size:15.5px;outline:0;transition:.2s;box-shadow:var(--sh);
  min-height:96px;resize:vertical;font-family:inherit}
.fld textarea:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.fld select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
.tog{padding:0;display:block}
.tog input{position:absolute;opacity:0;width:0;height:0}
.pick input,.chips input{position:absolute;opacity:0;width:0;height:0}
.pick{cursor:pointer}
.chips label{display:grid;place-items:center;cursor:pointer;text-align:center}
.dw_x{cursor:pointer}
.side_i{cursor:pointer}
.q > summary.h{width:100%;display:flex;justify-content:space-between;gap:14px;align-items:center;
  text-align:left;padding:19px 0;font-weight:600;font-size:15.5px}
.q > summary.h svg{width:19px;height:19px;stroke:var(--em2);stroke-width:2.2;flex:none;transition:.25s}
.q[open] > summary.h svg{transform:rotate(180deg)}
.adv[open] > summary svg{transform:rotate(180deg)}
.flash{border-radius:14px;padding:13px 15px;font-size:13.5px;margin-bottom:14px;border:1px solid}
.flash.ok{background:#e7f8ee;color:#15803d;border-color:#bbe8cd}
.flash.no{background:#feecee;color:#be123c;border-color:#f3cdd4}
/* Card clicavel por inteiro: um <a class="lnk"> cobre o container e os controles
   proprios sobem de camada. A arvore do HTML continua valida (nada de <a> dentro
   de <a>) e o alvo de toque passa a ser o card todo. */
.plan,.evid,.credit_box,.card_x{position:relative}
.lnk{position:absolute;inset:0;z-index:0;border-radius:inherit}
.cfg_i > .rt,.row > .end,.plan .btn,.evid .mini_b,.credit_box .mini_b,.card_x .hd .mini_b,
.card_x .hd form,.row form,.cfg_i form{position:relative;z-index:1}
.rt form,.end form{display:flex;margin:0}
/* toggle dentro de form (label+checkbox): visual dirigido por :checked, nao por classe */
.tog:has(input:checked){background:linear-gradient(90deg,#1d4ed8,#3b82f6);border-color:transparent}
.tog:has(input:checked) i{left:21px}
.tog.gold:has(input:checked){background:linear-gradient(90deg,#b45309,#e0a92a)}

/* ============================================================================
   LANDING CLARA — fundo em degradê azul, superfícies brancas, sombra suave.
   Escopo: body.lp (a landing agora entra no tema claro).
   ==========================================================================*/
body.lp{
  --bg2:rgba(255,255,255,.55); --am:#b45309; --vi:#7c3aed;
  --sky1:#eef4ff; --sky2:#f7fbff; --sky3:#e6efff;
  --ink-soft:#334155; --brand:#2563eb; --brand2:#1d4ed8;
  background:
    radial-gradient(1100px 620px at 8% -8%, #dbe9ff 0%, rgba(219,233,255,0) 62%),
    radial-gradient(900px 560px at 96% 4%, #e8e2ff 0%, rgba(232,226,255,0) 58%),
    radial-gradient(760px 520px at 50% 112%, #dff0ff 0%, rgba(223,240,255,0) 60%),
    linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 46%, var(--sky3) 100%);
  background-attachment:fixed;
}
body.lp header{background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid rgba(37,99,235,.09)}
body.lp .navlinks a{color:var(--tx2)}
body.lp .navlinks a:hover{color:var(--brand2)}
body.lp .burger{border-color:rgba(37,99,235,.18);background:rgba(255,255,255,.7)}
body.lp .burger svg{stroke:var(--brand2)}

/* halos coloridos de volta, agora suaves */
body.lp .glow{display:block;opacity:.55}
body.lp .hero .glow{background:radial-gradient(circle, rgba(96,165,250,.5) 0%, rgba(96,165,250,0) 68%);filter:blur(70px)}
body.lp .final .glow{background:radial-gradient(circle, rgba(147,197,253,.55) 0%, rgba(147,197,253,0) 68%);filter:blur(70px)}
body.lp .grid-bg{display:block;opacity:.5;
  background-image:linear-gradient(rgba(37,99,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.055) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 0%,#000 0%,transparent 78%);
          mask-image:radial-gradient(70% 55% at 50% 0%,#000 0%,transparent 78%)}
body.lp .tex{opacity:.5}

body.lp .tagline{background:rgba(255,255,255,.8);border:1px solid rgba(37,99,235,.16);color:var(--ink-soft);box-shadow:0 6px 20px -14px rgba(37,99,235,.6)}
body.lp .tagline b{color:var(--brand2)}
body.lp .hero h1 span{background:linear-gradient(100deg,#2563eb,#7c3aed 62%,#0ea5e9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.lp .lead{color:var(--ink-soft)}
body.lp .microcta{color:var(--tx3)}

body.lp .check .cl-lab{color:var(--tx3)}
body.lp .cbox{background:rgba(255,255,255,.92);border:1px solid rgba(37,99,235,.18);box-shadow:0 20px 44px -30px rgba(30,64,175,.55)}
body.lp .cbox .pre{color:var(--tx3)}
body.lp .cbox input{color:var(--tx)}
body.lp .cres.ok{color:#15803d}
body.lp .cres.no{color:#be123c}
body.lp .cres.wait{color:var(--tx3)}

body.lp .flowbox{background:rgba(255,255,255,.78);border:1px solid rgba(37,99,235,.14);box-shadow:0 34px 80px -50px rgba(30,64,175,.6);backdrop-filter:blur(10px)}
body.lp .fstep b{color:var(--tx3)}
body.lp .fstep.now b{color:var(--brand2)}
body.lp .fstep .track{background:rgba(37,99,235,.14)}
body.lp .fstage{background:linear-gradient(180deg,#f8fbff,#eff5ff);border:1px solid rgba(37,99,235,.1)}
body.lp .fcap b{color:var(--tx)}
body.lp .fcap p{color:var(--tx2)}
body.lp .fnum{color:rgba(37,99,235,.22)}

body.lp .logos{background:rgba(255,255,255,.66);border-top:1px solid rgba(37,99,235,.09);border-bottom:1px solid rgba(37,99,235,.09)}
body.lp .logos b{color:var(--ink-soft)}

body.lp .sh span{color:var(--brand2)}
body.lp .sh p{color:var(--ink-soft)}

body.lp .b{background:rgba(255,255,255,.86);border:1px solid rgba(37,99,235,.1);box-shadow:0 22px 50px -38px rgba(30,64,175,.5);backdrop-filter:blur(6px)}
body.lp .b:hover{border-color:rgba(37,99,235,.24);box-shadow:0 30px 60px -38px rgba(30,64,175,.6)}
body.lp .b i.ico{background:linear-gradient(150deg,#e8f0ff,#dbe7ff);border-color:rgba(37,99,235,.16)}
body.lp .b i.ico svg{stroke:var(--brand2)}
body.lp .b.v i.ico{background:linear-gradient(150deg,#f2ecff,#e9e0ff);border-color:rgba(139,92,246,.2)}
body.lp .b.v i.ico svg{stroke:#7c3aed}
body.lp .b.a i.ico{background:linear-gradient(150deg,#fff4e0,#ffedcc);border-color:rgba(245,158,11,.22)}
body.lp .b.a i.ico svg{stroke:#b45309}
body.lp .b p{color:var(--ink-soft)}

body.lp #fluxo{background:rgba(255,255,255,.5)}
body.lp #planos{background:transparent}
body.lp .rail{border-left-color:rgba(37,99,235,.16)}
body.lp .rl p{color:var(--ink-soft)}
body.lp .rl::before{box-shadow:0 0 0 4px rgba(37,99,235,.12)}

body.lp .plan{background:rgba(255,255,255,.9);border:1px solid rgba(37,99,235,.12);box-shadow:0 24px 54px -40px rgba(30,64,175,.5)}
body.lp .plan.hi{border-color:rgba(37,99,235,.34);background:linear-gradient(180deg,#ffffff,#f4f8ff);box-shadow:0 34px 74px -44px rgba(30,64,175,.75)}
body.lp .plan .tag{background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff}
body.lp .plan .price{color:var(--tx)}
body.lp .pl{color:var(--ink-soft)}
body.lp .pl svg{stroke:var(--brand)}

body.lp .q{border-bottom-color:rgba(37,99,235,.1)}
body.lp .q p{color:var(--ink-soft)}

body.lp .final{border-top:1px solid rgba(37,99,235,.09);
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(226,238,255,.85) 100%)}
body.lp .final p{color:var(--ink-soft)}
body.lp .marian{background:rgba(255,255,255,.8);border:1px solid rgba(245,158,11,.28);color:#b45309}
body.lp .marian svg{stroke:#d97706}
body.lp footer{border-top:1px solid rgba(37,99,235,.09);background:rgba(255,255,255,.6);color:var(--tx3)}
body.lp .sheet{background:rgba(15,23,42,.32);backdrop-filter:blur(5px)}
body.lp .sheet-in{background:#fff;border-color:rgba(37,99,235,.14);box-shadow:0 26px 60px -32px rgba(30,64,175,.7)}
body.lp .sheet-in a{color:var(--tx);border-bottom-color:rgba(37,99,235,.09)}
body.lp .sheet-in a:last-of-type{border-bottom:0}

/* ============================================================================
   AUTO-ATENDIMENTO — a paróquia cria o próprio ambiente pela home
   ==========================================================================*/
.sg_top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;padding:16px 20px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(16px);border-bottom:1px solid rgba(37,99,235,.09)}
.sg_bar{display:flex;gap:5px;margin-left:auto;flex:0 1 180px}
.sg_bar i{height:4px;flex:1;border-radius:99px;background:rgba(37,99,235,.14);transition:.4s}
.sg_bar i.on{background:linear-gradient(90deg,#3b82f6,#2563eb)}
.sg{max-width:560px;margin:0 auto;padding:30px 20px calc(48px + env(safe-area-inset-bottom))}
.sg_kick{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--em)}
.sg h1{font-size:clamp(25px,6vw,33px);letter-spacing:-.03em;margin:10px 0 8px;line-height:1.12}
.sg_sub{color:var(--tx2);font-size:15px;margin-bottom:22px}
.sg_card{background:rgba(255,255,255,.92);border:1px solid rgba(37,99,235,.12);border-radius:22px;padding:22px;
  box-shadow:0 28px 64px -44px rgba(30,64,175,.6);backdrop-filter:blur(8px)}
.sg_fine{font-size:12.5px;color:var(--tx3);text-align:center;margin-top:12px}
.sg_slug{display:flex;align-items:center;background:var(--card);border:1px solid var(--line2);border-radius:14px;
  padding:0 14px;box-shadow:var(--sh);transition:.2s;overflow:hidden}
.sg_slug:focus-within{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.sg_slug span{font-size:14.5px;color:var(--tx3);white-space:nowrap;flex:none}
.sg_slug input{border:0;background:0;box-shadow:none;padding:14px 0 14px 2px;flex:1;min-width:0;font-size:15.5px;outline:0}
.sg_alt{display:block;width:100%;margin-top:14px;text-align:center;font-size:13.5px;font-weight:600;
  color:var(--tx3);background:0;border:0;padding:10px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sg_alt:hover{color:var(--em2)}
.sg_hold{display:flex;align-items:center;gap:10px;background:#ecfdf3;border:1px solid #bbf7d0;border-radius:14px;
  padding:12px 14px;margin-bottom:18px;font-size:13.5px;color:#166534;line-height:1.45}
.sg_hold svg{width:18px;height:18px;stroke:#15803d;stroke-width:2.4;flex:none}
.sg_hold b{font-weight:800}
.sg_plans{display:grid;gap:12px}
.sg_plan{position:relative;display:block;background:rgba(255,255,255,.92);border:1.5px solid var(--line2);
  border-radius:18px;padding:18px 56px 18px 18px;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.sg_plan input{position:absolute;opacity:0;pointer-events:none}
.sg_plan .tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--em);background:rgba(37,99,235,.1);border-radius:99px;padding:3px 9px;margin-bottom:8px}
.sg_plan b{display:block;font-size:17px}
.sg_plan .pr{display:block;font-size:22px;font-weight:800;margin:2px 0 6px}
.sg_plan .pr small{font-size:13px;font-weight:600;color:var(--tx3);margin-left:2px}
.sg_plan .ds{display:block;font-size:13px;color:var(--tx2);margin-top:2px}
.sg_plan .tick{position:absolute;top:50%;right:16px;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--line2);display:grid;place-items:center;background:#fff;transition:.18s}
.sg_plan .tick svg{width:14px;height:14px;stroke:#fff;stroke-width:3;opacity:0}
.sg_plan:has(input:checked){border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.sg_plan:has(input:checked) .tick{background:linear-gradient(135deg,#3b82f6,#2563eb);border-color:#2563eb}
.sg_plan:has(input:checked) .tick svg{opacity:1}
.sg_plan.hi{border-color:rgba(37,99,235,.35)}

/* ---- provisionamento: um orbe central que percorre as etapas ---- */
.prov{--stp:.9s;--tot:4.5s;text-align:center;padding:34px 22px 26px}
.orbit{position:relative;width:188px;height:188px;margin:0 auto}
.orbit .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.orbit .ring .bg{fill:none;stroke:rgba(37,99,235,.11);stroke-width:5}
.orbit .ring .fg{fill:none;stroke:url(#pgrad);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:339.29;stroke-dashoffset:339.29;animation:dash var(--tot) cubic-bezier(.45,.05,.25,1) forwards}
.orbit .halo{position:absolute;inset:14px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#eff5ff,#e3edff);
  box-shadow:inset 0 1px 0 #fff,0 18px 40px -26px rgba(30,64,175,.75);
  animation:haloWarm .5s ease var(--tot) forwards}
.orbit .core{position:absolute;inset:0;display:grid;place-items:center}
.orbit .ph{grid-area:1/1;display:grid;place-items:center;width:66px;height:66px;opacity:0}
.orbit .ph svg{width:38px;height:38px;stroke:#2563eb;stroke-width:1.7}
.orbit .ph.step{animation:phase var(--stp) ease var(--d) both}
.orbit .ph.fin{animation:finPop .6s cubic-bezier(.2,1.5,.4,1) var(--tot) forwards}
.orbit .ph.fin svg{width:56px;height:56px;stroke:#15803d;stroke-width:2.4}
.orbit .pulse{position:absolute;inset:14px;border-radius:50%;border:2px solid rgba(22,163,74,.5);
  opacity:0;animation:pulseOut .9s ease-out var(--tot) 2}

.cap{position:relative;margin-top:24px;min-height:52px;display:grid}
.cap .ln{grid-area:1/1;opacity:0}
.cap .ln b{display:block;font-size:17px;letter-spacing:-.02em}
.cap .ln small{display:block;font-size:13px;color:var(--tx3);margin-top:4px}
.cap .ln.step{animation:phase var(--stp) ease var(--d) both}
.cap .ln.fin{animation:capIn .45s ease var(--tot) forwards}
.cap .ln.fin b{color:#15803d}

.pips{display:flex;gap:7px;justify-content:center;margin-top:20px}
.pips i{width:7px;height:7px;border-radius:99px;background:rgba(37,99,235,.16);
  animation:pipOn .35s ease var(--d) forwards,pipDone .35s ease var(--tot) forwards}
.prov_go{margin-top:26px;opacity:0;transform:translateY(12px) scale(.96);
  animation:goIn .6s cubic-bezier(.2,1.3,.4,1) calc(var(--tot) + .3s) forwards}
.prov_go .btn{position:relative;overflow:hidden}
.prov_go .btn::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  animation:sheen 2.8s ease-in-out calc(var(--tot) + 1s) infinite}

@keyframes dash{to{stroke-dashoffset:0}}
@keyframes phase{0%{opacity:0;transform:scale(.7) translateY(9px)}
  16%{opacity:1;transform:none}84%{opacity:1;transform:none}
  100%{opacity:0;transform:scale(1.12) translateY(-9px)}}
@keyframes finPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes capIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes haloWarm{to{background:radial-gradient(circle at 50% 38%,#f0fdf4,#dcfce7);
  box-shadow:inset 0 1px 0 #fff,0 18px 44px -24px rgba(22,163,74,.7)}}
@keyframes pulseOut{0%{opacity:.85;transform:scale(.94)}100%{opacity:0;transform:scale(1.22)}}
@keyframes pipOn{to{background:#2563eb;width:20px}}
@keyframes pipDone{to{background:#16a34a;width:20px}}
@keyframes goIn{to{opacity:1;transform:none}}
@keyframes sheen{0%{left:-60%}55%{left:120%}100%{left:120%}}
@media (prefers-reduced-motion:reduce){
  .prov *,.prov *::before,.prov *::after{animation-duration:.01ms!important;animation-delay:0ms!important;
    animation-iteration-count:1!important}
  .orbit .ring .fg{stroke-dashoffset:0}
  .orbit .ph.step,.cap .ln.step{display:none}
}
}

  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
  border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center}

.sg_card.done{text-align:center}
.sg_card.done .ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;
  background:linear-gradient(150deg,#dcfce7,#bbf7d0);border:1px solid #a7e8bf}
.sg_card.done .ring svg{width:30px;height:30px;stroke:#15803d;stroke-width:2.6}
.sg_card.done h1{font-size:24px;margin-bottom:6px}

/* ---- textura de fundo: cruzes e pontos, discreta e amistosa ---- */
.tex{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='108' viewBox='0 0 108 108'%3E%3Cg fill='none' stroke='%232563eb' stroke-opacity='.16' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M27 20v14M20 25.5h14'/%3E%3Cpath d='M81 74v14M74 79.5h14'/%3E%3C/g%3E%3Cg fill='%232563eb' fill-opacity='.11'%3E%3Ccircle cx='81' cy='27' r='1.7'/%3E%3Ccircle cx='27' cy='81' r='1.7'/%3E%3Ccircle cx='54' cy='54' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:108px 108px;
  -webkit-mask-image:radial-gradient(78% 62% at 50% 12%,#000 0%,transparent 76%);
          mask-image:radial-gradient(78% 62% at 50% 12%,#000 0%,transparent 76%)}
.final .tex{-webkit-mask-image:radial-gradient(72% 70% at 50% 92%,#000 0%,transparent 74%);
            mask-image:radial-gradient(72% 70% at 50% 92%,#000 0%,transparent 74%)}

/* ---- demos do flowbox no tema claro (foram desenhados para fundo escuro) ---- */
body.lp .cartaz{background:#fff;border-color:rgba(37,99,235,.14);box-shadow:0 16px 36px -26px rgba(30,64,175,.55)}
body.lp .cartaz small{color:#b45309}
body.lp .qrbox{background:#0f172a;border-color:rgba(15,23,42,.18)}
body.lp .mini{background:#fff;border-color:rgba(37,99,235,.14);box-shadow:0 16px 36px -26px rgba(30,64,175,.55)}
body.lp .mfld{background:#f4f7fd;border-color:rgba(37,99,235,.1)}
body.lp .mbtn{color:#fff}
body.lp .wa .bub{background:#fff;border:1px solid rgba(37,99,235,.1);box-shadow:0 10px 24px -20px rgba(30,64,175,.6)}
body.lp .wa .bub.me{background:#d9f7e3;border-color:rgba(22,163,74,.18)}
body.lp .pixok .ring{background:#dcfce7;border-color:#a7e8bf;box-shadow:0 0 60px -14px rgba(22,163,74,.45)}
body.lp .pixok .ring svg{stroke:#15803d}
body.lp .pixok .conta{color:#1d4ed8;background:#e8f0ff;border-color:rgba(37,99,235,.22)}
body.lp .pan{background:#fff;border-color:rgba(37,99,235,.14);box-shadow:0 18px 40px -30px rgba(30,64,175,.55)}
body.lp .pbar{background:#f4f7fd;border-bottom-color:rgba(37,99,235,.1)}
body.lp .pbar i{background:rgba(15,23,42,.14)}
body.lp .pside{border-right-color:rgba(37,99,235,.1)}
body.lp .pside span{background:rgba(15,23,42,.1)}
body.lp .pside span.on{background:#2563eb}
body.lp .prow{border-bottom-color:rgba(37,99,235,.08)}
/* a marca tem fundo azul em qualquer contexto: a cruz e' sempre branca */
body.lp .mark svg{stroke:#fff}

/* areas internas: fundo liso, sem o degrade da landing */
body.lt{--tx3:#5f6b7f}
body.lt:not(.lp){background:var(--bg)}
/* linha de lista: quando nao couber, o lado direito desce em vez de espremer o texto */
.row > div{flex:1 1 190px}

/* ============================================================================
   Respiro no mobile: nada de coluna espremida quebrando palavra ao meio.
   ==========================================================================*/
.panel_top > div{flex:1 1 auto;min-width:0}
.imperso > span{flex:1 1 auto;min-width:0}
.kpi_c small{line-height:1.35}
.kpi_c u{display:block;margin-top:6px;line-height:1.35}
.row > div{flex:1 1 auto;min-width:0}
.row b{overflow-wrap:break-word}
/* o texto e' o span que nao e' icone nem lado direito — nada de nth-child, que
   muda de posicao quando existe o link em overlay */
.cfg_i > span:not(.ic):not(.rt){flex:1 1 200px;min-width:0}
.cfg_i .rt{flex-wrap:wrap;justify-content:flex-end;row-gap:6px;margin-left:auto}
.cfg_i b{overflow-wrap:break-word}
/* pill comprida quebra em vez de espremer o texto ao lado */
.tagx{white-space:normal;text-align:center;max-width:100%}
.card_x .hd{flex-wrap:wrap;row-gap:8px}
.sec_t{flex-wrap:wrap;row-gap:4px}

@media(max-width:640px){
  /* O papel do usuario e' decorativo e era ele que espremia o titulo. No celular
     ele some: quem esta impersonando ja ve a tarja amarela, e o proprio usuario
     aparece no rodape do menu. Some a disputa por largura, sem depender de como
     o motor resolve flex-wrap. */
  .panel_top .right{display:none}
  .panel_top h1{font-size:19px}
  .kpi_g{gap:9px}
  .kpi_c{padding:14px}
  .kpi_c b{font-size:22px}
  .imperso a,.imperso button{margin-left:auto}
}
}
@media(max-width:400px){
  .kpi_g{grid-template-columns:1fr}
  .panel_body{padding:16px 13px 120px}
}

/* ---- dois sticky no topo se sobrepunham: a tarja rola, so o cabecalho gruda ---- */

/* ---- duas colunas viram uma quando nao ha largura ---- */
@media(max-width:520px){
  .two_col{grid-template-columns:1fr}
  .fld label{line-height:1.3}
}

/* ---- aviso de situação da paróquia ---- */
.alerta{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:16px;border:1px solid;margin-bottom:14px}
.alerta .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.7)}
.alerta .ic svg{width:18px;height:18px;stroke-width:2}
.alerta > div{flex:1 1 auto;min-width:0}
.alerta b{display:block;font-size:14.5px}
.alerta small{display:block;font-size:12.5px;margin-top:2px;opacity:.85}
.alerta .mini_b{flex:none;margin-left:auto}
.alerta.no{background:#fff5f6;border-color:#f3cdd4;color:#9f1239}
.alerta.no .ic svg{stroke:#e11d48}
.alerta.wt{background:#fffaf0;border-color:#f3e0b8;color:#92400e}
.alerta.wt .ic svg{stroke:#d97706}

/* ---- onboarding ---- */
.onb{background:linear-gradient(150deg,#eef4ff,#fbfdff);border:1px solid rgba(37,99,235,.14);
  border-radius:20px;padding:18px;margin-bottom:14px;box-shadow:0 20px 44px -34px rgba(30,64,175,.6)}
.onb_h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.onb_h b{font-size:15.5px;letter-spacing:-.02em}
.onb_h em{margin-left:auto;font-style:normal;font-size:12px;font-weight:800;color:var(--em2);flex:none}
.onb_bar{height:6px;border-radius:99px;background:rgba(37,99,235,.13);overflow:hidden;margin-bottom:6px}
.onb_bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#60a5fa,#2563eb);transition:width .5s}
.onb_i{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid rgba(37,99,235,.09)}
.onb_i .ck{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px solid rgba(37,99,235,.28);background:#fff}
.onb_i .ck svg{width:14px;height:14px;stroke:#fff;stroke-width:3;opacity:0}
.onb_i.done .ck{background:#16a34a;border-color:#16a34a}
.onb_i.done .ck svg{opacity:1}
.onb_i > div{flex:1 1 auto;min-width:0}
.onb_i b{display:block;font-size:14px;font-weight:600}
.onb_i.done b{color:var(--tx3);text-decoration:line-through}
.onb_i small{display:block;font-size:12px;color:var(--tx3);margin-top:2px}

/* ---- gráfico ---- */
.graf{position:relative}
.graf svg{display:block;width:100%;height:130px;overflow:visible}
.graf .gx{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;color:var(--tx3)}
.graf .gv{position:absolute;top:0;right:0;font-size:12px;color:var(--tx3)}

/* ---- página pública "sobre" ---- */
.sobre{max-width:560px;margin:0 auto;padding:26px 20px 60px}
.sobre h2{font-size:23px;letter-spacing:-.03em;margin-bottom:6px}
.sobre .bloco{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin-top:14px;box-shadow:var(--sh)}
.sobre .bloco b{display:block;font-size:14px;margin-bottom:8px}
.sobre .missa{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:14px;color:var(--tx2)}
.sobre .missa:first-of-type{border-top:0}
.sobre .missa svg{width:16px;height:16px;stroke:var(--em);stroke-width:2;flex:none;margin-top:2px}
/* chips viram filtro de link: rolam na horizontal em vez de espremer */
.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips a{display:grid;place-items:center;text-align:center;white-space:nowrap;padding:0 14px;min-width:auto}

/* ---- aviso e onboarding: o botão desce em vez de espremer o texto ---- */
.alerta{flex-wrap:wrap;row-gap:10px}
.alerta > div{flex:1 1 190px}
.onb_i > svg{stroke:var(--tx3);stroke-width:2}
.onb_i.done > svg{display:none}
/* a tarja de impersonação fica numa linha só: o texto quebra dentro dela */
.imperso > span{flex:1 1 auto;min-width:0}
@media(max-width:520px){
  .alerta .mini_b{flex-basis:100%;justify-content:center;text-align:center}
}

/* ---- página principal da paróquia: escolher o que fazer ---- */
.par{max-width:520px;margin:0 auto;padding:24px 20px calc(40px + env(safe-area-inset-bottom))}
.par h2{font-size:24px;letter-spacing:-.03em}
.par .sub{color:var(--tx2);font-size:14.5px;margin:6px 0 20px}
.par_hero{position:relative;display:block;background:linear-gradient(155deg,#eef4ff,#fbfdff);
  border:1.5px solid rgba(37,99,235,.22);border-radius:22px;padding:22px 20px 20px;
  box-shadow:0 24px 54px -34px rgba(30,64,175,.7)}
.par_hero .sel{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(37,99,235,.07);border:1.5px dashed rgba(37,99,235,.42);color:#1d4ed8;
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:6px 11px;border-radius:999px}
.par_hero .sel::before{content:"";width:6px;height:6px;border-radius:50%;background:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.par_hero b{padding-right:8px}
.par_hero i{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;margin-bottom:14px;
  background:linear-gradient(150deg,#2563eb,#1d4ed8)}
.par_hero i svg{width:26px;height:26px;stroke:#fff;stroke-width:1.9}
.par_hero b{display:block;font-size:21px;letter-spacing:-.03em}
.par_hero small{display:block;font-size:14px;color:var(--tx2);margin-top:6px;line-height:1.45}
.par_hero .vai{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;
  background:linear-gradient(180deg,#2563eb,#1d4ed8);color:#fff;font-weight:700;font-size:15.5px;
  padding:14px;border-radius:14px;box-shadow:0 12px 24px -14px rgba(37,99,235,.8)}
.par_hero .vai svg{stroke:#fff;stroke-width:2.2}
.par_i{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line2);
  border-radius:16px;padding:15px;margin-bottom:10px;box-shadow:var(--sh)}
.par_i i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none;
  background:var(--soft);border:1px solid var(--line)}
.par_i i svg{stroke:var(--em);stroke-width:1.8}
.par_i > span{flex:1 1 auto;min-width:0}
.par_i b{display:block;font-size:15px}
.par_i small{display:block;font-size:12.5px;color:var(--tx3);margin-top:2px}
.par_i > svg{stroke:var(--tx3);stroke-width:2;flex:none}

/* ---- erro por campo ---- */
.fld .erro{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#be123c;margin-top:6px}
.fld .erro svg{width:14px;height:14px;stroke:#e11d48;stroke-width:2.2}
.fld.err input,.fld.err select,.fld.err textarea{border-color:#f3a3b1;box-shadow:0 0 0 4px rgba(225,29,72,.09)}
.fld.err label{color:#be123c}
.cep_av{font-size:12.5px;color:var(--tx3);margin:-6px 0 12px}
.sem_cep{background:0;border:0;padding:0;font-size:13px;color:var(--em);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin:-6px 0 14px;display:block}

/* ---- botão do Pix: é a ação principal da tela, no celular ---- */
.pix_btn{width:100%;margin-top:16px;gap:10px;font-size:17px;padding:17px;border-radius:16px;
  box-shadow:0 14px 28px -12px rgba(37,99,235,.85);animation:pixPulso 2.1s ease-in-out infinite}
.pix_btn svg{width:20px;height:20px;stroke:#fff;stroke-width:2.2}
.pix_btn:active{transform:scale(.985)}
@keyframes pixPulso{
  0%,100%{box-shadow:0 14px 28px -12px rgba(37,99,235,.85),0 0 0 0 rgba(37,99,235,.35)}
  55%{box-shadow:0 14px 28px -12px rgba(37,99,235,.85),0 0 0 12px rgba(37,99,235,0)}
}
.pix_passos{list-style:none;counter-reset:pp;margin:16px 0 0;padding:0}
.pix_passos li{counter-increment:pp;display:flex;align-items:center;gap:11px;padding:10px 0;
  font-size:14.5px;color:var(--tx2);border-top:1px solid var(--line)}
.pix_passos li:first-child{border-top:0}
.pix_passos li::before{content:counter(pp);flex:none;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:#e8f0ff;color:#1d4ed8;font-size:12px;font-weight:800}
.pix_passos b{color:var(--tx);font-weight:600}
@media (prefers-reduced-motion:reduce){.pix_btn{animation:none}}

/* ---- envio de imagem com recorte redondo ---- */
.up_zone{display:flex;align-items:center;gap:13px;width:100%;padding:13px 14px;cursor:pointer;
  background:var(--card);border:1px dashed var(--line2);border-radius:14px;transition:.2s;text-align:left}
.up_zone:hover,.up_zone.sobre{border-color:#2563eb;background:rgba(37,99,235,.05)}
.up_pv{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  background:var(--soft,#f7f8fc);border:1px solid var(--line)}
.up_pv img{width:100%;height:100%;object-fit:cover;display:block}
.up_pv svg{width:22px;height:22px;stroke:var(--tx3);stroke-width:1.7}
.up_tx{min-width:0;flex:1}
.up_tx b{display:block;font-size:14px;letter-spacing:-.01em}
.up_tx small{display:block;font-size:11.5px;color:var(--tx3);line-height:1.45}
.up_rm{flex:none;font-size:12px;font-weight:600;color:#b42318;padding:7px 11px;border-radius:10px;
  border:1px solid var(--line2);background:var(--card)}
.up_bg{position:fixed;inset:0;z-index:94;background:rgba(15,23,42,.5);backdrop-filter:blur(3px)}
.up_box{position:fixed;z-index:95;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,360px);
  background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;text-align:center;
  box-shadow:0 24px 60px -20px rgba(16,24,40,.45)}
.up_box b{font-size:16px;letter-spacing:-.02em;display:block}
.up_box small{font-size:12.5px;color:var(--tx3);display:block;margin-bottom:14px}
.up_stage{position:relative;width:236px;height:236px;margin:0 auto 14px;touch-action:none}
.up_stage canvas{width:100%;height:100%;display:block;border-radius:50%;background:var(--soft,#f7f8fc);cursor:grab}
.up_stage canvas:active{cursor:grabbing}
.up_ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 0 0 1px var(--line2) inset}
.up_zoom{width:100%;margin-bottom:16px;accent-color:#2563eb}
.up_acts{display:flex;gap:9px}
.up_acts .btn{flex:1;padding:12px 14px;font-size:14.5px}

/* ---- cotas: seletor na mesma linha do valor ---- */
.cotas{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:13px 15px;margin:0 0 8px;box-shadow:var(--sh)}
.cotas label{flex:1;min-width:0;display:block;margin:0}
.cotas label b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.cotas label small{display:block;font-size:12px;color:var(--tx3);margin-top:1px}
.cotas select{flex:none;width:auto;min-width:96px;padding:9px 30px 9px 12px;font-size:14px;font-weight:600;
  border:1px solid var(--line2);border-radius:11px;background:var(--soft,#f7f8fc) url("data:image/svg+xml,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2'\
%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center/13px;
  -webkit-appearance:none;appearance:none;color:var(--tx)}
.cotas .tot{flex:none;font-size:16px;font-weight:800;letter-spacing:-.02em;min-width:74px;text-align:right}
@media (max-width:380px){.cotas{gap:9px;padding:12px}.cotas select{min-width:84px}.cotas .tot{font-size:15px;min-width:64px}}

/* ---- barra de filtro (select que aplica sozinho) ---- */
.filtro{display:flex;gap:9px;align-items:flex-end;margin:0 0 16px;flex-wrap:wrap}
.filtro label{flex:1;min-width:140px;display:block;margin:0}
.filtro label span{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:6px}
.filtro select{width:100%;padding:11px 32px 11px 13px;font-size:14px;font-weight:600;color:var(--tx);
  border:1px solid var(--line2);border-radius:12px;background:var(--card) url("data:image/svg+xml,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2'\
%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center/13px;
  -webkit-appearance:none;appearance:none;box-shadow:var(--sh);text-overflow:ellipsis}
.filtro .btn{flex:none;padding:11px 18px;font-size:14px}

/* ---- documentos legais no rodape (modal por rota) ---- */
.fg .emp{font-size:12.5px;color:var(--tx3);width:100%;order:2}
.fg .emp b{font-weight:600;color:var(--tx)}
.lgl_l{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;width:100%;order:3}
.lgl_l a{font-size:12.5px;color:var(--tx3);text-decoration:none;border-bottom:1px solid transparent}
.lgl_l a:hover{color:var(--tx);border-bottom-color:var(--line2)}
.lgl{position:fixed;inset:0;z-index:96;display:grid;place-items:end center}
.lgl .bg{position:absolute;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(3px)}
.lgl .box{position:relative;width:100%;max-width:620px;max-height:92vh;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:22px 22px 0 0;overflow:hidden;
  box-shadow:0 -10px 60px -18px rgba(16,24,40,.5)}
.lgl .hd{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.lgl .hd b{flex:1;font-size:16px;letter-spacing:-.02em}
.lgl .x{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line2);background:var(--card)}
.lgl .x svg{width:16px;height:16px;stroke:var(--tx3);stroke-width:2}
.lgl .bd{overflow-y:auto;padding:18px 20px 8px;-webkit-overflow-scrolling:touch}
.lgl .bd .up{font-size:11.5px;color:var(--tx3);margin-bottom:14px}
.lgl .bd h4{font-size:14px;font-weight:700;letter-spacing:-.01em;margin:18px 0 6px}
.lgl .bd h4:first-of-type{margin-top:0}
.lgl .bd p{font-size:13.5px;line-height:1.65;color:var(--tx2,#475569);margin-bottom:10px}
.lgl .lk{list-style:none;margin:0 0 12px;padding:0}
.lgl .lk li{padding:10px 0;border-bottom:1px solid var(--line)}
.lgl .lk li:last-child{border-bottom:0}
.lgl .lk a{font-size:13.5px;font-weight:600;color:#2563eb;text-decoration:none}
.lgl .lk a:hover{text-decoration:underline}
.lgl .lk small{display:block;font-size:12px;color:var(--tx3);margin-top:2px;line-height:1.5}
.lgl .ft{padding:14px 20px;border-top:1px solid var(--line);background:var(--card)}
.lgl .ft .btn{width:100%}
@media(min-width:640px){.lgl{place-items:center}.lgl .box{border-radius:22px}}