/* Site do Fila Zero. Mesmo desenho do site da MVloc (header, banner rotativo, hero,
   seções, preços, dúvidas e rodapé), com o verde do app (web/src/styles/tokens.css)
   no lugar do lima. Cores só nos tokens abaixo; o tema escuro troca só os valores. */
:root{
  color-scheme:light;
  --ground:#f5f5f7; --surface:#ffffff; --surface-2:#fbfbfd; --inset:#f1f1f4;
  --text:#1d1d1f; --dim:#6e6e73; --mute:#86868b;
  --line:#e3e3e8; --line-2:#d0d0d7;
  --verde:#21c063; --verde-hover:#2fd172; --verde-deep:#00735e; --verde-suave:rgba(33,192,99,.13);
  --ink:#111b21;
  --amarelo:#e0a100; --vermelho:#e5484d; --laranja:#f08c00;
  --header:rgba(245,245,247,.82);
  --escuro:#111b21; --escuro-2:#1b262d; --escuro-3:#22303a; --escuro-txt:#a3adb4;
  --shadow-s:0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.04);
  --shadow-m:0 2px 6px rgba(0,0,0,.06), 0 18px 48px rgba(0,0,0,.07);
  --r:16px; --r-lg:22px;
  --max:1120px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#0f1111; --surface:#171a1a; --surface-2:#1c1f1f; --inset:#232727;
    --text:#e9eaea; --dim:#a0a4a4; --mute:#868b8b;
    --line:#262a2a; --line-2:#343939;
    --verde-deep:#21c063; --verde-suave:rgba(33,192,99,.14);
    --header:rgba(15,17,17,.82);
    --escuro:#141819; --escuro-2:#1d2223; --escuro-3:#252b2c;
    --shadow-s:0 1px 2px rgba(0,0,0,.3); --shadow-m:0 18px 48px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0f1111; --surface:#171a1a; --surface-2:#1c1f1f; --inset:#232727;
  --text:#e9eaea; --dim:#a0a4a4; --mute:#868b8b;
  --line:#262a2a; --line-2:#343939;
  --verde-deep:#21c063; --verde-suave:rgba(33,192,99,.14);
  --header:rgba(15,17,17,.82);
  --escuro:#141819; --escuro-2:#1d2223; --escuro-3:#252b2c;
  --shadow-s:0 1px 2px rgba(0,0,0,.3); --shadow-m:0 18px 48px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden;
}
body > main{flex:1 0 auto}
body > footer{flex-shrink:0; margin-top:auto}
h1,h2,h3{margin:0; letter-spacing:-.028em; text-wrap:balance; font-weight:700; line-height:1.12}
h1{font-size:clamp(36px,5.2vw,58px)}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:19px; letter-spacing:-.02em}
p{margin:0}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.eyebrow{font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--verde-deep)}
.lead{color:var(--dim); font-size:clamp(17px,1.9vw,20px); max-width:62ch}

/* marca: "fila" forte + "zero" leve + ponto verde, igual ao app */
.brand{display:inline-flex; align-items:baseline; font-size:26px; letter-spacing:-.038em; line-height:1}
.brand .f1{font-weight:700; color:var(--text)}
.brand .f2{font-weight:500; color:var(--dim)}
.brand .dot{display:inline-block; width:.24em; height:.24em; border-radius:50%; background:var(--verde); margin-left:.12em}

/* nav */
header{position:sticky; top:0; z-index:50; background:var(--header); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:18px; height:62px}
.nav nav{display:flex; gap:18px; margin-left:auto; font-size:14.5px; color:var(--dim); font-weight:500}
.nav nav a{white-space:nowrap}
.nav nav a:hover{color:var(--text)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:11px; padding:11px 20px; font-size:14.5px; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:.16s ease; white-space:nowrap;
}
.btn svg{width:18px; height:18px; flex:none}
.btn-verde{background:var(--verde); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06)}
.btn-verde:hover{background:var(--verde-hover); transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2); color:var(--text); background:var(--surface)}
.btn-ghost:hover{border-color:var(--mute)}
.btn-lg{padding:15px 28px; font-size:16px; border-radius:13px}

/* hero */
.hero{padding:72px 0 24px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}
.hero h1{font-size:clamp(34px,4.3vw,52px)}
.hero h1 span{color:var(--verde-deep)}
.hero .lead{margin-top:20px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.micro{margin-top:16px; font-size:13.5px; color:var(--mute)}
.selo{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  padding:9px 15px 9px 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); font-size:13.5px; color:var(--text);
}
.selo svg{width:17px; height:17px; color:var(--verde-deep); flex:none}

/* faixa */
.strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); margin-top:48px}
.strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); padding-top:30px; padding-bottom:30px}
.stat{padding-left:34px; border-left:1px solid var(--line)}
.stat:first-child{padding-left:0; border-left:0}
.stat b{display:block; font-size:26px; font-weight:700; letter-spacing:-.03em}
.stat span{font-size:13.5px; color:var(--dim)}

/* seções */
section{padding:86px 0; scroll-margin-top:74px}
#topo{scroll-margin-top:74px}
.sec-head{max-width:66ch; margin-bottom:46px}
.sec-head h2{margin-top:12px}
.sec-head p{margin-top:16px}
.sec-head.centro{text-align:center; margin-left:auto; margin-right:auto}
.sec-head.centro .lead{margin-left:auto; margin-right:auto}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-s)}
.card h3{margin-bottom:9px}
.card p{color:var(--dim); font-size:15px}
.ico{width:40px; height:40px; border-radius:11px; background:var(--inset); display:grid; place-items:center; margin-bottom:18px; color:var(--verde-deep)}
.ico svg{width:20px; height:20px}

.app-sec{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.app-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}

.checks{display:flex; flex-direction:column; gap:14px; margin-top:8px}
.check{display:flex; gap:12px; align-items:flex-start; font-size:15.5px}
.check svg{width:19px; height:19px; flex:none; margin-top:3px; color:var(--verde-deep)}
.check span{color:var(--dim)}
.check b{color:var(--text); font-weight:600}

/* ── seção escura do anti-bloqueio (mesmo papel da seção de cobrança da MVloc) ── */
.dark{background:var(--escuro); color:#fff}
.dark .eyebrow{color:var(--verde)}
.dark .lead{color:var(--escuro-txt)}
.dark h2{color:#fff}
.dark .check span{color:var(--escuro-txt)}
.dark .check b{color:#fff}
.dark .check svg{color:var(--verde)}
.ab-top{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.ab-honesto{margin-top:22px; font-size:14px; color:var(--escuro-txt); border-left:2px solid var(--verde); padding-left:14px; max-width:58ch}

/* diagrama do caminho da mensagem */
.rota{
  margin-top:56px; display:grid; grid-template-columns:1fr 66px 1fr 66px 1.15fr 66px 1fr; align-items:center;
  background:var(--escuro-2); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg); padding:34px 28px;
}
.no{
  background:var(--escuro-3); border:1px solid rgba(255,255,255,.09); border-radius:16px;
  padding:18px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0;
}
.no svg{width:40px; height:40px; color:#dfe6ea}
.no b{font-size:14.5px; font-weight:650; line-height:1.3}
.no small{font-size:12.5px; color:var(--escuro-txt); line-height:1.4}
.no.servidor{border-color:var(--verde); box-shadow:0 0 0 4px rgba(33,192,99,.16); background:#16352a}
.no.servidor svg{color:var(--verde)}
.no.pilha{gap:8px}
.no.pilha .duplo{display:flex; gap:10px}
.no.pilha .duplo svg{width:32px; height:32px}
.seta{padding:0 8px; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--escuro-txt); letter-spacing:.02em; text-transform:uppercase}
.seta i{display:block; width:100%; height:2px; background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.5)); position:relative}
.seta i::after{content:''; position:absolute; right:-1px; top:-4px; border:5px solid transparent; border-left:7px solid rgba(255,255,255,.5); border-right:0}
.seta.ok i{background:linear-gradient(90deg, rgba(33,192,99,.3), var(--verde))}
.seta.ok i::after{border-left-color:var(--verde)}
.seta.ok{color:var(--verde)}
.rota-nota{grid-column:1/-1; margin-top:24px; display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; font-size:13.5px; color:var(--escuro-txt)}
.rota-nota span{display:inline-flex; align-items:center; gap:8px}
.rota-nota svg{width:16px; height:16px; flex:none}
.rota-nota .sim svg{color:var(--verde)}
.rota-nota .nao svg{color:#ff7a80}
.ritmo{margin-top:22px}
.ritmo .card{background:var(--escuro-2); border-color:rgba(255,255,255,.08); box-shadow:none; padding:24px}
.ritmo .card h3{color:#fff; font-size:17px}
.ritmo .card p{color:var(--escuro-txt); font-size:14.5px}
.ritmo .ico{background:rgba(33,192,99,.14); color:var(--verde); margin-bottom:14px}

/* números */
.numeros{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.fluxo-num{display:flex; flex-direction:column; align-items:center; gap:0}
.fn-entrada{width:100%; max-width:360px}
.fn-ramos{width:100%; max-width:440px; height:46px; color:var(--line-2)}
.fn-alvos{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; max-width:460px}
.num{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:3px; box-shadow:var(--shadow-s); min-width:0}
.num b{font-size:14.5px; display:flex; align-items:center; gap:8px}
.num small{font-size:12.5px; color:var(--mute)}
.num i{width:9px; height:9px; border-radius:50%; background:var(--verde); flex:none}
.fn-entrada.num{border-color:var(--verde-deep); background:var(--verde-suave); text-align:center; align-items:center}
.fn-ia{margin:-4px 0; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--verde-deep); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px 12px; position:relative; z-index:1; margin-top:12px}

/* passos */
.steps{counter-reset:s; display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px}
.step::before{
  counter-increment:s; content:counter(s);
  display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:var(--text); color:var(--ground); font-size:13.5px; font-weight:700; margin-bottom:16px;
}
.step h3{margin-bottom:8px}
.step p{color:var(--dim); font-size:15px}

.security-box{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:44px; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; box-shadow:var(--shadow-s);
}

/* preços */
.pricing{max-width:540px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-m); overflow:hidden}
.pricing-head{padding:28px 32px 26px; text-align:center; border-bottom:1px solid var(--line); background:var(--surface-2)}
.badge{display:inline-flex; align-items:center; gap:7px; background:var(--verde); color:var(--ink); font-weight:700; font-size:13.5px; padding:8px 16px; border-radius:999px}
.badge svg{width:15px; height:15px}
.pricing-head .preco{color:var(--text); margin-top:16px; font-size:48px; font-weight:700; letter-spacing:-.035em; line-height:1}
.pricing-head .preco small{font-size:16px; font-weight:500; color:var(--mute); letter-spacing:0}
.pricing-head p{margin-top:10px; color:var(--dim); font-size:14.5px}
.price-rows{padding:6px 32px}
.price-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--line)}
.price-row:last-child{border-bottom:0}
.price-row .lbl b{display:block; font-weight:600; font-size:16px}
.price-row .lbl small{color:var(--mute); font-size:12.5px; display:block; line-height:1.45; margin-top:2px}
.price-row .val{font-weight:700; font-size:20px; letter-spacing:-.02em; white-space:nowrap; text-align:right}
.price-row .val small{font-weight:500; font-size:13px; color:var(--mute)}
.price-row .val.leve{font-size:14px; font-weight:600; color:var(--dim)}
.promo{margin:4px 32px 0; background:var(--verde-suave); border:1px solid rgba(33,192,99,.35); border-radius:14px; padding:14px 16px; display:flex; gap:11px; align-items:center; font-size:14.5px; color:var(--text)}
.promo svg{width:20px; height:20px; color:var(--verde-deep); flex:none}
.pricing-foot{padding:22px 32px 30px}
.pricing-foot .btn{width:100%}
.pricing-note{text-align:center; margin-top:14px; font-size:13px; color:var(--mute)}

/* faq */
.faq{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
details.q{background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:4px 22px; box-shadow:var(--shadow-s); transition:border-color .15s}
details.q[open]{border-color:var(--line-2)}
details.q summary{list-style:none; cursor:pointer; padding:18px 0; display:flex; align-items:center; gap:14px; font-size:16.5px; font-weight:600; color:var(--text)}
details.q summary::-webkit-details-marker{display:none}
details.q summary .plus{margin-left:auto; flex:none; width:22px; height:22px; position:relative}
details.q summary .plus::before, details.q summary .plus::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--verde-deep); border-radius:2px}
details.q summary .plus::before{width:13px; height:2.4px}
details.q summary .plus::after{width:2.4px; height:13px; transition:opacity .2s}
details.q[open] summary .plus::after{opacity:0}
details.q .a{padding:0 0 20px; color:var(--dim); font-size:15.5px; line-height:1.65; max-width:70ch}

/* contato */
.signup{background:var(--surface); border-top:1px solid var(--line)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.contact{display:flex; flex-direction:column; gap:12px}
.contact a{display:flex; gap:13px; align-items:center; padding:15px 18px; background:var(--surface-2); border:1px solid var(--line); border-radius:13px; font-size:15px; transition:.15s}
.contact a:hover{border-color:var(--line-2)}
.contact svg{width:19px; height:19px; color:var(--dim); flex:none}
.contact small{display:block; color:var(--mute); font-size:12.5px; margin-top:1px}
.contact a.principal{background:var(--verde); border-color:var(--verde); color:var(--ink); font-weight:600}
.contact a.principal svg, .contact a.principal small{color:var(--ink)}
.contact a.principal small{opacity:.75}

/* rodapé */
footer{background:var(--ground); border-top:1px solid var(--line); padding:52px 0 40px}
.foot{display:flex; justify-content:space-between; gap:34px; flex-wrap:wrap; align-items:flex-start}
.foot-links{display:flex; gap:26px; font-size:14px; color:var(--dim); flex-wrap:wrap}
.foot-links a:hover{color:var(--text)}
.foot-social{display:flex; gap:10px; margin-top:18px}
.foot-social a{width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; color:var(--dim); transition:.16s ease}
.foot-social a:hover{color:var(--text); border-color:var(--verde-deep); transform:translateY(-1px)}
.foot-social svg{width:19px; height:19px}
.legal{margin-top:30px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--mute); line-height:1.7}

/* ── Banner rotativo do topo (igual ao da MVloc) ─────────────────────────── */
.hb{position:relative; background:#0b0e10; overflow:hidden; isolation:isolate}
.hb::before{
  content:''; position:absolute; z-index:0; width:900px; height:900px; border-radius:50%;
  right:-260px; top:-420px;
  background:radial-gradient(circle, rgba(33,192,99,.18) 0%, rgba(33,192,99,.05) 42%, transparent 68%);
}
.hb-viewport{position:relative; z-index:1; height:430px}
.hb-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .55s ease, visibility .55s}
.hb-slide[data-on]{opacity:1; visibility:visible}
.hb-in{max-width:var(--max); margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; gap:36px}
.hb-txt{flex:1; min-width:0; color:#f3f4f5}
.hb-eyebrow{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--verde); margin-bottom:12px}
.hb-txt h2{font-size:clamp(26px,3.5vw,44px); font-weight:800; letter-spacing:-.032em; line-height:1.06; color:#fff}
.hb-txt h2 b{color:var(--verde); font-weight:800}
.hb-txt p{margin-top:14px; font-size:clamp(14.5px,1.5vw,18px); color:#9aa4a9; max-width:46ch}
.hb-cta{display:inline-flex; align-items:center; gap:9px; margin-top:22px; background:var(--verde); color:var(--ink); font-weight:700; font-size:15px; padding:12px 22px; border-radius:999px; transition:.16s ease}
.hb-cta:hover{background:var(--verde-hover); transform:translateY(-1px)}
/* arte do slide: desenhada em 380x300 e reduzida no celular */
.hb-art{text-align:left; flex:none; width:380px; height:300px; position:relative}
.hb-art::before{content:''; position:absolute; z-index:-1; inset:15% 10%; border-radius:50%; background:radial-gradient(ellipse, rgba(33,192,99,.22), transparent 70%); filter:blur(34px)}
.art{max-width:none; width:380px; height:300px; position:relative; color:#e9eef0; font-size:13px; line-height:1.35}
.hb-dots{position:absolute; z-index:2; left:0; right:0; bottom:18px; display:flex; justify-content:center; gap:9px}
.hb-dots button{width:26px; height:4px; border-radius:99px; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.24); transition:.2s ease}
.hb-dots button[aria-current='true']{background:var(--verde); width:38px}
.hb-arrow{position:absolute; z-index:2; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#f3f4f5; display:grid; place-items:center; transition:.16s ease}
.hb-arrow:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3)}
.hb-prev{left:14px} .hb-next{right:14px}
@media (max-width:1240px){ .hb-arrow{display:none} }
@media (max-width:900px){
  .hb-viewport{height:380px}
  .hb-art{width:285px; height:225px}
  .hb-art .art{transform:scale(.75); transform-origin:top left}
}
@media (max-width:620px){
  .hb-viewport{height:440px}
  .hb-in{flex-direction:column; justify-content:center; gap:16px; text-align:center; padding:22px 20px 38px}
  .hb-txt{width:100%}
  .hb-txt p{display:none}
  .hb-eyebrow{margin-bottom:8px}
  .hb-cta{margin-top:16px}
  .hb-art{order:-1; width:247px; height:195px}
  .hb-art .art{transform:scale(.65)}
  .hb-dots{bottom:12px}
}
@media (prefers-reduced-motion:reduce){ .hb-slide{transition:none} }

/* peças das artes (fundo escuro do banner) */
.a-card{position:absolute; background:#1a2328; border:1px solid rgba(255,255,255,.1); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.45)}
.a-lbl{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8f9ba1}
.a-bolha{position:absolute; max-width:250px; padding:9px 12px; border-radius:12px; font-size:13px; box-shadow:0 10px 26px rgba(0,0,0,.35)}
.a-bolha.in{background:#242d31; color:#e9eef0; border-top-left-radius:4px}
.a-bolha.out{background:#145a3e; color:#eafff3; border-top-right-radius:4px}
.a-bolha small{display:block; font-size:10.5px; opacity:.65; margin-bottom:2px; font-weight:600}
.a-chip{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:700}
.a-num{position:absolute; display:flex; align-items:center; gap:9px; padding:10px 13px; background:#1a2328; border:1px solid rgba(255,255,255,.12); border-radius:12px; font-size:13px; font-weight:600; white-space:nowrap}
.a-num i{width:9px; height:9px; border-radius:50%; background:var(--verde)}

/* ── Mockup do painel (hero e lista de conversas) ─────────────────────────── */
.mock{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-m); overflow:hidden; font-size:13px; line-height:1.35; width:100%}
.mock-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.mock-bar i{width:10px; height:10px; border-radius:50%; background:var(--line-2)}
.mock-bar .brand{font-size:15px; margin-left:10px}
.mock-abas{display:flex; gap:4px; padding:10px 12px 0; border-bottom:1px solid var(--line); overflow:hidden}
.mock-abas span{padding:7px 10px 9px; font-size:12px; font-weight:600; color:var(--mute); white-space:nowrap; border-bottom:2px solid transparent; position:relative}
.mock-abas span.on{color:var(--text); border-bottom-color:var(--verde)}
.mock-abas span.pend::after{content:''; position:absolute; top:6px; right:2px; width:6px; height:6px; border-radius:50%; background:var(--laranja)}
.mock-corpo{display:grid; grid-template-columns:1fr 1.05fr}
.mock-lista{border-right:1px solid var(--line)}
.conv{display:flex; gap:10px; align-items:center; padding:11px 12px; border-bottom:1px solid var(--line); position:relative; min-width:0}
.conv:last-child{border-bottom:0}
.conv .av{width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700; background:var(--c, #4b5d78)}
.conv .tx{flex:1; min-width:0}
.conv .tx b{display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.conv .tx span{display:block; font-size:12px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nota{flex:none; font-size:11.5px; font-weight:700; padding:3px 7px; border-radius:7px; font-variant-numeric:tabular-nums}
.nota.v{background:rgba(33,192,99,.16); color:#0d8a47}
.nota.a{background:rgba(224,161,0,.16); color:#a87800}
.nota.r{background:rgba(229,72,77,.14); color:#c0353a}
.conv.luz-v{box-shadow:inset 3px 0 0 #21c063}
.conv.luz-a{box-shadow:inset 3px 0 0 #e0a100}
.conv.luz-r{box-shadow:inset 3px 0 0 #e5484d}
.conv.sel{background:var(--inset)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nota.v{color:#3ddc84}
  :root:not([data-theme="light"]) .nota.a{color:#ffc53d}
  :root:not([data-theme="light"]) .nota.r{color:#ff7a80}
}
:root[data-theme="dark"] .nota.v{color:#3ddc84}
:root[data-theme="dark"] .nota.a{color:#ffc53d}
:root[data-theme="dark"] .nota.r{color:#ff7a80}
.mock-chat{display:flex; flex-direction:column; gap:8px; padding:14px 12px; background:var(--inset); min-width:0}
.bl{max-width:88%; padding:8px 10px; border-radius:10px; font-size:12.5px; background:var(--surface); border:1px solid var(--line)}
.bl.out{align-self:flex-end; background:var(--verde-suave); border-color:rgba(33,192,99,.3)}
.bl small{display:block; font-size:10.5px; color:var(--mute); font-weight:600; margin-bottom:1px}
.sug{margin-top:auto; display:flex; flex-direction:column; gap:6px}
.sug .a-lbl{font-size:10px; color:var(--mute)}
.sug span:not(.a-lbl){font-size:12px; padding:7px 10px; border:1px dashed var(--line-2); border-radius:9px; background:var(--surface); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* chat da seção da IA */
.chat-demo{background:var(--inset); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-s)}
.chat-demo .bl{font-size:14px; padding:10px 13px; max-width:85%}
.chat-demo .bl small{font-size:11.5px}
.chat-demo .evento{align-self:center; font-size:12px; font-weight:600; color:var(--dim); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px 12px; display:inline-flex; gap:7px; align-items:center; text-align:center}
.chat-demo .evento svg{width:14px; height:14px; color:var(--verde-deep); flex:none}
.chat-demo .audio{display:flex; align-items:center; gap:8px}
.chat-demo .audio i{flex:1; height:16px; min-width:80px; background:repeating-linear-gradient(90deg, var(--mute) 0 2px, transparent 2px 5px); opacity:.5; border-radius:2px}
.chat-demo .transc{font-size:12px; color:var(--dim); font-style:italic; margin-top:4px}

@media (max-width:1060px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero-grid,.security-box,.form-grid,.app-grid,.ab-top,.numeros{grid-template-columns:1fr; gap:40px}
  .grid-3,.steps{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .strip .wrap{grid-template-columns:1fr 1fr; gap:22px 0}
  .strip .stat{padding-left:22px}
  .strip .stat:nth-child(odd){padding-left:0; border-left:0}
  .nav nav{display:none}
  .nav > .btn{margin-left:auto}
  section{padding:64px 0}
  .hero{padding-top:48px}
  .security-box{padding:30px}
  .rota{grid-template-columns:1fr; gap:0; padding:22px}
  .seta{flex-direction:row; justify-content:center; height:46px; gap:10px}
  .seta i{width:2px; height:26px; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.5))}
  .seta.ok i{background:linear-gradient(180deg, rgba(33,192,99,.3), var(--verde))}
  .seta i::after{right:auto; left:-4px; top:auto; bottom:-2px; border:5px solid transparent; border-top:7px solid rgba(255,255,255,.5); border-bottom:0}
  .seta.ok i::after{border-top-color:var(--verde); border-left-color:transparent}
  .seta span{order:2}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .nav{gap:12px}
  .nav .btn{padding:10px 14px; font-size:13.5px}
  .nav .btn .so-largo{display:none}
  h1{font-size:clamp(31px,8.6vw,40px)}
  .grid-4{grid-template-columns:1fr}
  .mock-corpo{grid-template-columns:1fr}
  .mock-chat{display:none}
  .mock-lista{border-right:0}
  .fn-alvos{gap:8px}
  .fn-alvos .num{padding:10px 9px}
  .fn-alvos .num b{font-size:13px; gap:6px}
  .fn-alvos .num small{font-size:11.5px}
  .price-rows{padding:6px 20px}
  .pricing-head{padding:24px 20px}
  .promo{margin:4px 20px 0}
  .pricing-foot{padding:20px 20px 26px}
  .security-box{padding:24px 20px}
  .card{padding:22px}
  .cta-row .btn{flex:1 1 100%}
  .stat b{font-size:21px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto !important}}