/* SIA site v3 (15/09/2026). Pagina branca com blocos preto-marinho, roxo da marca (#4F46E5, o mesmo do icone do ChatSIA) so em acao. Referencia de nivel pedida pelo Daniel: apple.com. */
/* v5 entrega C: fontes de reserva com a medida da Geist e da Bricolage (Arial ajustada por size-adjust, medida na pagina em
   02/10/2026). Ate a fonte da pagina chegar, o texto quebra nas mesmas linhas e nada pula quando ela entra (CLS da troca de
   fonte). Sem Arial no aparelho, a regra e ignorada e vale a pilha de sempre. */
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT");size-adjust:101.2%;ascent-override:99.8%;descent-override:29.6%;line-gap-override:0%}
@font-face{font-family:"Bricolage Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:500 700;size-adjust:95%;ascent-override:98%;descent-override:28.5%;line-gap-override:0%}
:root{--bg:#FFFFFF;--bg-2:#F4F5FA;--ink:#0C1020;--text:#1F2340;--muted:#5F6478;--line:#E4E5EC;--line-2:#CDD0DC;--brand:#4F46E5;--brand-hover:#4338CA;--brand-soft:#EEF0FF;--brand-tint:#C7CBFB;--brand-glow:#A5B4FC;--ok:#25D366;--ok-ink:#128C4A;--ok-soft:#E6F7EC;--warn:#B4432F;--warn-soft:#FDEEEA;--note:#FFF8E6;--note-line:#F3E2B3;--note-ink:#6B5310;--dark:#0C1020;--dark-2:#151A2F;--dark-line:#262C48;--dark-text:#F5F5F7;--dark-muted:#A7ADC6;--display:'Bricolage Grotesque','Bricolage Fallback','Geist','Geist Fallback',system-ui,sans-serif;--font:'Geist','Geist Fallback',-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',system-ui,sans-serif;--max:1180px;--r:14px;--tile:24px;--overlap:240px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}@media (prefers-reduced-motion:no-preference){html.ready{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;caret-color:var(--brand)}
::selection{background:var(--brand-tint);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;color:var(--ink);text-wrap:balance;font-weight:600;font-family:var(--display);font-optical-sizing:auto}
h1{font-size:clamp(40px,5.4vw,68px);line-height:1.02;letter-spacing:-.03em}
h2{font-size:clamp(30px,3.9vw,50px);line-height:1.06;letter-spacing:-.025em}
h3{font-size:clamp(22px,2.1vw,28px);line-height:1.15;letter-spacing:-.015em}
p{margin:0}
.lead{font-size:clamp(18px,1.55vw,23px);line-height:1.4;color:var(--muted);font-weight:400;letter-spacing:-.01em;max-width:34em;margin-top:20px}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
.muted{color:var(--muted)}.small{font-size:14px;line-height:1.5}
.head{max-width:820px;margin:0 auto clamp(36px,5vw,56px);text-align:center}

/* botoes e links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:500;font-size:17px;line-height:1;padding:15px 24px;border-radius:999px;background:var(--brand);color:#fff;border:1px solid transparent;cursor:pointer;font-family:var(--font);transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--brand-hover)}.btn:active{transform:scale(.98)}
.btn.sm{padding:9px 16px;font-size:14px}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}.btn.ghost:hover{border-color:var(--ink);background:transparent}
.btn.white{background:#fff;color:var(--ink)}.btn.white:hover{background:#ECECF1}
.dark .btn.ghost{border-color:rgba(255,255,255,.28);color:#fff}.dark .btn.ghost:hover{border-color:#fff}
.btn.wa{background:#fff;border-color:var(--line-2);color:var(--ink)}.btn.wa:hover{border-color:var(--ok-ink);background:#fff}
.dark .btn.wa{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}.dark .btn.wa:hover{border-color:#fff;background:transparent}
.btn img{width:20px;height:20px}.btn.sm img{width:16px;height:16px}
.link{display:inline-flex;align-items:center;gap:3px;font-weight:500;font-size:17px;color:var(--brand)}
.link svg{width:16px;height:16px;transition:transform .15s}.link:hover svg{transform:translateX(2px)}
.dark .link{color:var(--brand-glow)}
.ctas{display:flex;gap:14px 28px;flex-wrap:wrap;align-items:center;margin-top:30px}.ctas.center{justify-content:center}

/* navegacao */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{display:flex;align-items:center}.brand img{height:16px;width:auto}
.menu{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:500}
.menu a:not(.btn){color:var(--ink);opacity:.72;transition:opacity .15s}.menu a:not(.btn):hover,.menu a[aria-current]{opacity:1}
.burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:8px;margin-right:-8px}.burger svg{width:22px;height:22px;display:block}

/* heroi */
.hero{padding:clamp(56px,8vw,104px) 0 0;text-align:center}
.hero .lead{margin:22px auto 0}
.hero.plain{padding-bottom:clamp(40px,6vw,80px)}
.stage{margin-top:calc(var(--overlap) + 48px);background:var(--bg-2);padding:0 0 clamp(40px,5vw,64px)}
.stage .app,.stage .ops{margin-top:calc(var(--overlap) * -1)}

/* janela do ChatSIA (demonstracao viva e cortes estaticos) */
.app{background:#fff;border-radius:14px;box-shadow:0 30px 80px -30px rgba(12,16,32,.4),0 2px 6px rgba(12,16,32,.06);overflow:hidden;text-align:left;font-size:13px;line-height:1.4;color:var(--ink)}
.app-bar{height:40px;background:#F0F0F4;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 16px}
.app-bar i{width:11px;height:11px;border-radius:50%;background:#D5D6DE}
.app-url{margin:0 auto;background:#fff;border-radius:7px;padding:5px 14px;font-size:12px;color:var(--muted);min-width:240px;text-align:center;border:1px solid var(--line)}
.app-body{display:grid;grid-template-columns:56px 300px minmax(0,1fr) 280px;height:620px}
.rail{background:var(--dark);display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:6px}
.rail .logo{width:28px;height:28px;border-radius:7px;margin-bottom:10px}
.rail i{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#8F96B5}.rail i.on{background:#1F2542;color:#fff}
.rail svg{width:20px;height:20px}
.rail-av{margin-top:auto;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.cv-pane{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;background:#fff}
.cv-head{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.cv-head b{display:block;font-size:15px;font-weight:600;margin-bottom:10px}
.cv-filters{display:flex;gap:4px}.cv-filters i{font-style:normal;font-size:12px;padding:5px 10px;border-radius:999px;color:var(--muted);white-space:nowrap}.cv-filters i.on{background:var(--brand-soft);color:var(--brand);font-weight:500}
.cv-list{overflow:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.cv-list::-webkit-scrollbar{width:6px}.cv-list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.cv{display:grid;grid-template-columns:40px minmax(0,1fr) 10px;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.cv:hover{background:#FAFAFC}.cv.on{background:var(--brand-soft)}
.cv-av{position:relative;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;color:var(--ink)}
.cv-ch{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;padding:2px;background:#fff;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.cv-main{min-width:0}
.cv-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cv-top b{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-top time{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.cv-prev{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.cv-tags{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.cv-tags i,.s-tags i{font-style:normal;font-size:11px;padding:2px 7px;border-radius:5px;background:#EEEFF4;color:var(--muted);font-weight:500}
.cv-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);margin-top:6px;opacity:0;transition:opacity .2s,background .2s}
.cv.unread .cv-dot{opacity:1}.cv.done .cv-dot{opacity:1;background:var(--ok)}
.chat{display:flex;flex-direction:column;min-width:0;background:#FBFBFD}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--line);background:#fff}
.c-who b{display:block;font-size:14px;font-weight:600}
.c-chan{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:2px}.c-chan img{width:14px;height:14px}
.c-status{font-size:12px;font-weight:500;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);background:#fff;transition:background .3s,border-color .3s,color .3s}
.c-status.done{background:var(--ok-soft);border-color:#BFE8CC;color:var(--ok-ink)}
.chat-msgs{flex:1;overflow:hidden;padding:20px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end}
.msg{max-width:78%;padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.45;opacity:0;transform:translateY(6px);transition:opacity .25s cubic-bezier(.2,.7,.2,1),transform .25s cubic-bezier(.2,.7,.2,1)}
.msg.show{opacity:1;transform:none}
.msg.in{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start;color:var(--ink)}
.msg.out{background:var(--brand);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg-by{align-self:flex-end;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:-2px;opacity:0;transition:opacity .25s}
.msg-by.show{opacity:1}.msg-by i{width:6px;height:6px;border-radius:50%;background:var(--brand)}
.typing{display:inline-flex;gap:4px;padding:12px 14px}
.typing i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chat-note{margin:0 20px 12px;padding:10px 14px;border-radius:10px;background:var(--note);border:1px solid var(--note-line);font-size:12.5px;color:var(--note-ink);opacity:0;transition:opacity .25s}
.chat-note.show{opacity:1}.chat-note:empty{display:none}.chat-note b{font-weight:600}
.composer{background:#fff;border-top:1px solid var(--line);padding:10px 16px 14px}
.tabs{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-bottom:8px}
.tabs i{font-style:normal;padding-bottom:6px;border-bottom:2px solid transparent}.tabs i.on{color:var(--ink);border-color:var(--brand);font-weight:500}
.composer .input{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line-2);border-radius:10px;padding:8px 8px 8px 12px;font-size:13px;color:#8A90A8}
.composer .send{font-size:12px;font-weight:500;color:#fff;background:var(--brand);padding:6px 12px;border-radius:999px;flex:none}
.side{border-left:1px solid var(--line);padding:20px;overflow:hidden;background:#fff}
.s-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.s-init{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:17px;margin-bottom:6px}
.s-name{font-size:15px;font-weight:600}.s-chan{font-size:12px;color:var(--muted)}
.side dl{margin:0}.side dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 0 8px;font-weight:600}.side dd{margin:0;font-size:13px}
.s-tags{display:flex;gap:4px;flex-wrap:wrap}
.s-stages{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.s-stages li{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.s-stages li::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--line-2);flex:none;transition:background .3s,border-color .3s,box-shadow .3s}
.s-stages li.past{color:var(--ink)}.s-stages li.past::before{background:var(--line-2);border-color:var(--line-2)}
.s-stages li.on{color:var(--ink);font-weight:600}.s-stages li.on::before{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* secoes */
section{padding:clamp(72px,9vw,128px) 0}
.gray{background:var(--bg-2)}
.dark{background:var(--dark);color:var(--dark-text)}
.dark h1,.dark h2,.dark h3{color:#fff}.dark .lead,.dark .muted{color:var(--dark-muted)}
.shot{background:#fff;border-radius:16px;box-shadow:0 24px 60px -28px rgba(12,16,32,.32),0 1px 3px rgba(12,16,32,.06);overflow:hidden;font-size:13px;color:var(--ink);text-align:left}
.tile{background:var(--bg-2);border-radius:var(--tile);padding:clamp(20px,4vw,56px)}
.tile .shot{box-shadow:0 1px 3px rgba(12,16,32,.08)}
.app.crop{margin:0;box-shadow:0 20px 50px -30px rgba(12,16,32,.35),0 1px 3px rgba(12,16,32,.06)}
.app.crop .app-body{grid-template-columns:320px minmax(0,1fr);height:540px}
.app.crop .cv{cursor:default}.app.crop .cv:hover{background:transparent}.app.crop .cv.on:hover{background:var(--brand-soft)}

/* kanban */
.kb-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line);background:#fff}
.kb-head b{font-size:14px;font-weight:600}
.kb-view{display:flex;gap:2px;background:#EEEFF4;border-radius:8px;padding:3px}
.kb-view i{font-style:normal;font-size:12px;padding:4px 10px;border-radius:6px;color:var(--muted)}.kb-view i.on{background:#fff;color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(12,16,32,.1)}
.kb-cols{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:14px;padding:18px;background:#F7F7FA;overflow-x:auto}
.kb-col h4{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.kb-col h4 i{font-style:normal;background:#fff;border-radius:6px;padding:1px 7px;font-size:11px}
.kb-card{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;gap:10px;align-items:center;background:#fff;border-radius:10px;padding:10px 12px;margin-bottom:8px;box-shadow:0 1px 2px rgba(12,16,32,.08)}
.kb-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.kb-card b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-card small{display:block;font-size:11.5px;color:var(--muted)}
.kb-ch{width:16px;height:16px}
.kb-alert{grid-column:1/-1;font-style:normal;font-size:11px;color:var(--warn);font-weight:500;padding:5px 8px;border-radius:6px;background:var(--warn-soft)}
.kb-card.won{background:var(--ok-soft)}.kb-card.ghost{opacity:.5}

/* agente de IA */
.agent{display:grid;grid-template-columns:300px minmax(0,1fr)}
.ag-side{background:#F7F7FA;border-right:1px solid var(--line);padding:18px}
.ag-side h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}.ag-side h4+ul{margin-bottom:18px}
.ag-side ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ag-side li{background:#fff;border-radius:8px;padding:8px 10px;font-size:12.5px;display:flex;gap:8px;align-items:center;box-shadow:0 1px 2px rgba(12,16,32,.06)}
.ag-side li svg{width:14px;height:14px;color:var(--muted);flex:none}
.ag-chat{padding:20px;display:flex;flex-direction:column;gap:8px;background:#FBFBFD}
.ag-chat .msg,.ag-chat .msg-by{opacity:1;transform:none;transition:none}
.handoff{margin-top:6px;padding:10px 14px;border-radius:10px;background:var(--note);border:1px solid var(--note-line);font-size:12.5px;color:var(--note-ink)}.handoff b{font-weight:600}

/* escada de tres degraus */
.ladder{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.ladder li{border-top:1px solid var(--dark-line);padding-top:24px;display:flex;flex-direction:column}
.ladder .n{font-size:56px;font-weight:600;letter-spacing:-.04em;line-height:1;color:#A5B4FC}
.ladder h3{margin-top:18px;color:#fff}
.ladder p{margin-top:10px;color:var(--dark-muted);font-size:16px}
.ladder .tag{margin-top:auto;padding-top:22px;font-size:14.5px;font-weight:500;color:#fff;display:flex;align-items:center;gap:10px}
.ladder .tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-glow);flex:none}
.ladder.light li{border-color:var(--line-2)}.ladder.light .n{color:#8B8FF0}.ladder.light h3{color:var(--ink)}.ladder.light p{color:var(--muted)}.ladder.light .tag{color:var(--ink)}.ladder.light .tag::before{background:var(--brand)}

/* oferta e formulario */
.offer{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,88px);align-items:start}
.checks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px;font-size:17px;color:var(--text)}
.checks li{display:flex;gap:14px;align-items:flex-start}
.checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat}
.checks+p{margin-top:24px}
.panel{background:var(--bg-2);border-radius:var(--tile);padding:clamp(24px,3vw,40px)}
.price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price b{font-size:clamp(44px,4.5vw,60px);font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--ink)}.price span{color:var(--muted);font-size:16px}
.price+p{margin-top:16px;color:var(--muted);font-size:15px}
.panel form{margin-top:28px;padding-top:28px;border-top:1px solid var(--line-2)}
.panel>form:first-child{margin-top:0;padding-top:0;border-top:0}
.panel h3+p{margin-top:10px;color:var(--muted);font-size:16px}.panel .ctas{margin-top:22px}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--ink)}
input,textarea,select{width:100%;background:#fff;border:1px solid var(--line-2);color:var(--ink);border-radius:12px;padding:13px 14px;font-size:15px;font-family:var(--font);outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
input::placeholder,textarea::placeholder{color:#8A90A8}
input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat;padding-right:40px}
textarea{min-height:110px;resize:vertical}
.hp{position:absolute;left:-9999px}
form .btn{width:100%;margin-top:6px}
.form-msg{margin-top:12px;font-size:14px;font-weight:500;min-height:20px}.form-msg.ok{color:var(--ok-ink)}.form-msg.err{color:var(--warn)}
form .small{margin-top:12px;color:var(--muted)}
form .small.form-hint{margin:0 0 12px}.nw{white-space:nowrap}

/* listas em duas colunas, referencias, texto corrido */
.list-2{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px;margin:clamp(36px,5vw,56px) auto 0;max-width:1000px}
.list-2 div{border-top:1px solid var(--line);padding-top:18px}
.list-2 b{display:block;font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.list-2 p{margin-top:6px;color:var(--muted);font-size:16px}
.list-2 .checks{margin-top:14px;font-size:16px}
.list-2 h3{margin-top:6px}
.dark .list-2 div{border-color:var(--dark-line)}.dark .list-2 b{color:#fff}.dark .list-2 p{color:var(--dark-muted)}
.gray .list-2 div{border-color:var(--line-2)}
.prose{max-width:62ch;margin:clamp(24px,3vw,36px) auto 0;font-size:clamp(18px,1.4vw,21px);line-height:1.5;color:var(--text);display:grid;gap:18px;text-align:left}

/* perguntas, chamada final, contato, juridico */
.faq{max-width:760px;margin:clamp(32px,4vw,48px) auto 0}
.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:19px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:14px;height:14px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C1020' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 22px;color:var(--muted);max-width:60ch;font-size:16px}
.cta{text-align:center}.cta .lead{margin:18px auto 0}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start;text-align:left}
.contact-list{margin-top:30px;display:grid;gap:12px;justify-items:start}
.contact-list .addr{margin-top:8px;color:var(--muted);font-size:15px}
.legal{max-width:760px}.legal h1{font-size:clamp(36px,4.6vw,56px)}.legal .lead{margin-top:18px}

/* rodape e botao flutuante */
footer{background:var(--bg-2);padding:56px 0 84px;font-size:13.5px;color:var(--muted)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:28px;border-bottom:1px solid var(--line-2)}
.foot img{height:14px;width:auto;margin-bottom:14px}
.foot .foot-h{margin:0 0 12px;font-size:13.5px;color:var(--ink);font-weight:600;font-family:var(--font);line-height:1.5;letter-spacing:normal;text-wrap:wrap}
.foot nav{display:grid;gap:8px;justify-items:start}.foot a:hover{color:var(--ink)}

/* painel da operacao (heroi da home): o servico em andamento */
.ops{background:#fff;border-radius:14px;box-shadow:0 30px 80px -30px rgba(12,16,32,.4),0 2px 6px rgba(12,16,32,.06);overflow:hidden;text-align:left;font-size:13px;line-height:1.4;color:var(--ink)}
.ops-head{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line)}
.ops-logo{width:34px;height:34px;border-radius:9px}
.ops-title b{display:block;font-size:14.5px;font-weight:600}.ops-title span{font-size:12px;color:var(--muted)}
.ops-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--ok-ink);background:var(--ok-soft);padding:6px 12px;border-radius:999px}
.ops-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 7px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.ops-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;height:380px}
.ops-feed{padding:6px 24px 14px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.op{display:grid;grid-template-columns:44px 18px auto minmax(0,1fr);gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(8px);transition:opacity .3s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1)}
.op.show{opacity:1;transform:none}.op:last-child{border-bottom:0}
.op time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.op img{width:18px;height:18px}
.op p{font-size:13.5px;color:var(--ink)}.op p b{font-weight:600}
.who{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:3px 8px;border-radius:5px;white-space:nowrap}
.who.ia{background:var(--brand-soft);color:var(--brand)}.who.sia{background:#E8EAF3;color:var(--ink)}
.op.clinic p{color:var(--note-ink)}.op.clinic{background:var(--note);margin:0 -12px;padding:12px;border-radius:8px;border-bottom:0}
.ops .side dd{font-size:13px}.ops-who{display:flex;gap:6px;flex-wrap:wrap}
.ops-ch{display:flex;gap:10px}.ops-ch img{width:20px;height:20px}
.ops-rules{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ops-rules li{display:flex;gap:8px;font-size:12.5px}.ops-rules li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);margin-top:7px;flex:none}

/* tarefas do dia (linhas texto + tela) */
.srow{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center}
.srow.flip .stext{order:2}
.h-row{font-size:clamp(26px,2.8vw,38px);line-height:1.1;letter-spacing:-.02em}
.stext p{margin-top:16px;color:var(--muted);font-size:clamp(16px,1.25vw,18.5px);line-height:1.5}
.svisual{min-width:0}.svisual .app.crop .app-body{height:480px}
.svisual .shot+.handoff{margin-top:14px}
.chat-only .chat{background:#FBFBFD}.chat-only .chat-msgs{flex:none;padding:20px 20px 12px}
.chat-only .msg,.chat-only .msg-by,.chat-only .chat-note{opacity:1;transform:none;transition:none}
.chat-only .chat-note{margin-bottom:20px}
.report .rep-sent{font-size:12px;font-weight:500;color:var(--ok-ink);background:var(--ok-soft);padding:4px 10px;border-radius:999px}
.rep-list{list-style:none;margin:0;padding:8px 20px 12px}
.rep-list li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink)}
.rep-list li:last-child{border-bottom:0}
.rep-list li span{width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.handoff.solo{background:var(--note);border:1px solid var(--note-line);border-radius:12px;padding:14px 18px;font-size:13.5px;color:var(--note-ink)}

/* fotos (geradas no Higgsfield em 15/09/2026, tratadas com Pillow) */
.photo{border-radius:20px;overflow:hidden;background:var(--bg-2)}
.photo img{width:100%;height:auto;display:block}
.offer .photo{margin-bottom:28px;aspect-ratio:3/2}
.photo-bg{background-size:cover;background-position:center;position:relative}
.photo-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(12,16,32,.78),rgba(12,16,32,.86))}
.photo-bg .wrap{position:relative}

/* heroi com video de fundo (inicial) e secao do comercial */
.hero.has-video{position:relative;isolation:isolate;color:#fff}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--dark)}
.hero-media video{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,16,32,.62) 0%,rgba(12,16,32,.58) 55%,rgba(12,16,32,.9) 100%)}
.hero.has-video h1{color:#fff}.hero.has-video .lead{color:#D7DAE6}.hero.has-video .link{color:#fff}
.hero.has-video .stage{background:transparent}
.credit{text-align:center;margin-top:14px;font-size:12.5px}

/* icones: tile com degrade da marca (listas, degraus, colunas) e tile suave (perguntas, itens de lista, contato, rodape) */
.li-ic{display:flex;width:52px;height:52px;border-radius:15px;background:linear-gradient(145deg,#8B5CF6 0%,#6366F1 55%,#4338CA 100%);color:#fff;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 10px 24px -10px rgba(79,70,229,.55),inset 0 1px 0 rgba(255,255,255,.22)}
.li-ic svg{width:24px;height:24px}
.ladder .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ladder .li-ic{margin-bottom:0}
.checks.icons{gap:14px}
.checks.icons li{gap:12px}.checks.icons li::before{display:none}
.checks.icons i{flex:none;width:30px;height:30px;border-radius:9px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-top:-2px}
.checks.icons i svg{width:16px;height:16px}
.gray .checks.icons i{background:#fff;box-shadow:0 1px 2px rgba(12,16,32,.08)}
.faq .fq-ic{flex:none;width:38px;height:38px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.faq .fq-ic svg{width:18px;height:18px}
.gray .faq .fq-ic{background:#fff;box-shadow:0 1px 2px rgba(12,16,32,.08)}
.faq summary>span:not(.fq-ic){flex:1}
.faq summary:hover{color:var(--brand)}
.faq details[open] .fq-ic{background:var(--brand);color:#fff;box-shadow:none}
.faq.icons p{padding-left:58px}
.btn svg{width:18px;height:18px}
.contact-list .addr{display:flex;gap:10px;align-items:flex-start}.contact-list .addr svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--brand)}
.foot nav a{display:inline-flex;align-items:center;gap:8px}.foot nav a svg,.foot nav a img{width:15px;height:15px;flex:none;margin:0}.foot nav a svg{color:var(--brand)}

/* diagnostico instantaneo no navegador */
.diag{max-width:920px;margin:clamp(36px,5vw,56px) auto 0}
.diag [hidden]{display:none!important}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:clamp(32px,5vw,56px) 24px;background:#fff;border:1.5px dashed var(--line-2);border-radius:var(--tile);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 6px rgba(79,70,229,.06)}
.drop .li-ic{margin-bottom:8px}
.drop b{font-size:clamp(19px,2vw,24px);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.drop>span:not(.li-ic):not(.btn){color:var(--muted);font-size:15px;max-width:40ch}
.drop .btn{margin-top:14px;pointer-events:none}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* foco de teclado no #diag-file (o campo e invisivel): o contorno vai para a area de soltar (juncao E6; a falha vinha da v4) */
.drop:has(input:focus-visible){border-color:var(--brand);outline:2px solid var(--brand);outline-offset:3px}
.diag-status{margin-top:12px;text-align:center;font-size:14px;font-weight:500;color:var(--muted);min-height:20px}.diag-status.err{color:var(--warn)}
.how{max-width:560px;margin:8px auto 0}.how summary{cursor:pointer;font-weight:500;color:var(--ink);font-size:15px;list-style:none;display:flex;align-items:center;justify-content:center;gap:8px}.how summary::-webkit-details-marker{display:none}.how summary::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand)}
.how ol{margin:12px 0 0;padding-left:20px;color:var(--muted);font-size:15px;display:grid;gap:6px;text-align:left}
.diag-in .small{margin-top:20px;text-align:center}.diag-in .small a{color:var(--brand);font-weight:500}
.diag-foot{margin-top:24px;display:flex;justify-content:center}
.diag-ticket{display:flex;flex-direction:column;align-items:center;gap:8px}.diag-ticket label{margin:0}
.money{display:flex;align-items:center;background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:0 14px;width:200px}
.money span{color:var(--muted);font-size:15px}.money input{border:0;padding:12px 8px;font-size:17px;font-weight:600;background:transparent;box-shadow:none}
.money:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.diag-hero{text-align:center;padding:clamp(28px,4vw,44px) 24px;background:#fff;border-radius:var(--tile);box-shadow:0 24px 60px -28px rgba(12,16,32,.25)}
.diag-hero b{display:block;font-size:clamp(48px,7vw,88px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--brand)}
.diag-hero span{display:block;margin-top:12px;font-size:clamp(17px,1.6vw,21px);color:var(--muted)}
.diag-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.diag-kpis div{background:#fff;border-radius:18px;padding:22px 24px}
.diag-kpis b{display:block;font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.diag-kpis span{display:block;margin-top:8px;font-size:14.5px;color:var(--muted)}
#ver-agora .diag-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px}
#ver-agora .diag-list li{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,auto) auto;gap:12px 20px;align-items:center;background:#fff;border-radius:14px;padding:14px 18px}
#ver-agora .diag-list .nm b{display:block;font-weight:600;color:var(--ink);font-size:15px}#ver-agora .diag-list .nm small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
#ver-agora .diag-list .tg{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:520px}
#ver-agora .diag-list .tg i{font-style:normal;font-size:12px;font-weight:500;padding:4px 9px;border-radius:6px;background:var(--bg-2);color:var(--text)}
#ver-agora .diag-list .tg i.bad{background:var(--warn-soft);color:var(--warn)}#ver-agora .diag-list .tg i.ok{background:var(--ok-soft);color:var(--ok-ink)}
#ver-agora .diag-list .sw{background:none;border:0;color:var(--muted);font-size:12.5px;cursor:pointer;font-family:var(--font);text-decoration:underline;padding:0}
.diag-note{margin-top:18px;text-align:center;max-width:64ch;margin-left:auto;margin-right:auto}
.diag-out .ctas,.diag-manual .ctas{justify-content:center;margin-top:24px}
.diag-manual{background:#fff;border-radius:var(--tile);padding:clamp(24px,4vw,40px);display:grid;gap:20px;max-width:640px;margin:0 auto}
.diag-q label{font-size:15px}.diag-q label b{color:var(--brand)}.diag-q input[type=number]{max-width:200px}
.diag-q input[type=range]{width:100%;padding:0;-webkit-appearance:auto;appearance:auto;accent-color:var(--brand);border:0;box-shadow:none;background:transparent}
.diag-manual-out{text-align:center;padding-top:8px}.diag-manual-out b{display:block;font-size:clamp(40px,5vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--brand)}.diag-manual-out span{display:block;margin-top:10px;color:var(--muted);font-size:15px;max-width:44ch;margin-left:auto;margin-right:auto}

/* planos da operacao (inicial, secao #planos) e logo do ChatSIA no heroi da pagina do produto */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(40px,5vw,64px);text-align:left}
.plan{background:var(--bg-2);border-radius:var(--tile);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column}
.gray .plan{background:#fff}
.plan h3{font-size:22px;letter-spacing:-.02em}
.plan .price{margin-top:14px}.plan .price b{font-size:clamp(38px,3.6vw,48px)}
.plan .plan-year{margin-top:6px;font-size:14px;color:var(--muted)}
.plan .tagline{margin-top:12px;font-size:16px;color:var(--text);min-height:4.5em}
.plans-bridge{margin-top:20px;text-align:center;color:var(--muted);font-size:15px}.plans-bridge a{color:var(--brand);font-weight:500}
.plan .checks{margin-top:22px;font-size:15px;gap:10px}
#planos .ctas{margin-top:28px}

/* marca ChatSIA no topo e no rodape (ADR-005) */
.brand img.cs{height:26px}.foot img.cs{height:24px}
/* abas dos planos da inicial: sem JS as duas listas aparecem uma embaixo da outra */
.plan-tabs{display:none;gap:6px;margin:clamp(32px,4vw,48px) auto 0;padding:6px;background:var(--bg-2);border-radius:999px;width:max-content;max-width:100%}
.tabs-on .plan-tabs{display:flex}
.plan-tabs button{border:0;background:transparent;border-radius:999px;padding:12px 24px;cursor:pointer;font:inherit;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.25;transition:background .2s,box-shadow .2s}
.plan-tabs button b{font-size:16px;font-weight:600;color:var(--ink)}.plan-tabs button span{font-size:13px}.plan-tabs button i{font-style:normal}
.plan-tabs button[aria-selected="true"]{background:#fff;box-shadow:0 1px 3px rgba(12,16,32,.12),0 10px 24px -14px rgba(12,16,32,.3)}
.plan-tabs button[aria-selected="true"] b{color:var(--brand)}
.plan-tabs button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.plan-panel{margin-top:clamp(40px,5vw,56px)}.tabs-on .plan-panel{margin-top:clamp(24px,3vw,36px)}
.plan-panel-title{text-align:center;font-size:24px;letter-spacing:-.02em}.tabs-on .plan-panel-title{display:none}
.plan-panel-lead{text-align:center;max-width:740px;margin:10px auto 0;color:var(--muted);font-size:17px}
.plan-panel .plans{margin-top:28px}
/* creditos de IA */
.credits{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);align-items:start;margin-top:clamp(40px,5vw,64px)}
.credit-list{display:grid;gap:26px}
.credit-list>div{display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:4px;align-items:start}
.credit-list .li-ic{grid-row:span 2}.credit-list b{font-size:18px;font-weight:600;color:var(--ink);padding-top:4px}
.credit-list p{margin:0;color:var(--text);font-size:16px}
.credit-card{background:#fff;border-radius:var(--tile);padding:clamp(24px,3vw,36px)}
.credit-card h3{font-size:20px;letter-spacing:-.01em}
.credit-card .credit-grp{margin:16px 0 8px;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.credit-card dl{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:0;font-size:15.5px}
.credit-card dt{color:var(--text)}.credit-card dd{margin:0;font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.credit-card dl+h3{margin-top:28px}.credit-card h3+dl{margin-top:14px}.credit-card .small{margin-top:14px}

/* Resposta na hora: celular do cliente ao lado da janela do ChatSIA (heroi da inicial) */
.duo{position:relative}.duo .app{margin-right:150px}
.phone{position:absolute;right:0;bottom:-40px;width:252px;height:520px;padding:9px;border-radius:44px;background:#0E0F1A;box-shadow:0 44px 90px -34px rgba(14,15,26,.6),inset 0 0 0 1px rgba(255,255,255,.08);z-index:3}
.ph-screen{height:100%;border-radius:36px;overflow:hidden;background:#F4F5FA;display:flex;flex-direction:column;text-align:left}
.ph-head{display:flex;align-items:center;gap:8px;padding:34px 12px 10px;background:#fff;border-bottom:1px solid var(--line)}
.ph-back{color:var(--brand);display:flex}
.ph-av{width:32px;height:32px;border-radius:50%;background:#E0E7FF;color:var(--brand);font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none}
.ph-who b{display:block;font-size:13.5px;color:var(--ink);line-height:1.2}.ph-who small{font-size:11.5px;color:var(--ok-ink)}
.ph-msgs{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:12px 10px;overflow:hidden}
.pm{max-width:84%;padding:8px 11px;border-radius:15px;font-size:12.5px;line-height:1.42;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.pm.show{opacity:1;transform:none}
.pm.me{align-self:flex-end;background:#E0E7FF;color:var(--ink);border-bottom-right-radius:4px}
.pm.them{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:4px;box-shadow:0 1px 2px rgba(14,15,26,.07)}
.pm time{display:block;font-size:10px;color:var(--muted);margin-top:2px;text-align:right;font-variant-numeric:tabular-nums}
.ph-input{margin:8px 10px 12px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:999px;padding:8px 8px 8px 14px;font-size:12px;color:var(--muted)}
.ph-input i{width:24px;height:24px;border-radius:50%;background:var(--brand)}

/* v5 (02/10/2026): sairam a luz que segue o mouse nos degraus e os estados escondidos do effects.js (classe fx, titulo
   fatiado em palavras). Nada comeca escondido; o movimento mora no v5.js. */

@media (max-width:1000px){
  .app-body{grid-template-columns:56px 250px minmax(0,1fr);height:560px}.side{display:none}.ops-body{grid-template-columns:minmax(0,1fr);height:380px}
  .srow{grid-template-columns:1fr}.srow.flip .stext{order:0}.app.crop .app-body{grid-template-columns:260px minmax(0,1fr);height:500px}
  .offer,.contact,.foot,.list-2,.ladder,.plans,.credits{grid-template-columns:1fr}.plan .tagline{min-height:0}.ladder{gap:28px}
  .agent{grid-template-columns:1fr}.ag-side{border-right:0;border-bottom:1px solid var(--line)}
  .duo .app{margin-right:110px}.phone{width:220px;height:450px;border-radius:38px}.ph-screen{border-radius:31px}
  .cv-filters{gap:2px}.cv-filters i{padding:5px 8px}
}
/* S49 (revisao 01/10/2026): de 761 a 1000 px o celular do heroi cobria a conversa; some e a janela usa a largura toda */
@media (max-width:1000px) and (min-width:761px){.duo .phone{display:none}.duo .app{margin-right:0}}
@media (max-width:760px){
  :root{--overlap:120px}
  .menu{display:none;position:absolute;top:56px;left:0;right:0;flex-direction:column;background:#fff;padding:18px 24px 22px;border-bottom:1px solid var(--line);gap:16px;align-items:flex-start;font-size:16px}
  .menu.open{display:flex}.burger{display:block}
  .app-body{grid-template-columns:minmax(0,1fr);height:480px}.app[data-demo] .rail,.app[data-demo] .cv-pane{display:none}
  .app.crop .app-body{grid-template-columns:minmax(0,1fr);height:460px}.app.crop .chat{display:none}
  .ops-body{height:440px}.ops-feed{padding:6px 16px 12px}.op{grid-template-columns:40px 16px minmax(0,1fr);gap:8px}.op .who{display:none}.ops-title span{display:none}
  section{padding:64px 0}.hero{padding-top:48px}
  form .row{grid-template-columns:1fr}
  .duo .app[data-demo]{display:none}.duo .app{margin-right:0}.phone{position:relative;right:auto;bottom:auto;margin:calc(var(--overlap) * -1) auto 0;width:262px;height:520px;border-radius:44px}.ph-screen{border-radius:36px}
  .plan-tabs{width:100%}.plan-tabs button{flex:1;padding:10px 8px}.plan-tabs button b{font-size:14.5px}.plan-tabs button span{font-size:12px}.plan-tabs button i{display:none}
  .btn{font-size:16px}.lead{font-size:18px}
  .ladder .n{font-size:44px}
  .li-ic{width:48px;height:48px;border-radius:14px}.faq.icons p{padding-left:0}
  .tile{padding:16px;border-radius:18px}
  .diag-kpis{grid-template-columns:1fr}#ver-agora .diag-list li{grid-template-columns:1fr;gap:8px}#ver-agora .diag-list .tg{justify-content:flex-start}#ver-agora .diag-list .sw{text-align:left}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ===================== v4 (01/10/2026): ChatSIA principal, roteiro em docs/v4/roteiro-site-v4.md ===================== */
:root{--ink:#15151F;--dark:#0B0F20;--dark-2:#141A33;--dark-line:#232A4A;--dark-text:#F2F4FB;--dark-muted:#AAB4D8;--appbg:#EEF0F6}
h1{font-size:clamp(36px,5.2vw,64px);line-height:1.04;letter-spacing:-.025em}
h2{font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.02em}
h3{font-size:clamp(20px,1.9vw,26px);line-height:1.2;letter-spacing:-.01em}
.lead{font-size:clamp(18px,1.5vw,22px)}
.dark h1,.dark h2,.dark h3{color:var(--dark-text)}
/* botoes: solido indigo; o degrade fica so no "Testar 7 dias gratis" */
.btn{background:var(--brand)}.btn:hover{background:var(--brand-hover)}
.btn.grad{background:linear-gradient(135deg,#7C3AED,#4F46E5);box-shadow:0 10px 24px -12px rgba(79,70,229,.7)}.btn.grad:hover{background:linear-gradient(135deg,#6D28D9,#4338CA)}
.btn.white{background:#fff;color:var(--ink)}.btn.white:hover{background:#E9EBF5}
/* menu */
.nav .wrap{height:64px}.brand img.cs{height:26px}
.menu{gap:26px}.menu .menu-in{margin-left:4px}.menu .menu-cta-m{display:none}
/* celular: "Testar grátis" pequeno e sólido sempre no topo, ao lado do ícone de menu; some quando o menu abre (lá fica o degradê) */
.nav .nav-cta-m{display:none}
@media (max-width:760px){
  .nav .nav-cta-m{display:inline-flex;margin-left:auto;margin-right:6px;padding:9px 14px}
  .menu.open ~ .nav-cta-m{visibility:hidden}
}
/* heroi */
.hero-note{margin-top:14px;font-size:14px;color:var(--muted)}
.hero.has-video .hero-note{color:#C9CEE0}
.demo-cap,.demo figcaption{margin-top:14px;text-align:center;font-size:12.5px;color:var(--muted)}
figure.demo{margin:0}
.dark .demo figcaption,.hero.has-video .demo-cap{color:var(--dark-muted)}
.note{margin:22px auto 0;font-size:14px;line-height:1.55;color:var(--muted);max-width:820px;text-align:center}
.split .note{text-align:left;margin-left:0}
.dark .note{color:var(--dark-muted)}
.plan-line{margin-top:12px;font-size:14px;font-weight:500;color:var(--brand)}
.dark .plan-line{color:var(--brand-glow)}
/* texto de um lado, recorte do outro */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:center}
.split.flip>div:first-child{order:2}
.split .head{text-align:left;margin:0}.split .head .lead{margin-left:0}
/* fileira de canais */
.chan-row{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;max-width:1100px}
.chan-row li{background:#fff;border-radius:18px;padding:22px 14px;text-align:center;box-shadow:0 1px 2px rgba(12,16,32,.05),0 12px 28px -20px rgba(12,16,32,.28)}
.chan-row img{width:34px;height:34px;margin:0 auto 12px}
.chan-row b{display:block;font-size:16px;color:var(--ink);font-weight:600}
.chan-row small{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--muted)}
/* janela no visual H do painel (barra de icones clara, conteudo em cartao) */
.app{border-radius:16px}
.app-body{background:var(--appbg);gap:8px;padding:8px;grid-template-columns:52px 290px minmax(0,1fr) 260px}
.app.crop .app-body{grid-template-columns:310px minmax(0,1fr)}
.rail{background:transparent;padding:6px 0}
.rail i{color:#7A8099}.rail i.on{background:#fff;color:var(--brand);box-shadow:0 1px 3px rgba(12,16,32,.1)}
.cv-pane,.chat,.side{border:0;border-radius:12px;background:#fff;overflow:hidden}
.cv-head b,.kb-head b,.chat-head .c-name,.s-name,.ops-title b{font-family:var(--display);font-weight:600}
.c-status.done{color:#0F7A40}
.msg.note{background:var(--note);border:1px solid var(--note-line);color:var(--note-ink);align-self:center;font-size:12px;border-radius:10px;max-width:92%}
.kb-val{font-style:normal;grid-column:2/4;font-size:11.5px;font-weight:600;color:var(--ink);margin-top:-4px}
.shot{border-radius:16px}
/* R3 mensagens programadas */
.sc-list{list-style:none;margin:0;padding:6px 16px 10px}
.sc-list li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line)}
.sc-list li:last-child{border-bottom:0}
.sc-ic{width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center}.sc-ic svg{width:17px;height:17px}
.sc-list b{display:block;font-size:13.5px;color:var(--ink);font-weight:600}.sc-list small{font-size:12px;color:var(--muted)}
.sc-st{font-style:normal;font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:999px;white-space:nowrap}
.sc-st.ag{background:var(--brand-soft);color:var(--brand)}.sc-st.ok{background:var(--ok-soft);color:#0F7A40}
/* R4 relatorio */
.r4-body{padding:16px 20px 18px;display:grid;gap:16px}
.r4-chart{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:end;height:130px}
.r4-chart div{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.r4-chart i{width:100%;max-width:34px;border-radius:7px 7px 3px 3px}
.r4-chart span{font-size:11px;color:var(--muted)}
.r4-tab{width:100%;border-collapse:collapse;font-size:12.5px}
.r4-tab th{text-align:left;font-weight:500;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--line)}
.r4-tab td{padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.r4-tab td:last-child,.r4-tab th:last-child{text-align:right;font-variant-numeric:tabular-nums}
/* R6 saldo de creditos */
.cred .rep-sent{font-size:12px;font-weight:500;color:var(--brand);background:var(--brand-soft);padding:4px 10px;border-radius:999px}
.cr-body{padding:20px}
.cr-lab{font-size:12px;color:var(--muted)}
.cr-num{margin-top:4px;font-size:13px;color:var(--muted)}.cr-num b{font-family:var(--display);font-size:30px;color:var(--ink);font-weight:600;margin-right:4px;font-variant-numeric:tabular-nums}
.cr-bar{margin-top:12px;height:10px;border-radius:999px;background:#EEF0F6;overflow:hidden}.cr-bar i{display:block;height:100%;border-radius:999px}
.cr-dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:16px 0;font-size:12.5px}.cr-dl dt{color:var(--muted)}.cr-dl dd{margin:0;text-align:right;color:var(--ink);font-weight:500}
.cred .btn{pointer-events:none}
/* R7 balao do chat do site */
.wchat{max-width:380px;margin:0 auto;background:#F4F5FA}
.wc-head{display:flex;gap:10px;align-items:center;padding:14px 16px;background:var(--brand);color:#fff}
.wc-head img{width:34px;height:34px;border-radius:9px;background:#fff}
.wc-head b{display:block;font-size:14px}.wc-head small{font-size:12px;opacity:.85}
.wc-msgs{display:flex;flex-direction:column;gap:8px;padding:16px;text-align:left}
.wchat .ph-input{margin:0 14px 14px}
/* R8 chat interno */
.team{display:grid;grid-template-columns:150px 1fr}
.tm-side{background:#F7F7FA;padding:16px 12px;display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.tm-side b{font-size:11px;color:var(--muted);font-weight:600;margin:8px 0 4px}.tm-side b:first-child{margin-top:0}
.tm-side span{padding:6px 8px;border-radius:8px;color:var(--text)}.tm-side span.on{background:#fff;color:var(--brand);font-weight:600;box-shadow:0 1px 2px rgba(12,16,32,.08)}
.tm-main{padding:18px;display:grid;gap:14px}
.tm-msg{display:flex;gap:10px}.tm-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex:none}
.tm-msg b{font-size:13px}.tm-msg p{font-size:13px;color:var(--text);margin-top:2px}.tm-msg small{display:block;margin-top:4px;font-size:11.5px;color:var(--brand)}
.tm-poll{margin-left:40px;border-radius:12px;background:#F7F7FA;padding:12px 14px;display:grid;gap:8px;font-size:12.5px}
.tm-poll div{display:grid;grid-template-columns:52px 1fr 20px;gap:8px;align-items:center}
.tm-poll i{height:8px;border-radius:999px;background:var(--brand-tint)}.tm-poll em{font-style:normal;text-align:right;color:var(--muted)}
/* R9 celular com o app */
.phone.static{position:relative;right:auto;bottom:auto;margin:0 auto}
.ph-home{background:#E6E9F7;padding:40px 12px 12px;justify-content:flex-start;gap:22px}
.ph-notif{display:flex;gap:10px;background:rgba(255,255,255,.94);border-radius:16px;padding:12px;box-shadow:0 10px 24px -14px rgba(12,16,32,.4)}
.ph-notif img{width:30px;height:30px;border-radius:8px;flex:none}.ph-notif b{display:block;font-size:12px;color:var(--ink)}.ph-notif small{font-size:12px;color:var(--text);line-height:1.35}
.ph-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 6px}
.ph-app{display:flex;flex-direction:column;align-items:center;gap:4px}.ph-app img{width:48px;height:48px;border-radius:12px;box-shadow:0 6px 14px -8px rgba(12,16,32,.4)}.ph-app small{font-size:10.5px;color:var(--ink)}
.phone-wrap .demo{display:flex;flex-direction:column;align-items:center}
/* listas com icone (agente, creditos) */
.credit-list{display:grid;gap:22px}
.credit-list>div{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:3px;align-items:start}
.credit-list .li-ic{grid-row:span 2;width:44px;height:44px;border-radius:13px;margin:0}.credit-list .li-ic svg{width:20px;height:20px}
.credit-list b{font-size:17px;font-weight:600;color:var(--ink);padding-top:2px}.credit-list p{margin:0;color:var(--text);font-size:16px}
.dark .credit-list b{color:var(--dark-text)}.dark .credit-list p{color:var(--dark-muted)}
.split .credit-list{margin-top:28px}
.agent-cta{display:flex;align-items:center;gap:18px;margin-top:30px}
.agent-cta.center{justify-content:center;margin-top:clamp(36px,5vw,56px)}
.agent-cta .small{margin-top:8px;color:var(--muted);max-width:34ch}
.dark .agent-cta .small{color:var(--dark-muted)}
.mascot{width:104px;height:104px;flex:none}
/* planos */
.plan{position:relative;background:#fff;box-shadow:0 1px 2px rgba(12,16,32,.06),0 18px 44px -28px rgba(12,16,32,.32)}
.plan.featured{box-shadow:0 0 0 2px var(--brand),0 24px 48px -28px rgba(79,70,229,.55);transform:translateY(-8px)}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-family:var(--font);font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:999px;white-space:nowrap;letter-spacing:0}
.plan-badge.sm{position:static;transform:none;display:inline-block;margin-left:8px;font-size:11px;padding:3px 8px;vertical-align:middle}
.plan-cta{margin-top:auto;padding-top:24px}.plan-cta .btn{width:100%}
.plans-line{margin-top:30px;text-align:center;font-size:16px;color:var(--text)}
.hero .plan-tabs{margin-top:34px}
.hero .plan-panel{text-align:left}.hero .plan-panel .plan-panel-lead,.hero .plan-panel .note,.hero .plan-panel .plans-line{text-align:center}
/* comparar */
.cmp-all{max-width:900px;margin:0 auto 28px;text-align:center;font-size:15px;line-height:1.75;color:var(--text)}.cmp-all b{color:var(--ink)}
.cmp{width:100%;max-width:1000px;margin:0 auto;border-collapse:separate;border-spacing:0;background:#fff;border-radius:20px;font-size:15px;box-shadow:0 1px 2px rgba(12,16,32,.06)}
.cmp th,.cmp td{padding:14px 18px;text-align:center;border-bottom:1px solid var(--line);vertical-align:middle}
.cmp th[scope=row]{text-align:left;font-weight:400;color:var(--text);width:40%}
.cmp thead th{position:sticky;top:64px;background:#fff;z-index:2;font-family:var(--display);font-size:18px;font-weight:600;color:var(--ink);padding:18px}
.cmp thead th:first-child{border-top-left-radius:20px}.cmp thead th:last-child{border-top-right-radius:20px}
.cmp tr.grp th{text-align:left;background:#F7F8FC;font-size:13px;font-weight:600;color:var(--ink);padding:10px 18px}
.cmp td{color:var(--ink);font-variant-numeric:tabular-nums}.cmp td.no{color:var(--muted)}
.cmp td.yes i{display:inline-flex;color:var(--brand)}.cmp td.yes i svg{width:18px;height:18px}
.cmp td.yes small{display:block;font-size:12px;color:var(--muted)}
.cmp sup{font-size:11px;color:var(--muted)}
.cmp tfoot td{border-bottom:0;padding:18px}
.cmp-pick{display:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* creditos */
.credit-card .cota2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.credit-card .cota2+h3{margin-top:28px}
.pk{width:100%;border-collapse:collapse;margin-top:12px;font-size:15px}
.pk th{text-align:left;font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--line)}
.pk td{padding:9px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;color:var(--ink)}
.pk td:not(:first-child),.pk th:not(:first-child){text-align:right}
.credits .demo{margin-top:20px}
.dark .credit-card{color:var(--text)}.dark .credit-card h3{color:var(--ink)}.dark .person h3{color:var(--ink)}
/* blocos */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.tiles.two{grid-template-columns:1fr 1fr;max-width:1000px;margin-left:auto;margin-right:auto}
.tiles>div{background:#fff;border-radius:20px;padding:26px;box-shadow:0 1px 2px rgba(12,16,32,.05),0 14px 34px -24px rgba(12,16,32,.3)}
.tiles .li-ic{width:44px;height:44px;border-radius:13px;margin-bottom:14px}.tiles .li-ic svg{width:20px;height:20px}
.tiles b{display:block;font-size:17px;font-weight:600;color:var(--ink)}.tiles p{margin-top:6px;font-size:15.5px;color:var(--muted);line-height:1.5}
/* recursos */
.jump{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:28px}.jump a{color:var(--brand);font-weight:500;font-size:16px}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:34px 56px;max-width:1040px;margin:clamp(40px,5vw,60px) auto 0;text-align:left}
.feat h3{font-family:var(--font);font-size:18px;font-weight:600;letter-spacing:-.005em}
.feat p{margin-top:6px;font-size:16px;color:var(--text);line-height:1.5}
.feat .meta{margin-top:6px;font-size:14px;color:var(--muted)}.feat .meta span{color:var(--ink);font-weight:500}
.dark .feat h3{color:var(--dark-text)}.dark .feat p{color:#D3D8EC}.dark .feat .meta{color:var(--dark-muted)}.dark .feat .meta span{color:var(--dark-text)}
.dark .head a{color:var(--brand-glow)}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
/* confianca */
.trust{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.trust li{display:flex;gap:12px;align-items:flex-start;font-size:17px;color:var(--text)}
.trust li span{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center}
.trust li span svg{width:14px;height:14px}
.trust.two{grid-template-columns:1fr 1fr;gap:18px 40px;max-width:1000px;margin:0 auto}
/* chamada final */
.end .end-ic{margin:0 auto 22px;width:64px;height:64px;border-radius:16px}
.dark .end-ic{width:auto;height:33px;border-radius:0}
.dark.cta .end-ic{margin:0 auto 22px}
/* a SIA */
.person{max-width:820px;margin:clamp(36px,5vw,52px) auto 0;background:#fff;border-radius:20px;padding:26px 28px;text-align:left}
section:not(.gray) .person{background:var(--bg-2)}
.person h3{font-size:20px}.person p{margin-top:8px;color:var(--text);font-size:16px}.person a{color:var(--brand);font-weight:500}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 40px}.cols3 h3{font-size:20px}
.dots{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.dots li{position:relative;padding-left:18px;font-size:16px;color:var(--text);line-height:1.45}
.dots li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.diag-wrap{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:start;max-width:1100px;margin:0 auto}
.diag-wrap .diag{margin:0;max-width:none}
.diag-photo{aspect-ratio:3/4}.diag-photo img{height:100%;object-fit:cover}
.diag-foot{display:grid;grid-template-columns:auto minmax(220px,320px);gap:18px 32px;justify-content:center;align-items:end}.diag-foot .diag-q{margin-top:0}.diag-foot .diag-ticket{align-items:flex-start}.diag-foot .small{grid-column:1/-1;text-align:center;max-width:640px;margin:2px auto 0}
/* tres perguntas: o ticket sobe para junto das perguntas (diag.js, placeTicket) e o rodape fica so com o fechamento */
.diag-manual .diag-ticket{align-items:flex-start}
@media (min-width:761px){.diag-foot.no-ticket{grid-template-columns:minmax(220px,320px)}}
.diag-manual,.diag-out{scroll-margin-top:88px}
.how-start{margin-top:24px;font-size:16px;color:var(--text)}
.sec-logo{margin:0 auto 18px;height:26px;width:auto}
.plans-bridge{margin-top:22px;text-align:center;font-size:15px;color:var(--muted)}.plans-bridge a{color:var(--brand);font-weight:500}
/* rodape claro, logo no centro, tres colunas curtas */
footer{background:var(--bg);border-top:1px solid var(--line);padding:56px 0 104px;font-size:13px}
.foot-brand{text-align:center;margin-bottom:34px}.foot-brand img{height:24px;width:auto;margin:0 auto}.foot-brand p{margin-top:8px;font-size:13px;color:var(--muted)}
.foot{grid-template-columns:repeat(3,auto);justify-content:center;gap:28px 96px;border-bottom:1px solid var(--line);padding-bottom:30px}
.foot .foot-h{font-size:13px}.foot img{height:15px;width:15px;margin:0}
.foot-note{font-size:12.5px;color:var(--muted);max-width:24ch;line-height:1.45}
.foot-legal{padding-top:22px;text-align:center;font-size:12.5px;color:var(--muted)}.foot-legal a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}.foot-legal a:hover{color:var(--ink)}
/* erro */
.err{text-align:center}.err .mascot.big{width:112px;height:112px;margin:0 auto 24px}

@media (max-width:1000px){
  .split,.diag-wrap{grid-template-columns:1fr}.split.flip>div:first-child{order:0}
  .chan-row{grid-template-columns:repeat(3,1fr)}
  .tiles,.tiles.two,.cols3,.trust.two,.feats,.credit-card .cota2{grid-template-columns:1fr}
  .diag-photo{display:none}
  .plan.featured{transform:none}
  .app-body{grid-template-columns:52px 250px minmax(0,1fr)}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .menu .menu-cta{display:none}.menu .menu-cta-m{display:flex;width:100%}
  .chan-row{grid-template-columns:1fr 1fr;gap:12px}
  .cmp-pick{display:flex;justify-content:center;gap:6px;margin:0 auto 14px;padding:6px;background:#fff;border-radius:999px;width:max-content;max-width:100%}
  .cmp-pick button{border:0;background:transparent;border-radius:999px;padding:9px 14px;font:inherit;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer}
  .cmp-pick button.on{background:var(--brand);color:#fff}
  .cmp th[scope=row]{width:auto}.cmp th,.cmp td{padding:12px 12px}.cmp thead th{font-size:16px}
  .cmp[data-col="1"] thead th:nth-child(3),.cmp[data-col="1"] thead th:nth-child(4),.cmp[data-col="1"] tbody td:nth-child(3),.cmp[data-col="1"] tbody td:nth-child(4),.cmp[data-col="1"] tfoot td:nth-child(3),.cmp[data-col="1"] tfoot td:nth-child(4),
  .cmp[data-col="2"] thead th:nth-child(2),.cmp[data-col="2"] thead th:nth-child(4),.cmp[data-col="2"] tbody td:nth-child(2),.cmp[data-col="2"] tbody td:nth-child(4),.cmp[data-col="2"] tfoot td:nth-child(2),.cmp[data-col="2"] tfoot td:nth-child(4),
  .cmp[data-col="3"] thead th:nth-child(2),.cmp[data-col="3"] thead th:nth-child(3),.cmp[data-col="3"] tbody td:nth-child(2),.cmp[data-col="3"] tbody td:nth-child(3),.cmp[data-col="3"] tfoot td:nth-child(2),.cmp[data-col="3"] tfoot td:nth-child(3){display:none}
  .team{grid-template-columns:1fr}.tm-side{display:none}
  .agent-cta{flex-direction:column;text-align:center}
  .diag-foot{grid-template-columns:1fr;justify-items:stretch}.diag-foot .diag-ticket{align-items:center}
  .mascot{width:88px;height:88px}
  .foot{grid-template-columns:1fr;gap:24px;justify-items:center;text-align:center}.foot nav{justify-items:center}
  .app.crop .app-body{grid-template-columns:minmax(0,1fr)}
}

/* ===================== revisao visual de 01/10/2026 (HANDOVER secao 29, area visual, S47 a S66) ===================== */
/* S47 funil (R2): 4 etapas sempre visiveis, 2x2 quando o espaco e estreito (e sempre na coluna da sia.html) */
@media (max-width:1000px){.kb-cols{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}}
.svisual .kb-cols{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
@media (max-width:640px){.kb-cols{gap:10px;padding:12px}.kb-card{grid-template-columns:30px minmax(0,1fr);gap:8px;padding:9px 10px}.kb-card .kb-ch,.kb-card>span:empty{display:none}.kb-card b{white-space:normal}.kb-val{grid-column:2/3}}
/* S51 botoes do pe da tabela de comparacao numa linha so */
.cmp tfoot .btn{white-space:nowrap}
@media (max-width:900px){.cmp tfoot td{padding:14px 8px}.cmp tfoot .btn{padding:9px 12px;font-size:13px}}
/* S53 link dentro de nota e texto pequeno: indigo, como .plans-bridge a e .diag-in .small a (e as respostas das perguntas) */
.note a,.small a,.faq p a{color:var(--brand);font-weight:500}
.note a:hover,.small a:hover,.faq p a:hover{color:var(--brand-hover)}
.dark .note a,.dark .small a,.dark .faq p a{color:var(--brand-glow)}
/* S55 janela recortada: onde a conversa e cortada em cima, ela some aos poucos, como conversa rolada */
.svisual .app.crop .chat-msgs,.narrow .app.crop .chat-msgs{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px);mask-image:linear-gradient(to bottom,transparent 0,#000 56px)}
@media (max-width:1039px){.app.crop .chat-msgs{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px);mask-image:linear-gradient(to bottom,transparent 0,#000 56px)}}
.composer .input span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* S56 menu do celular: itens alinhados e painel de altura cheia (o heroi nao aparece por baixo) */
@media (max-width:760px){.menu .menu-in{margin-left:0}.menu.open{min-height:calc(100dvh - 56px)}}
/* S57 pilula "em operacao" numa linha */
.ops-live{white-space:nowrap;flex:none}
/* S58 nota da linha de texto alinhada ao paragrafo */
.stext .note{text-align:left;margin-left:0}
/* S59 a seta do link fica junto da ultima palavra (link() no build.py) */
.link .nw svg{margin-left:3px;vertical-align:-3px}
/* S60 frase de apoio sem palavra sozinha na ultima linha */
.lead{text-wrap:pretty}
@media (min-width:761px){.head .lead,.hero .lead,.cta .lead,.center .lead{text-wrap:balance}.split .head .lead{text-wrap:pretty}}
/* S61 icone do botao nao aumenta a altura (botoes lado a lado ficam alinhados) */
.btn img,.btn>svg{margin:-2px 0}
/* S63 notificacao do celular de Integracoes com entrelinha propria, celular mais baixo */
.ph-notif small{display:block}
#integracoes .phone.static{height:420px}

/* ===================== revisao tecnica de 01/10/2026 (HANDOVER secao 29, area tecnica, S31 a S46) ===================== */
/* S31 ancora vinda de outra pagina: a rolagem suave so liga depois do load (effects.js poe html.ready), e o titulo para
   abaixo do menu fixo; nas abas de planos a barra de abas fica visivel */
.plan-panel{scroll-margin-top:120px}
/* S32 campo com erro de preenchimento (aria-invalid posto pelo site.js) */
form [aria-invalid=true]{border-color:var(--warn)}
form [aria-invalid=true]:focus{box-shadow:0 0 0 4px var(--warn-soft)}
.form-msg a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
/* S38 icone do app no celular desenhado: 48x48, sem ser espremido pela coluna da grade */
.ph-app img{max-width:none}
/* S44 titulo do painel de planos: com as abas, sai da tela mas continua para o leitor de tela (a aba ja diz o nome) */
.tabs-on .plan-panel-title{display:block;position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* S46 foto com <picture> (WebP com JPEG de reserva): o desenho continua o mesmo de antes */
.photo picture{display:contents}

/* ===================== v5 (02/10/2026) · experiencia (lab-v5/docs/v5-experiencia.md) ===================== */
/* ---- tokens de movimento e medidas do modo capitulo ---- */
:root{--e-out:cubic-bezier(.23,1,.32,1);--e-move:cubic-bezier(.77,0,.175,1);--chap-W:min(780px,calc((min(100vw,1280px) - 48px) * .62));--chap-gap:clamp(48px,5vw,72px);--win-H:clamp(460px,calc(100vh - 236px),580px);--step-pad:12vh}

/* ---- menu (4.0): a linha de baixo so aparece depois de rolar 8 px (v5.js poe .top no topo); sobre secao escura
   (data-dark) o menu fica escuro inteiro, com o logo escuro, e volta a claro depois. Sem JS: claro com a linha (v4). ---- */
.nav{transition:background-color .25s,border-color .25s}
.nav.top{border-bottom-color:transparent}
.menu a:not(.btn){transition:opacity .15s,color .25s}
.brand .cs-dk{display:none}
/* .9 e nao .72: com a borda da faixa passando por baixo do menu, .72 deixava a parte de cima cinza */
.nav.on-dark{background:rgba(11,15,32,.9);border-bottom-color:rgba(255,255,255,.1)}
.nav.on-dark .brand .cs{display:none}
.nav.on-dark .brand .cs-dk{display:block}
.nav.on-dark .burger{color:#F2F4FB}
.nav.on-dark :focus-visible{outline-color:var(--brand-glow)}
@media (min-width:761px){.nav.on-dark .menu a:not(.btn){color:#F2F4FB;opacity:.86}.nav.on-dark .menu a:not(.btn):hover,.nav.on-dark .menu a[aria-current]{opacity:1}}
/* menu do celular aberto sobre secao escura: o painel e claro, entao o menu volta a claro (detalhe cosmetico) */
.nav.on-dark:has(.menu.open){background:rgba(255,255,255,.82);border-bottom-color:var(--line)}
.nav.on-dark:has(.menu.open) .brand .cs{display:block}
.nav.on-dark:has(.menu.open) .brand .cs-dk{display:none}
.nav.on-dark:has(.menu.open) .burger{color:var(--ink)}

/* ---- janela viva: legenda com o botao de pausa (32 px, logo depois do texto, sem mudar a altura da linha) ---- */
.demo-cap{display:flex;align-items:center;justify-content:center;gap:10px}
.demo-pause{flex:none;width:32px;height:32px;margin:-7px 0;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(12,16,32,.16)}
.demo-pause[hidden]{display:none}
.demo-pause:hover{background:#E9EBF5}
.demo-pause svg{fill:currentColor;display:block}
.demo-pause .i-play,.demo-pause.is-paused .i-pause{display:none}
.demo-pause.is-paused .i-play{display:block}
.demo-pause:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:50%}
.demo-cap.on-dark{color:var(--dark-muted)}
.demo-cap.on-dark .demo-pause{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.demo-cap.on-dark .demo-pause:focus-visible{outline-color:var(--brand-glow)}
/* icone do canal da conversa ao lado do nome, no celular do cliente */
.ph-ch{display:inline-block;width:13px;height:13px;margin-left:5px;vertical-align:-1px}
/* linha da lista com fundo proprio: quando a conversa sobe para o topo (SIA5.flip), ela passa por cima das outras */
.cv{position:relative;background:#fff}

/* ---- capitulos da inicial (4.1). Estatico (celular, tablet, "reduzir movimento", sem JS): igual a v4, a janela na
   faixa cinza e cada capitulo como uma secao, com o seu recorte ---- */
.chap{position:relative;background:var(--bg-2);margin-top:calc(var(--overlap) + 48px);padding:0}
.chap-vis{max-width:var(--max);margin:0 auto;padding:0 24px clamp(40px,5vw,64px)}
.chap-vis .app{margin-top:calc(var(--overlap) * -1)}
.chap-step{padding:clamp(72px,9vw,128px) 0}
.st-white{background:var(--bg)}.st-gray{background:var(--bg-2)}
.scn-wrap,.rail-ind{display:none}
@media (max-width:760px){.chap-vis{padding:0 16px 40px}.chap-step{padding:64px 0}}

/* ---- modo capitulo (html.chap-mode: 1180 px ou mais de largura, 620 ou mais de altura, com movimento). A janela fica
   fixa a direita por CSS sticky (sem pin) e o texto rola a esquerda. Camadas no mesmo contexto (.chap-grid isola;
   .chap-steps e os article nao criam contexto): faixa escura 1, janela 2, texto 3 ---- */
.chap-mode .chap{margin-top:0;overflow-x:clip}
.chap-mode .chap::before{content:"";position:absolute;left:0;right:0;top:0;height:calc((100vh - 64px - var(--win-H) - 70px) / 2 + 210px);background:var(--bg)}
.chap-mode .chap-grid{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) var(--chap-W);column-gap:var(--chap-gap);max-width:1280px;margin:0 auto;padding:0 24px}
.chap-mode .chap-vis{grid-column:1/-1;grid-row:1;align-self:start;position:sticky;top:64px;z-index:2;height:calc(100vh - 64px);max-width:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.chap-mode .chap-move{display:flex;flex-direction:column;align-items:flex-end;transform:translateX(calc((var(--chap-W) - 100% - 228px) / 2))}
.chap-mode .chap-vis .duo{width:var(--chap-W);margin:0;pointer-events:auto}
.chap-mode .chap-vis .app{margin:0;width:100%}
.chap-mode .chap .app-body{position:relative;height:var(--win-H);grid-template-columns:52px 280px minmax(0,1fr)}
.chap-mode .chap .side{display:none}
/* revisao de 22/10/2026: a lista da janela nao rola com a roda do mouse (as 6 conversas passam da altura da lista; com o
   ponteiro sobre a janela, a roda rolava a lista e a pagina parava, e os baloes do capitulo dos canais pousavam fora do lugar).
   A demonstracao continua levando a lista ao topo pelo scrollTop */
.chap-mode .chap .cv-list{overflow:hidden}
.chap-mode .chap-vis .phone{right:-228px}
.chap-mode .chap-vis .demo-cap{width:var(--chap-W);margin-top:16px;pointer-events:auto}
.chap-mode .chap-steps{grid-column:1;grid-row:1;position:relative;padding:74vh 0 4vh;pointer-events:none}
/* inicial: +45vh antes do 1o capitulo, para a janela e o celular ficarem parados no topo antes da passagem (v5.js, 22/10/2026) */
.chap-mode .chap[data-hero] .chap-steps{padding-top:119vh}
.chap-mode .chap-step{position:relative;min-height:88vh;padding:0;background:transparent;scroll-margin-top:calc(0px - var(--step-pad))}
.chap-mode .chap-step>.wrap{max-width:none;margin:0;padding:var(--step-pad) 0 0;width:100%}
.chap-mode .chap-step[data-step="canais"]{min-height:130vh}
.chap-mode .chap-step[data-step="agent"]{min-height:140vh}
.chap-mode .chap-step[data-step="report"]{min-height:78vh}
.chap-mode .chap-step .split{display:block}
.chap-mode .chap-fig{display:none}
.chap-mode .chap-txt{position:relative;z-index:3;max-width:440px;pointer-events:auto}
.chap-mode .chap-txt .head{text-align:left;margin:0;max-width:none}
.chap-mode .chap-txt .lead{margin-left:0;text-wrap:pretty}
.chap-mode .chap-txt .note{text-align:left;margin-left:0}
.chap-mode .chap-txt .ctas{justify-content:flex-start}
.chap-mode .agent-cta .btn{white-space:nowrap}
/* faixa escura do capitulo do agente: bloco de borda reta, de lado a lado, que passa por baixo da janela fixa (sem cor
   interpolada: o texto e claro do comeco ao fim) */
.chap-mode .chap-step.dark::before{content:"";position:absolute;top:0;bottom:0;left:-100vw;right:-100vw;z-index:1;background:var(--dark)}
/* capitulo 0: os seis canais em lista ao lado da janela; cada canal acende junto da conversa que chegou por ele */
.chap-mode .chap-txt .chan-row{grid-template-columns:minmax(0,1fr);gap:2px;margin:26px 0 0;max-width:none}
.chap-mode .chap-txt .chan-row li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;align-items:center;margin:0 -14px;padding:9px 14px;border-radius:14px;text-align:left;background:transparent;box-shadow:none}
.chap-mode .chap-txt .chan-row img{grid-row:span 2;width:24px;height:24px;margin:0}
.chap-mode .chap-txt .chan-row b{font-size:15.5px}
.chap-mode .chap-txt .chan-row small{margin-top:1px;font-size:13px}
.chap-mode .chap-txt .chan-row+.ctas{margin-top:22px}

/* marcador da barra de icones: desliza ate a secao da cena */
.chap-mode .rail{position:relative}
.chap-mode .rail-ind{display:block;position:absolute;left:50%;top:0;width:36px;height:36px;margin-left:-18px;border-radius:9px;background:#fff;box-shadow:0 1px 3px rgba(12,16,32,.12)}
.chap-mode .rail i{position:relative;z-index:1}
.chap-mode .rail i.on{background:transparent;box-shadow:none}

/* cenas dentro da janela (so no modo capitulo, por cima da lista e da conversa; a janela e aria-hidden) */
.chap-mode .scn-wrap{display:block;position:absolute;top:8px;right:8px;bottom:8px;left:68px;pointer-events:none}
.chap-mode .scn{position:absolute;inset:0;visibility:hidden;opacity:0}
.sc-card{background:#fff;border-radius:12px;overflow:hidden}
.scn-funnel .sc-card{height:100%;display:flex;flex-direction:column}
.scn-funnel .kb-cols{flex:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px;overflow:visible;background:#fff}
.scn-funnel .kb-col{background:#F4F5FA;border-radius:10px;padding:10px 6px 4px}
.scn-funnel .kb-col h4{font-size:11.5px;white-space:nowrap;margin:0 2px 10px}
.scn-funnel .kb-card,.flyer{grid-template-columns:26px minmax(0,1fr);gap:8px;padding:9px;position:relative}
.scn-funnel .kb-av,.flyer .kb-av{width:26px;height:26px;font-size:10.5px}
.scn-funnel .kb-card b,.flyer b{padding-right:12px;font-size:12px}
.scn-funnel .kb-card:not(:has(.kb-ch)) b{padding-right:0}
.scn-funnel .kb-ch,.flyer .kb-ch{position:absolute;top:9px;right:7px;width:11px;height:11px}
.scn-funnel .kb-card>span:empty,.flyer>span:empty{display:none}
.scn-funnel .kb-val,.flyer .kb-val{grid-column:2/3}
.scn-funnel .kb-alert,.flyer .kb-alert{font-size:10.5px;padding:4px 6px}
.flyer{position:absolute;left:0;top:0;margin:0;z-index:4;visibility:hidden;opacity:0;box-shadow:0 14px 30px -12px rgba(12,16,32,.4)}
/* janela mais estreita (perto de 1180 px): o icone do canal sai do cartao para o nome caber inteiro */
.scn-funnel{container-type:inline-size}
@container (max-width:660px){.scn-funnel .kb-ch{display:none}.scn-funnel .kb-card b{padding-right:0}}
/* mensagens, agente e relatorio (entrega B): as cenas saem das mesmas funcoes dos recortes e preenchem a janela */
.scn-sched .sc-card,.scn-report .sc-card{height:100%;display:flex;flex-direction:column}
.scn-sched .sc-list{flex:1;padding:2px 20px 8px}
.scn-sched .sc-list li:not(.sc-t){min-height:clamp(72px,calc((var(--win-H) - 120px) / 5),92px);padding:10px 4px}
.scn-sched .sc-list .sc-t{padding:16px 4px 6px}
/* o lembrete leva a linha de baixo nos dois estados (a cena mede o mesmo desenho do recorte com a classe pre) */
.scn-sched .sc-list>.sc-mv{border-bottom:1px solid var(--line)}
.scn-agent{display:grid;grid-template-columns:minmax(0,214px) minmax(0,1fr);gap:8px}
.scn-agent .ag-side{background:#fff;border:0;padding:16px 14px}
.scn-agent .ag-side li{background:#F5F6FA;box-shadow:none;color:var(--ink);padding-block:clamp(8px,calc((var(--win-H) - 470px) / 8),15px)}
.scn-agent .ag-side ul{gap:clamp(6px,calc((var(--win-H) - 450px) / 16),9px)}
.scn-agent .ag-side li svg{color:inherit;opacity:.75}
.scn-agent .ag-conv{display:flex;flex-direction:column;min-width:0}
.scn-agent .ag-chat{flex:1;min-height:0;overflow:hidden;padding:16px 18px;gap:8px;justify-content:flex-end}
.scn-agent .handoff{margin-top:4px}
.scn-report .r4-body{flex:1;padding:22px 22px 18px;gap:20px;grid-template-rows:minmax(0,1fr) auto}
.scn-report .r4-chart{height:auto;min-height:150px}
.scn-report .r4-chart i{max-width:40px}
/* barras do relatorio numa cor so (sem degrade); o dia de pico (classe pk, do build.py) em indigo, tambem no recorte */
.r4-chart i{background:#C7CBFB}
.r4-chart .pk i{background:var(--brand)}

/* ---- pilula que desliza (SIA5.pill: abas e seletores; a barra precisa de position relative) ---- */
.pill{position:absolute;left:0;top:0;z-index:0;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(12,16,32,.12),0 10px 24px -14px rgba(12,16,32,.3);pointer-events:none}

/* ===================== v5 · entrega B (02/10/2026): capitulos 3 a 5, gestos dos recortes, exemplos e Recursos ===================== */
/* ---- dois estados no mesmo lugar (relogio e selo do R3): o de antes nasce hidden; no recorte, o v5.js liga .antes e a
   troca e por CSS; na cena da janela, a linha do tempo do GSAP troca (sem transicao de CSS la) ---- */
.swp{display:inline-grid;justify-items:end;align-items:center}
.swp>*{grid-area:1/1}
.shot .swp>*{transition:opacity .3s var(--e-out)}
.shot .swp>:first-child:not(:last-child),.shot .swp.antes>:last-child{opacity:0}
.shot .swp.antes>:first-child{opacity:1}

/* ---- R3 mensagens programadas (4.1.6): relogio no cabecalho e duas listas, "Proximas" e "Enviadas" ---- */
.sc-clock{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:#EEEFF4;font-size:12px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.sc-clock svg{color:var(--muted);flex:none}
.sc-clock i{font-style:normal;white-space:nowrap}
.sc-list{display:flex;flex-direction:column}
.sc-list .sc-t{display:block;padding:14px 4px 4px;border:0;font-size:12.5px;font-weight:600;color:var(--muted)}
.sc-list .sc-t:first-child{padding-top:8px}
/* gesto do recorte: o lembrete ainda agendado em "Proximas" (7:58); ao sair a classe, ele desce (FLIP do v5.js) */
.pre .sc-list>li{order:3}
.pre .sc-list>li:nth-child(-n+2){order:1}
.pre .sc-list>.sc-mv{order:2;border-bottom:1px solid var(--line)}
.pre .sc-t~.sc-t{order:4;opacity:0}
.shot .sc-t~.sc-t{transition:opacity .2s var(--e-out) .2s}

/* ---- R5 agente (4.1.7): item aceso por classe (lit: rolagem e recorte) ou por atributo (data-alt: exemplos, que vencem) ---- */
.ag-side li{transition:background-color .3s var(--e-out),color .3s var(--e-out)}
:not(.ag-x)>.ag-side li.lit,.ag-side li.ag-i[data-alt]{background:var(--brand-soft);color:var(--brand)}
.ag-side li.lit svg,.ag-side li[data-alt] svg{color:inherit}
.agent .ag-conv,.scn-agent .ag-conv{position:relative}
.agent .ag-conv{display:flex;flex-direction:column;min-width:0;background:#FBFBFD}
.ag-chat .slot{position:relative;display:flex;flex-direction:column;align-items:flex-end}
.ag-chat .slot .typing{position:absolute;top:0;right:0}
/* a conversa do exemplo entra numa camada propria, por cima da conversa da rolagem, que fica intacta embaixo */
.ag-alt{position:absolute;inset:0;z-index:2;display:flex;background:#fff;border-radius:inherit;overflow:hidden}
.ag-alt>.ag-conv{flex:1;min-width:0;display:flex;flex-direction:column}
.ag-alt .ag-chat{flex:1;min-height:0;overflow:hidden;justify-content:flex-end}
.shot .ag-alt .composer{display:none}

/* ---- exemplos de pergunta: botoes com aria-pressed; a pilula branca desliza ate o escolhido ---- */
.asks{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.asks[hidden]{display:none}
.asks-t{width:100%;margin-bottom:2px;font-size:14px;font-weight:500;color:var(--muted)}
.asks button{position:relative;z-index:1;border:1px solid var(--line-2);border-radius:999px;background:transparent;padding:10px 16px;font:inherit;font-size:15px;line-height:1.3;text-align:left;color:var(--text);cursor:pointer;transition:color .3s var(--e-out),border-color .3s var(--e-out)}
.asks button:hover{border-color:var(--ink)}
.asks button[aria-pressed=true]{color:var(--ink);border-color:transparent}
.dark .asks-t{color:var(--dark-muted)}
.dark .asks button{border-color:rgba(255,255,255,.26);color:#D3D8EC}
.dark .asks button:hover{border-color:#fff}
.dark .asks button[aria-pressed=true]{color:var(--ink);border-color:transparent}
.dark .asks button:focus-visible{outline-color:var(--brand-glow)}
.chap-txt .asks{flex-direction:column;align-items:flex-start}
#agente>.wrap>.asks{justify-content:center;max-width:820px;margin:0 auto 28px}
#agente>.wrap>.asks .asks-t{text-align:center}
@media (max-width:1000px){
  /* celular e tablet: os exemplos ficam logo acima do recorte do agente (a coluna de texto se abre na grade) */
  .ag-split{row-gap:0}
  .ag-split>.chap-txt{display:contents}
  .ag-split>.chap-txt>.head{order:1}
  .ag-split>.chap-txt>.asks{order:2}
  .ag-split>.chap-fig{order:3;margin-top:28px}
  .ag-split>.chap-txt>:not(.head):not(.asks){order:4}
}
@media (max-width:760px){.asks,.chap-txt .asks{flex-direction:column;align-items:stretch}}
/* recorte do agente em uma coluna: a conversa vem antes da base e das regras, logo abaixo dos exemplos (tocar um exemplo
   troca a conversa que esta na tela) */
@media (max-width:1000px){.agent .ag-conv{order:-1}.agent .ag-side{border-bottom:0;border-top:1px solid var(--line)}}

/* ---- R6 creditos (4.1.10): medidor numa cor so (o degrade fica so no botao "Testar 7 dias gratis") ---- */
.cr-bar i{background:var(--brand)}

/* ---- Recursos (4.2.1): barra local. Sem a classe ln no <html> (sem JS), os atalhos ficam centrados logo abaixo do
   heroi, como na v4. Com ela: barra que gruda embaixo do menu em tela larga, sublinhado na secao atual e filtro ---- */
.localnav .jump{margin:0 auto;padding:0 24px clamp(40px,6vw,80px)}
html:not(.ln) .localnav{margin-top:calc(20px - clamp(40px,6vw,80px))}
html.ln .localnav{position:relative;z-index:15;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:background-color .25s,border-color .25s}
html.ln .ln-in{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:10px 28px}
html.ln .localnav .jump{position:relative;flex:1 1 auto;min-width:0;flex-wrap:nowrap;justify-content:flex-start;gap:0 20px;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
html.ln .localnav .jump::-webkit-scrollbar{display:none}
html.ln .localnav .jump a{flex:none;padding:17px 0 16px;font-size:14px;color:var(--ink);opacity:.72;transition:opacity .15s,color .25s}
html.ln .localnav .jump a:hover,html.ln .localnav .jump a[aria-current]{opacity:1}
.ln-ul{position:absolute;left:0;bottom:0;width:100px;height:2px;background:var(--brand);transform-origin:0 50%;opacity:0;pointer-events:none}
.lnf{display:flex;align-items:center;gap:10px;flex:none}
.lnf[hidden]{display:none}
/* com JS (classe ln), o lugar do filtro ja fica reservado na primeira pintura: ele aparece sem empurrar nada */
html.ln .lnf[hidden]{display:flex;visibility:hidden}
/* o rotulo e o resumo dividem o lugar; a largura do resumo mais longo (217 px em Geist 14 px) fica reservada */
.lnf-lab{display:inline-grid;justify-items:end;min-width:15.8em;font-size:14px;color:var(--muted);white-space:nowrap}
.lnf-lab>*{grid-area:1/1}
.lnf-sum{visibility:hidden;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.lnf.sum-on #lnf-t{visibility:hidden}
.lnf.sum-on .lnf-sum{visibility:visible}
.lnf-b{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:#EEEFF4}
.lnf-b button{position:relative;z-index:1;border:0;border-radius:999px;background:transparent;padding:7px 12px;font:inherit;font-size:13.5px;font-weight:500;color:var(--muted);white-space:nowrap;cursor:pointer;transition:color .3s var(--e-out)}
.lnf-b button[aria-pressed=true]{color:var(--ink)}
.lnf-b .pill{box-shadow:0 1px 3px rgba(12,16,32,.14)}
/* sobre secao escura (agente e chamada final) a barra fica escura, como o menu */
html.ln .localnav.on-dark{background:rgba(11,15,32,.9);border-color:rgba(255,255,255,.1)}
html.ln .localnav.on-dark .jump a,html.ln .localnav.on-dark .lnf-sum{color:#F2F4FB}
html.ln .localnav.on-dark .ln-ul{background:var(--brand-glow)}
html.ln .localnav.on-dark .lnf-lab{color:var(--dark-muted)}
html.ln .localnav.on-dark .lnf-b{background:rgba(255,255,255,.12)}
html.ln .localnav.on-dark .lnf-b button{color:#C9CEE0}
html.ln .localnav.on-dark .lnf-b button[aria-pressed=true]{color:var(--ink)}
html.ln .localnav.on-dark :focus-visible{outline-color:var(--brand-glow)}
/* filtro: o que nao entra no plano escolhido so esmaece (o texto continua na pagina e no leitor de tela) */
.feat{transition:opacity .3s var(--e-out)}
.feat.off{opacity:.38}
/* tela larga: a barra gruda embaixo do menu. Ancora e foco do conteudo param abaixo dela pela margem de rolagem de
   cada alvo (72 px a mais), e nao pelo scroll-padding do html: com ele em 136 px, o Chrome rolava a pagina a cada Tab
   dentro da propria barra (ela fica acima dessa linha) */
@media (min-width:1180px){
  html.ln .localnav{position:sticky;top:64px}
  html.ln{scroll-padding-top:64px}
  html.ln main>section,html.ln main :is(a,button,summary,input,select,textarea,[tabindex]){scroll-margin-top:72px}
  html.ln .localnav :is(a,button){scroll-margin-top:0}
}
@media (max-width:1179px){html.ln .ln-in{flex-wrap:wrap}html.ln .localnav .jump{flex-basis:100%}.lnf{padding-bottom:12px}}
@media (max-width:760px){
  html.ln .ln-in{padding:0 16px}
  html.ln .localnav .jump{margin:0 -16px;padding:0 16px}
  .lnf{flex:1 1 100%;flex-direction:column;align-items:stretch;gap:8px;padding-bottom:16px}
  .lnf-lab{justify-items:start}
  .lnf-b{display:grid;grid-template-columns:1fr 1fr;border-radius:18px}
  .lnf-b button{padding:10px 8px}
}

/* ===================== v5 · entrega C (02/10/2026): componentes de Planos e da SIA, formularios e acabamento ===================== */
/* ---- trazido da v4 de 02/10/2026: nome, CNPJ e endereco da empresa no rodape (EMP-01; Decreto 7.962/2013, art. 2): uma
   linha com pontos no computador, uma linha cada no celular, sem ponto solto no fim da linha ---- */
.foot-legal .fl-emp,.foot-legal .fl-links{display:block}.foot-legal .fl-links{margin-top:4px}
@media (max-width:760px){.foot-legal .fl-sep{display:none}.foot-legal .fl-i{display:block}.foot-legal .fl-links{margin-top:8px}}

/* ---- menu do celular (4.0): o painel desce 8 px e esmaece em 0,2 s ao abrir (o site.js so troca a classe open) ---- */
@media (max-width:760px){
  .menu{display:flex;visibility:hidden;opacity:0;transform:translateY(-8px);min-height:calc(100dvh - 56px);transition:opacity .2s var(--e-out),transform .2s var(--e-out),visibility 0s .2s}
  .menu.open{visibility:visible;opacity:1;transform:none;transition:opacity .2s var(--e-out),transform .2s var(--e-out)}
}

/* ---- abas dos planos (4.1.9): a pilula branca desliza ate a aba escolhida (SIA5.pill); com ela, o fundo sai do botao ---- */
.plan-tabs{position:relative}
.plan-tabs button{position:relative;z-index:1}
.plan-tabs button b{transition:color .3s var(--e-out)}
.plan-tabs:has(.pill) button[aria-selected="true"]{background:transparent;box-shadow:none}

/* ---- Mensal · Anual (4.3.2): seletor de duas posicoes acima dos cartoes da plataforma; os dois textos de cada cartao ficam
   no mesmo lugar (o do ano reserva a altura: o cartao nao muda de tamanho) ---- */
.per-pick{display:flex;justify-content:center;margin-top:28px}
.per-pick[hidden]{display:none}
html.pp .per-pick[hidden]{display:flex;visibility:hidden}
.per-b{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--bg-2)}
.per-b button{position:relative;z-index:1;border:0;border-radius:999px;background:transparent;padding:9px 24px;font:inherit;font-size:15px;font-weight:500;color:var(--muted);cursor:pointer;transition:color .3s var(--e-out)}
.per-b button[aria-pressed=true]{color:var(--ink)}
.per-pick+.plans{margin-top:22px}
.plan .price b{font-variant-numeric:tabular-nums}
.price .per{position:relative;display:inline-block}
.price .per>span{display:inline-block}
.price b.per>span{font-size:inherit;color:inherit}
.price .per>[hidden]{display:none}
.price .per>.sai{display:inline-block;position:absolute;left:0;top:0;white-space:nowrap}
.plan-year.per{display:grid}
.plan-year.per>span{grid-area:1/1}
.plan-year.per>[hidden]{display:block}
.plan-year.per>[hidden]:not(.sai){visibility:hidden}
@media (max-width:760px){.per-b{display:grid;grid-template-columns:1fr 1fr;width:100%}.per-b button{padding:10px 8px}}

/* ---- comparar (4.3.3): coluna em foco ao passar o mouse; no celular, a pilula indigo do seletor desliza ---- */
.cmp :is(td,th){transition:background-color .2s var(--e-out)}
.cmp[data-hot="1"] tr>:nth-child(2),.cmp[data-hot="2"] tr>:nth-child(3),.cmp[data-hot="3"] tr>:nth-child(4){background-color:var(--brand-soft)}
.cmp tfoot td:first-child{border-bottom-left-radius:20px}.cmp tfoot td:last-child{border-bottom-right-radius:20px}
.cmp-pick{position:relative}
.cmp-pick button{position:relative;z-index:1;transition:color .3s var(--e-out)}
.cmp-pick .pill{background:var(--brand);box-shadow:none}
.cmp-pick:has(.pill) button.on{background:transparent;transition-delay:.2s}

/* ---- perguntas (4.1.13): uma aberta por vez (details com name, sem JS); a resposta abre com altura suave onde o navegador
   tem ::details-content, e na hora nos outros ---- */
.faq{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0;overflow-y:clip;transition:block-size .25s var(--e-out),content-visibility .25s allow-discrete}
.faq details[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){.faq details::details-content{transition:none}}

/* ---- painel da operacao da sia (4.4.1): o feed tem altura fixa e rola por dentro (as linhas novas entram embaixo e nada
   empurra a pagina); impresso, as ultimas linhas ficam embaixo, como na v4. Botao de pausa claro sobre o video ---- */
.ops-feed{justify-content:flex-start;transition:opacity .4s var(--e-out)}
.ops-feed>:first-child{margin-top:auto}
.ops-feed.vivo>:first-child{margin-top:0}
.ops-feed.fim{opacity:0}
.hero.has-video .demo-pause{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.hero.has-video .demo-pause:hover{background:rgba(255,255,255,.24)}
.hero.has-video .demo-pause:focus-visible{outline-color:var(--brand-glow)}
/* topo da sia sem pulo (juncao E1): com 34em o paragrafo enche 2,93 linhas; a fonte de reserva cabia em 3 e a Geist em 4,
   e o painel descia 30 px quando a Geist chegava (CLS 0,05 em 1440). Com 31em as duas quebram nas mesmas 4 linhas; com o
   balance, a Geist fica igual a de antes (mesmas quebras e posicoes, medido de 800 a 1920 px). Texto novo: medir de novo */
@media (min-width:761px){.hero.has-video .lead{max-width:31em}}
/* foco sem nada por cima (juncao E1; a v4 no ar tem o mesmo problema, MELHORIAS): no celular, o botao flutuante do WhatsApp
   (18 px do pe, 48 de altura) cobria o que recebia foco no pe da tela: "Responda tres perguntas", o campo de WhatsApp do
   formulario e perguntas da sanfona. Com folga embaixo, o navegador para o foco acima do botao. Juncao E2b: o botao agora e
   o do chat (18 px do pe e 64 de altura, 82 px; 58 no celular), por isso 88 px */
html{scroll-padding-bottom:88px}

/* ---- capitulos da sia.html (4.4.2). Estatico (celular, tablet, "reduzir movimento", sem JS): as quatro linhas texto e tela
   da v4. Modo capitulo: a janela fica fixa a direita e o texto de cada tarefa rola a esquerda ---- */
.chap-sia{background:none;margin-top:0}
.chap-sia .chap-vis{display:none}
.chap-sia .chap-grid{max-width:var(--max);margin:0 auto;padding:0 24px}
.chap-sia .chap-step{padding:0}
.chap-sia .chap-step+.chap-step{margin-top:clamp(56px,8vw,112px)}
@media (max-width:760px){.chap-sia .chap-grid{padding:0 16px}}
.chap-mode .chap-sia::before{display:none}
.chap-mode .chap-sia .chap-grid{max-width:1280px}
.chap-mode .chap-sia .chap-vis{display:flex}
.chap-mode .chap-sia .chap-move{transform:none}
.chap-mode .chap-sia .chap-steps{padding:24vh 0 0}
/* altura dos capitulos (juncao E1): 80vh e 88vh no relatorio (eram 96 e 120); a pagina ficava 1.457 px mais longa que a v4
   em 1440x900, e a meta e uma tela. As falas continuam entre 10% e 70% de cada capitulo (144 px de rolagem por fala) */
.chap-mode .chap-sia .chap-step{min-height:80vh;margin:0}
.chap-mode .chap-sia .chap-step[data-step="report"]{min-height:88vh}
.chap-mode .chap-sia .srow{display:block}
.chap-mode .chap-sia .chap-txt{padding-top:var(--step-pad)}
.chap-mode .chap-sia .stext .note{margin-top:14px}
/* a janela da sia: lista com a selecao que desce (cv-sel, por transform), duas conversas no mesmo lugar e as cenas */
.app-sia .chat-a,.app-sia .chat-b{grid-column:3;grid-row:1;min-height:0}
.app-sia .chat-msgs{justify-content:flex-start}
.app-sia .cv-list{position:relative}
.app-sia .cv{z-index:1;background:transparent;cursor:default}.app-sia .cv:hover{background:transparent}
.cv-sel{position:absolute;left:0;right:0;top:0;height:80px;background:var(--brand-soft);z-index:0;pointer-events:none}
.st-swap,.n-swap{display:inline-grid}.st-swap>*,.n-swap>*{grid-area:1/1}
.st-swap>*+*,.n-swap>*+*{visibility:hidden}
.ops-strip{border-top:1px solid var(--line);padding:4px 14px 8px}
.ops-strip .op{opacity:1;transform:none;transition:none;grid-template-columns:38px 15px auto minmax(0,1fr);gap:10px;padding:8px 0}
.ops-strip .op img{width:15px;height:15px}.ops-strip .op p{font-size:12.5px}
.app-sia [data-k="dest"],.app-sia .scn-funnel .kb-card[data-k="4"]{overflow:hidden}
.app-sia .scn-report{display:flex;flex-direction:column;gap:8px}
.app-sia .scn-report .handoff{margin:0}
.app-sia .scn-report .sc-card{flex:1;height:auto}
.app-sia .scn-report .ops-strip{flex:none;border-top:0;padding:2px 18px 4px}
.app-sia .rep-list{padding:6px 20px 12px}
/* cena do relatorio cheia desde o comeco do capitulo (juncao E1): as cinco linhas dividem a altura do cartao (antes sobrava
   o pe do cartao em branco ate as linhas do dia chegarem: 63% da area em 1440x900; a meta e 75%); a faixa dessas linhas,
   reservada desde o comeco, fica mais justa */
.app-sia .scn-report .rep-list{flex:1;display:flex;flex-direction:column}
.app-sia .scn-report .rep-list li{flex:1}
.app-sia .scn-report .ops-strip .op{padding:6px 0}
.app-sia .rep-sent{font-size:12px;font-weight:500;color:var(--ok-ink);background:var(--ok-soft);padding:4px 10px;border-radius:999px}

/* ---- tres passos (4.4.3): a linha fina que liga os degraus se preenche em indigo (--p, do v5.js); sem JS e com "reduzir
   movimento", cheia. No celular, vertical a esquerda dos degraus empilhados. Nunca passa por cima do texto ---- */
.ladder-wrap{position:relative;margin-top:clamp(40px,5vw,64px)}
.ladder-wrap .ladder{margin-top:0}
.ladder-wrap .ladder li{border-top-color:transparent}
.ladder-line{position:absolute;left:0;right:0;top:-.5px;height:2px}
.ladder-line::before{content:"";position:absolute;left:0;right:0;top:.5px;height:1px;background:var(--line-2)}
.ladder-line i{position:absolute;inset:0;background:var(--brand);transform-origin:0 50%;transform:scaleX(var(--p,1))}
@media (max-width:1000px){
  .ladder-wrap{padding-left:24px}
  .ladder-wrap .ladder li{border-top-color:var(--line-2)}
  .ladder-line{right:auto;top:0;bottom:0;width:2px;height:auto}
  .ladder-line::before{left:.5px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .ladder-line i{transform-origin:50% 0;transform:scaleY(var(--p,1))}
}

/* ---- diagnostico instantaneo (4.4.5): barra fina que anda a cada arquivo lido (so quando a leitura demora) ---- */
.diag-prog{display:block;width:min(320px,80%);height:4px;margin:10px auto 0;border:0;border-radius:999px;background:#E4E6F0;overflow:hidden;-webkit-appearance:none;appearance:none}
.diag .diag-prog[hidden]{display:none!important}
.diag-prog::-webkit-progress-bar{background:#E4E6F0;border-radius:999px}
.diag-prog::-webkit-progress-value{background:var(--brand);border-radius:999px}
.diag-prog::-moz-progress-bar{background:var(--brand);border-radius:999px}
/* as conversas lidas no desenho da caixa de entrada do ChatSIA: painel branco, linhas com as iniciais, selos e "Trocar lados" */
#ver-agora .diag-list{background:#fff;border-radius:var(--tile);gap:0;padding:4px 0;overflow:hidden}
#ver-agora .diag-list li{grid-template-columns:40px minmax(160px,1fr) minmax(0,auto) auto;border-radius:0;padding:14px 20px;border-bottom:1px solid var(--line)}
#ver-agora .diag-list li:last-child{border-bottom:0}
#ver-agora .diag-list .av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ink);background:#EDE9FE}
#ver-agora .diag-list li:nth-child(6n+2) .av{background:#DDF3F6}#ver-agora .diag-list li:nth-child(6n+3) .av{background:#E7ECFB}#ver-agora .diag-list li:nth-child(6n+4) .av{background:#FBEADF}
#ver-agora .diag-list li:nth-child(6n+5) .av{background:#E4F5E8}#ver-agora .diag-list li:nth-child(6n) .av{background:#F6E6F3}
@media (max-width:760px){#ver-agora .diag-list li{grid-template-columns:40px minmax(0,1fr);padding:14px 16px}#ver-agora .diag-list .tg,#ver-agora .diag-list .sw{grid-column:2}}

/* ===================== 02/10/2026: Termos, Blog e API (HANDOVER secao 33; docs/v4/paginas-novas-2026-10-02.md) ===================== */
:root{--mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* cabecalho das paginas de texto longo (termos, privacidade, condicoes e artigo do blog): na coluna do texto, a esquerda */
.hero.doc-head{text-align:left;padding-bottom:clamp(28px,4vw,44px)}
.doc-head .wrap{max-width:768px}
.doc-head h1{font-size:clamp(34px,4.2vw,52px);line-height:1.08}
.doc-head .lead{margin:18px 0 0;max-width:none}
.doc-meta{margin-top:18px;font-size:14px;line-height:1.5;color:var(--muted)}
.doc-meta a{color:var(--brand);font-weight:500}.doc-meta a:hover{color:var(--brand-hover)}
section.doc-body{padding-top:clamp(8px,2vw,24px)}
/* corpo do texto (Markdown do blog, da API e da Central de Ajuda) */
.doc{max-width:720px;margin:0 auto;font-size:17px;line-height:1.65;color:var(--text)}
.doc>*+*{margin-top:18px}
.doc p{text-wrap:pretty}
/* as regras de texto valem so para o que vem do Markdown: os recortes do produto (figure.demo) ficam como no resto do site */
.doc>h2{font-size:clamp(24px,2.5vw,31px);line-height:1.18;letter-spacing:-.015em;margin-top:52px;scroll-margin-top:96px}
.doc>h3,.doc>h4{font-size:clamp(19px,1.8vw,22px);line-height:1.3;letter-spacing:-.01em;margin-top:36px;scroll-margin-top:96px}
.doc>h2:first-child,.doc>h3:first-child{margin-top:0}
.doc>h2+*,.doc>h3+*,.doc>h4+*{margin-top:12px}
:is(.doc>ul,.doc>ol,.doc li>ul,.doc li>ol,.doc>blockquote>ul,.doc>blockquote>ol){padding-left:24px;margin-bottom:0}
:is(.doc>ul,.doc>ol,.doc li>ul,.doc li>ol,.doc>blockquote>ul,.doc>blockquote>ol)>li+li{margin-top:8px}
.doc li>ul,.doc li>ol{margin-top:8px}
:is(.doc>ul,.doc>ol,.doc li>ul,.doc li>ol,.doc>blockquote>ul,.doc>blockquote>ol)>li::marker{color:var(--brand)}
.doc a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.doc a:hover{color:var(--brand-hover)}
.doc strong{font-weight:600;color:var(--ink)}
.doc>blockquote{margin-left:0;margin-right:0;padding:18px 22px;background:var(--bg-2);border-radius:16px;color:var(--ink)}
.gray .doc>blockquote{background:#fff}
.doc hr{border:0;border-top:1px solid var(--line);margin:40px 0}
/* codigo no meio do texto; o de dentro da janela de codigo (pre) segue as regras da .code */
.doc :not(pre)>code{font-family:var(--mono);font-size:.86em;background:var(--bg-2);color:var(--ink);border-radius:6px;padding:.12em .36em;overflow-wrap:anywhere}
.gray .doc :not(pre)>code{background:#fff}
/* codigo nas tabelas (enderecos e chaves da API): quebra so nos pontos que o conteudo.py marca com <wbr> (depois da barra
   e do sublinhado), nunca no meio da palavra; o que nao couber faz a tabela rolar dentro da .tabela (revisao de 02/10/2026,
   achado 19) */
.doc .tabela code{overflow-wrap:normal;word-break:normal}
.doc #fontes~*{font-size:15px;color:var(--muted)}
/* tabela: fica dentro de .tabela, que rola sozinha no celular */
.doc .tabela{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:24px}
.doc .tabela table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.doc .tabela th{text-align:left;font-weight:600;color:var(--ink);padding:10px 16px 10px 0;border-bottom:1px solid var(--line-2);vertical-align:bottom}
.doc .tabela td{padding:11px 16px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.doc .tabela tr>:last-child{padding-right:0}
.gray .doc .tabela{background:#fff;border-radius:18px;padding:6px 20px 8px;box-shadow:0 1px 2px rgba(12,16,32,.05),0 14px 34px -26px rgba(12,16,32,.3)}
.gray .doc .tabela tbody tr:last-child td{border-bottom:0}
/* celular estreito (360 px): a tabela de tres colunas da API cabe sem rolar (revisao de 02/10/2026, achado 19) */
@media (max-width:420px){.doc .tabela table{font-size:14px}.gray .doc .tabela{padding:6px 14px 8px}.doc .tabela th,.doc .tabela td{padding-right:12px}}
/* botoes dentro do texto */
.doc .ctas{margin-top:28px}
.doc a.btn,.doc a.link{text-decoration:none;overflow-wrap:normal}.doc a.btn{color:#fff}.doc a.link{color:var(--brand)}
/* recorte do produto no artigo: mais largo que o texto no computador */
.doc>figure.demo{margin-top:36px;margin-bottom:12px}
.doc>figure.demo+*,.doc>.phone-wrap+*{margin-top:36px}
.doc>h2+h3{margin-top:20px}
@media (min-width:1040px){.doc>figure.demo.largo{margin-left:-120px;margin-right:-120px}}
/* janela de codigo com o botao Copiar (assets/codigo.js) */
.code{margin-top:22px;background:#0B0F20;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px -26px rgba(12,16,32,.6)}
.code-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 8px 6px 18px;border-bottom:1px solid #1C2340;font-size:12.5px;color:#AAB4D8}
.code-copy{font:500 12.5px/1 var(--font);color:#E6E9F7;background:#1C2340;border:0;border-radius:999px;padding:8px 14px;cursor:pointer;transition:background .15s,color .15s}
.code-copy:hover{background:#283158}.code-copy.ok{color:#86EFAC}.code-copy.err{color:#FCA5A5}
.code-copy[hidden]{display:none}
.code pre{margin:0;padding:16px 18px 18px;overflow-x:auto;color:#E8EBF7;font:400 13.5px/1.7 var(--mono);tab-size:2;-webkit-overflow-scrolling:touch}
.code pre:focus-visible{outline:2px solid var(--brand-glow);outline-offset:-2px;border-radius:0}
.code pre code{font:inherit;background:none;padding:0;border-radius:0;color:inherit;white-space:pre;overflow-wrap:normal}
.code .c{color:#9AA3C7}
/* lista de artigos do blog: cartao branco sem borda fina, sombra suave sobre o cinza */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1040px;margin:0 auto;text-align:left}
.post-card{display:flex;flex-direction:column;background:#fff;border-radius:20px;padding:clamp(24px,3vw,34px);box-shadow:0 1px 2px rgba(12,16,32,.05),0 14px 34px -24px rgba(12,16,32,.3);transition:box-shadow .2s,transform .2s}
.post-card:hover{box-shadow:0 1px 2px rgba(12,16,32,.06),0 22px 44px -24px rgba(12,16,32,.38);transform:translateY(-2px)}
.post-card h2,.post-card h3{font-size:clamp(21px,2vw,25px);line-height:1.22;letter-spacing:-.015em}
.post-card p{margin-top:10px;font-size:16px;color:var(--text);line-height:1.5}
.post-card .doc-meta{margin-top:auto;padding-top:18px}
.post-card .link{margin-top:10px;font-size:16px}
.post-card:hover .link svg{transform:translateX(2px)}
.posts.tres{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px}.posts.um{grid-template-columns:minmax(0,560px);justify-content:center}
.posts+.ctas{margin-top:36px}
/* 22/10/2026 · blog por tema: atalhos no topo da pagina do blog, um para cada secao de tema (build.py: TEMAS, blog_page) */
.temas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}
.temas a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--bg-2);color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;transition:background-color .2s,color .2s}
.temas a span{font-size:13px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.temas a:hover{background:var(--brand-soft);color:var(--brand)}
.temas a:hover span{color:var(--brand)}
.temas a:focus-visible{outline:2px solid var(--brand-glow);outline-offset:2px}
/* links novos nas paginas que ja existiam: "Ver a API" em recursos e "API e webhooks" na comparacao de planos */
.feat .link{margin-top:10px;font-size:15.5px}
.cmp-all a{color:var(--brand);font-weight:500}
/* pagina da API: secoes de texto com menos respiro que as de venda */
section.docsec{padding:clamp(56px,7vw,96px) 0}
@media (max-width:1000px){.posts,.posts.tres,.posts.um{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.doc{font-size:16.5px}.doc>h2{margin-top:44px}.code pre{font-size:13px;padding:14px 16px 16px}.code-bar{padding-left:16px}.doc>figure.demo{margin-top:28px}}
@media (prefers-reduced-motion:reduce){.post-card:hover{transform:none}}

/* ===================== v5 · juncao E2 (03/10/2026): Termos, Blog e API no movimento da v5 ===================== */
/* O bloco de cima e o da v4, igual (quando a v4 mudar, trocar ele inteiro). Aqui ficam so os ajustes da v5 (kit passagem-v4,
   PV-11): as transicoes usam a curva da v5 (--e-out) e duram de 0,2 a 0,3 s (v5-experiencia.md, 2.3). */
.post-card{transition:box-shadow .25s var(--e-out),transform .25s var(--e-out)}
.code-copy{transition:background-color .2s var(--e-out),color .2s var(--e-out)}
/* 09/10/2026 · fotos novas (Grok): fundo do topo da SIA, faixa escura da inicial e capas do blog (build.py: media_fundo, capa) */
.media-fundo picture{display:contents}
.media-fundo img,.media-fundo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:no-preference){.media-fundo img{animation:aproxima 28s ease-in-out infinite alternate;transform-origin:62% 58%}}
@keyframes aproxima{from{transform:scale(1)}to{transform:scale(1.08)}}
.photo-bg.band-media{isolation:isolate;background:var(--dark)}
.photo-bg.band-media::before{display:none}
.band-media .hero-media::after{background:linear-gradient(180deg,rgba(12,16,32,.52) 0%,rgba(12,16,32,.64) 60%,rgba(12,16,32,.82) 100%)}
.post-card{--pad:clamp(24px,3vw,34px);padding:var(--pad);overflow:hidden}
.post-capa{margin:calc(var(--pad)*-1) calc(var(--pad)*-1) 22px;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.post-capa picture{display:contents}
.post-capa img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.post-card:hover .post-capa img{transform:scale(1.035)}}
.doc-capa{padding:0 0 clamp(20px,3vw,32px)}
.doc-capa .wrap{max-width:768px}
.capa-artigo{aspect-ratio:16/9}
.capa-artigo img{height:100%;object-fit:cover}

/* ===================== v5 · juncao E2b (21/10/2026): chat do site da v4 de 21/10 (HANDOVER secao 35) ===================== */
/* Caixa de conversa (caixa_chat() no build.py, assets/conversa.js), botao do chat e janela (botao_chat(), assets/chat.js).
   O comportamento e o da v4; o desenho segue a v5 (v5-experiencia.md, 2.2 e 2.3): sem degrade (a v4 tinha degrade no botao do
   chat, no Enviar, no OK, na bolha de quem escreve e na barra das perguntas; aqui e o indigo solido do .btn, porque o degrade
   e so do "Testar 7 dias gratis"), sem brilho (a sombra roxa da caixa e do botao virou a sombra neutra da janela .app, e saiu o
   reflexo de dentro do botao), sem borda fina na caixa, sugestoes no desenho das perguntas de exemplo do agente (.asks),
   pontinhos de "escrevendo" iguais aos da demonstracao (.typing) e transicoes na curva da v5 (--e-out), de 0,2 a 0,3 s. */
.conv{display:flex;flex-direction:column;max-width:620px;height:min(640px,80vh);min-height:480px;margin:0 auto;background:#fff;border-radius:var(--tile);overflow:hidden;text-align:left;box-shadow:0 30px 80px -30px rgba(12,16,32,.4),0 2px 6px rgba(12,16,32,.06)}
.conv-head{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.conv-av{position:relative;flex:none;display:flex;width:46px;height:46px;border-radius:50%;background:var(--bg-2);align-items:center;justify-content:center}
.conv-av img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.conv-av::after{content:"";position:absolute;right:1px;bottom:1px;width:11px;height:11px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2.5px #fff}
.conv-head b{display:block;color:var(--ink);font-size:16px;font-weight:600;line-height:1.25}
.conv-head span{font-size:13px;color:var(--muted)}
.conv-msgs{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:22px}
.conv-m{max-width:84%;padding:11px 16px;border-radius:20px;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.conv-m.ag{align-self:flex-start;background:var(--bg-2);color:var(--ink);border-bottom-left-radius:6px}
.conv-m.eu{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:6px}
.conv-m a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}.conv-m.eu a{color:#fff}
.conv-m.erro{background:var(--warn-soft);color:var(--warn)}.conv-m.erro a{color:var(--warn)}
.conv-dig{display:flex;gap:5px;padding:15px 16px}
.conv-dig i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.35;animation:blink 1.1s infinite}
.conv-dig i:nth-child(2){animation-delay:.18s}.conv-dig i:nth-child(3){animation-delay:.36s}
@media (prefers-reduced-motion:reduce){.conv-dig i{animation:none}}
.conv-sug{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.conv-sug[hidden]{display:none}
.conv-sug button{border:1px solid var(--line-2);border-radius:999px;background:transparent;padding:9px 14px;font:inherit;font-size:14px;line-height:1.3;text-align:left;color:var(--text);cursor:pointer;transition:color .3s var(--e-out),border-color .3s var(--e-out)}
.conv-sug button:hover{border-color:var(--ink);color:var(--ink)}
.conv-form{display:flex;align-items:flex-end;gap:10px;margin:0 16px;padding:7px 7px 7px 18px;border:1px solid var(--line-2);border-radius:26px;background:#fff;transition:border-color .2s var(--e-out),box-shadow .2s var(--e-out)}
.conv-form:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.conv-form textarea,.conv-form textarea:focus{flex:1;min-width:0;min-height:0;height:42px;max-height:120px;border:0;border-radius:0;padding:10px 0;resize:none;box-shadow:none;outline:none;background:transparent;font-size:15px;line-height:1.4}
.conv-form button{flex:none;display:flex;width:42px;height:42px;border-radius:50%;border:0;background:var(--brand);color:#fff;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s}
.conv-form button:hover{background:var(--brand-hover)}.conv-form button:disabled{opacity:.5;cursor:default}
.conv-note{padding:10px 22px 14px;font-size:12px;line-height:1.4;color:var(--muted);text-align:center}
.conv-note a{text-decoration:underline;text-underline-offset:2px}
/* onde a caixa fica: no meio da inicial (#converse, centrada), no contato e na sia (#diagnostico), a direita. Na sia, o preco e
   as condicoes ficam a esquerda, logo abaixo das vantagens, e o "Como comeca" embaixo do preco */
.contact .conv,.offer .conv{margin:0;max-width:none}
.offer .checks+.panel{margin-top:28px}.offer .panel+.how-start{margin-top:24px}
/* botao do chat (todas as paginas, a direita, no lugar do antigo WhatsApp flutuante) e janela do chat (paginas sem caixa no
   meio). No celular, a janela ocupa a tela */
.conv-fab{position:fixed;right:18px;bottom:18px;z-index:31;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--brand);box-shadow:0 12px 30px -12px rgba(12,16,32,.4);color:#fff;transition:transform .2s var(--e-out),opacity .2s var(--e-out),visibility .2s}
.conv-fab:hover{transform:scale(1.05)}
.conv-fab-av{display:flex;width:54px;height:54px;border-radius:50%;background:var(--bg-2);overflow:hidden}
.conv-fab-av video{display:block;width:100%;height:100%;object-fit:cover}
.conv-fab::after{content:"";position:absolute;right:3px;bottom:3px;width:13px;height:13px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2.5px #fff}
.conv-fab-x{display:none}.conv-fab-x svg{width:24px;height:24px}
.conv-fab.on .conv-fab-av,.conv-fab.on::after{display:none}.conv-fab.on .conv-fab-x{display:flex}
.conv-fab-t{position:absolute;right:76px;white-space:nowrap;padding:8px 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:500;box-shadow:0 10px 28px -12px rgba(12,16,32,.35),0 1px 3px rgba(12,16,32,.08);opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .2s var(--e-out),transform .2s var(--e-out)}
.conv-fab:hover .conv-fab-t,.conv-fab:focus-visible .conv-fab-t{opacity:1;transform:none}.conv-fab.on .conv-fab-t{display:none}
.conv-fab.some{opacity:0;visibility:hidden;transform:scale(.8)}
/* menu do celular aberto (v5, 4.0: o painel tem a altura da tela): o botao do chat sai de cena e nao cobre o menu */
.nav:has(.menu.open)~.conv-fab{opacity:0;visibility:hidden;transform:scale(.8)}
.conv-pop{position:fixed;right:18px;bottom:96px;z-index:32;width:min(400px,calc(100vw - 36px));height:min(640px,calc(100vh - 120px));transform-origin:bottom right;opacity:0;transform:translateY(12px) scale(.98);transition:opacity .25s var(--e-out),transform .25s var(--e-out)}
.conv-pop.aberto{opacity:1;transform:none}
.conv-pop .conv{max-width:none;height:100%;min-height:0;margin:0;box-shadow:0 30px 80px -24px rgba(12,16,32,.45),0 2px 8px rgba(12,16,32,.08)}
.conv-x{margin-left:auto;flex:none;display:flex;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s var(--e-out),color .2s var(--e-out)}
.conv-x:hover{background:var(--bg-2);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.conv-pop,.conv-fab,.conv-fab-t{transition:none}}
@media (max-width:560px){.conv-fab{width:58px;height:58px}.conv-fab-av{width:49px;height:49px}.conv-fab-t{display:none}
  .conv-pop{inset:0;width:100%;height:100%;height:100dvh}.conv-pop .conv{border-radius:0}
  html.conv-aberto,html.conv-aberto body{overflow:hidden}html.conv-aberto .conv-fab{display:none}}
/* perguntas antes do chat (conversa.js, perguntas()): uma de cada vez, no lugar das mensagens e do campo */
.conv.pre .conv-msgs,.conv.pre .conv-form{display:none}
.conv-pre{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
.conv-bar{height:3px;background:var(--bg-2)}.conv-bar i{display:block;height:100%;width:0;background:var(--brand);transition:width .3s var(--e-out)}
.conv-q{margin:auto 0;padding:28px 34px}
.conv-n{font-size:13px;font-weight:600;color:var(--brand)}
.conv-t{display:block;margin-top:8px;font-family:var(--display);font-size:clamp(24px,2.4vw,30px);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.conv-a{margin-top:8px;font-size:15px;color:var(--muted)}
.conv-pre .conv-in,.conv-pre .conv-in:focus{margin-top:26px;padding:10px 0;border:0;border-bottom:2px solid var(--line-2);border-radius:0;background:transparent;box-shadow:none;outline:none;font-size:22px;color:var(--ink)}
.conv-pre .conv-in:focus{border-bottom-color:var(--brand)}.conv-pre .conv-in[aria-invalid=true]{border-bottom-color:var(--warn)}
.conv-e{min-height:21px;margin-top:8px;font-size:14px;color:var(--warn)}
.conv-acts{display:flex;align-items:center;gap:12px;margin-top:6px}
.conv-acts button{font:inherit;font-size:15px;font-weight:500;padding:11px 22px;border-radius:999px;cursor:pointer;transition:background-color .15s,border-color .15s}
.conv-voltar{background:#fff;border:1px solid var(--line-2);color:var(--ink)}.conv-voltar:hover{border-color:var(--ink)}.conv-voltar[hidden]{display:none}
.conv-ok{min-width:84px;border:1px solid transparent;background:var(--brand);color:#fff}.conv-ok:hover{background:var(--brand-hover)}
.conv-dica{font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.conv-q.entra{animation:conv-entra .3s var(--e-out) both}}
@keyframes conv-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:560px){.conv-q{padding:22px 20px}.conv-dica{display:none}.conv-pre .conv-in{font-size:20px}}
@media (max-width:560px){.conv{height:min(600px,78vh)}.conv-msgs{padding:18px 16px}.conv-form{margin:0 10px}.conv-m{max-width:90%}}

/* ===================== comercial · juncao E4 (21/10/2026) · lab-v5/docs/v5-comercial.md, J2 e J4 (kit k2) ===================== */
/* ---- J2 dono do degrade: botao do conteudo com data-cede (J6) fica solido quando outro degrade do conteudo esta na tela ---- */
.btn.grad.cede{background:var(--brand);box-shadow:none}.btn.grad.cede:hover{background:var(--brand-hover)}
/* ---- J2 barra de decisao (abaixo de 1180 px): branca e baixa no pe da tela, sombra suave em cima, sem desfoque. Nasce
   com aria-hidden="true" (escondida e fora do Tab; sem JS fica assim); o v5.js troca para "false" para ela subir (0,3 s)
   e volta para "true" para ela descer (0,2 s) ---- */
.dbar{position:fixed;left:0;right:0;bottom:0;z-index:19;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -10px 28px -18px rgba(12,16,32,.45);transition:transform .3s var(--e-out) .1s,visibility 0s .1s}
.dbar[aria-hidden="true"]{transform:translateY(calc(100% + 16px));visibility:hidden;transition:transform .2s var(--e-move),visibility 0s .2s}
.dbar .btn{width:100%;max-width:520px}
.dbar p{font-size:12px;line-height:1.3;color:var(--muted);text-align:center}
@media (min-width:1180px){.dbar{display:none}}
/* com a barra na tela, o botao do chat sai de cena: some em 0,1 s antes de a barra subir e so volta 0,2 s depois de ela
   descer, para nada ficar por cima dela nem durante a troca (o chat.js continua com a classe some dele, a parte) */
@media (max-width:1179px){body:has(>.dbar) .conv-fab{transition:transform .2s var(--e-out) .2s,opacity .2s var(--e-out) .2s,visibility 0s .2s}}
body.dbar-on .conv-fab{opacity:0;visibility:hidden;transform:scale(.8);transition:transform .1s,opacity .1s,visibility 0s .1s}
/* ---- J2 botao do menu no computador: o degrade entra por opacidade, por baixo do texto (largura e texto iguais) ---- */
.menu-cta{position:relative;isolation:isolate}
.menu-cta::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#7C3AED,#4F46E5);opacity:0;transition:opacity .25s var(--e-out)}
.menu-cta.on::before{opacity:1}
.menu-cta.on:hover::before{background:linear-gradient(135deg,#6D28D9,#4338CA)}
@media (prefers-reduced-motion:reduce){.menu-cta::before{transition:none}}
/* ---- J4 o botao anda com a janela: so no modo capitulo e com altura para a janela continuar com 460 px ou mais (760 px
   de tela). De 760 a 879 px a janela desconta a altura do bloco (--cta-H) e a faixa branca do heroi acompanha; com 880 px
   ou mais sobra espaco embaixo da legenda e o bloco fica pendurado ali, com a janela e o heroi como sem ele ---- */
.chap-cta{display:none}
@media (min-height:760px){
  .chap-mode .chap.com-cta{--cta-H:64px;--win-H:clamp(460px,calc(100vh - 236px - var(--cta-H)),580px)}
  .chap-mode .chap.com-cta::before{height:calc((100vh - 64px - var(--win-H) - 70px - var(--cta-H)) / 2 + 210px)}
  .chap-mode .chap-cta{display:flex;align-items:center;justify-content:center;gap:16px;width:var(--chap-W);height:49px;margin-top:15px;pointer-events:auto;font-size:14px;color:var(--muted);transition:opacity .2s var(--e-out),visibility .2s}
  .chap-mode .chap-cta[aria-hidden="true"]{opacity:0;visibility:hidden}
  .chap-mode .chap-cta.on-dark{color:var(--dark-muted)}
  .chap-mode .chap-cta.on-dark :focus-visible{outline-color:var(--brand-glow)}
}
@media (min-height:880px){.chap-mode .chap.com-cta{--cta-H:0px}.chap-mode .chap-cta{margin-bottom:-64px}}

/* ===================== comercial · juncao E5 (21/10/2026) · lab-v5/docs/v5-comercial.md, J3, J8 e J12 (kit k3) ===================== */
/* ---- J3 os 7 dias, a vista: tres marcos ligados por uma linha (li::before cinza, li::after indigo, marcador no b::before).
   O v5.js anima --f de 0 a 1 uma vez; sem JS e com movimento reduzido, --f fica 1 e a linha ja vem cheia. ---- */
.sete{max-width:980px;margin:clamp(48px,6vw,72px) auto 0;text-align:center}
.sete-t{margin:0;font-family:var(--display);font-weight:600;color:var(--ink);font-size:clamp(22px,2.1vw,28px);line-height:1.15;letter-spacing:-.015em}
.sete-m{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.sete-m li{position:relative;padding-top:30px}
.sete-m b{display:block;font-size:17px;font-weight:600;color:var(--ink)}
.sete-m b::before{content:"";position:absolute;z-index:1;left:50%;top:1px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--brand)}
.sete-m p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--muted)}
.sete-m li:not(:last-child)::before,.sete-m li:not(:last-child)::after{content:"";position:absolute;left:50%;top:5px;width:calc(100% + 32px);height:2px;background:var(--line);transform-origin:0 50%}
.sete-m li:not(:last-child)::after{background:var(--brand)}
.sete-m li:nth-child(1)::after{transform:scaleX(clamp(0,calc(var(--f,1) * 2),1))}
.sete-m li:nth-child(2)::after{transform:scaleX(clamp(0,calc(var(--f,1) * 2 - 1),1))}
.sete-sem{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;font-size:15px;color:var(--text)}
.sete-sem li+li::before{content:"";display:inline-block;width:3px;height:3px;margin:0 12px;border-radius:50%;background:var(--line-2);vertical-align:middle}
.sete-sia{margin-top:10px;font-size:15px;color:var(--muted)}.sete-sia .link{font-size:15px}
@media (max-width:1000px){.sete-sem{display:block}.sete-sem li+li{margin-top:4px}.sete-sem li+li::before{display:none}}
@media (max-width:760px){
  .sete{text-align:left}
  .sete-m{grid-template-columns:1fr;gap:22px}
  .sete-m li{padding:0 0 0 30px}
  .sete-m b::before{left:1px;top:8px;margin-left:0}
  .sete-m li:not(:last-child)::before,.sete-m li:not(:last-child)::after{left:5px;top:12px;width:2px;height:calc(100% + 22px);transform-origin:50% 0}
  .sete-m li:nth-child(1)::after{transform:scaleY(clamp(0,calc(var(--f,1) * 2),1))}
  .sete-m li:nth-child(2)::after{transform:scaleY(clamp(0,calc(var(--f,1) * 2 - 1),1))}
}
/* ---- J8 qual plano e o seu: duas perguntas em pilulas (SIA5.pill); a indicacao fica numa linha de altura reservada
   (as frases umas sobre as outras, so a escolhida visivel) e os cartoes que nao servem esmaecem para 0,6 ---- */
.quiz{max-width:980px;margin:clamp(28px,3.5vw,40px) auto clamp(28px,3.5vw,40px);text-align:center}
.quiz-t{font-size:clamp(20px,1.8vw,24px)}
.quiz-qs{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 48px;margin-top:20px}
.quiz-q p{font-size:15px;color:var(--muted)}
.quiz-op{position:relative;display:inline-flex;gap:2px;margin-top:10px;padding:5px;border-radius:999px;background:var(--bg-2)}
.quiz-op button{position:relative;z-index:1;border:0;background:none;border-radius:999px;padding:10px 18px;font:500 15px/1.2 var(--font);color:var(--muted);cursor:pointer;transition:color .2s}
.quiz-op button:hover,.quiz-op button[aria-pressed="true"]{color:var(--ink)}
.quiz-op button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.quiz-op .pill{transition:opacity .2s}.quiz-op:not(.tem)>.pill{opacity:0}
.quiz-r{display:grid;margin-top:16px;font-size:17px;font-weight:500;color:var(--ink)}
.quiz-r>span{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s}
.quiz-r>.on{visibility:visible;opacity:1;transition:opacity .25s}
.quiz-r a{color:var(--brand)}
.quiz-sempre{margin-top:22px;font-size:15px;color:var(--muted)}.quiz-sempre .link{font-size:15px;margin-left:4px}
.plan.esmaece{opacity:.6}
.plan-panel:has(.quiz) .plan{transition:opacity .3s cubic-bezier(.25,.46,.45,.94)}
@media (max-width:760px){
  .quiz-qs{display:block}.quiz-q+.quiz-q{margin-top:18px}
  .quiz-op{display:flex}.quiz-op button{flex:1;padding:12px 6px}
}
/* ---- J12 o anual que se ve: 12 meses embaixo da linha do anual, 10 cheios e 2 so com contorno; aparecem em Anual (classe
   on, evento sia:periodo do seletor da 4.3.2). Com JS (html.pp, o mesmo do seletor) o espaco fica reservado nos dois
   estados; sem JS a tira nao existe ---- */
.meses{display:none}
html.pp .meses{display:grid;grid-template-columns:repeat(12,7px);gap:5px;align-self:flex-start;margin-top:12px;visibility:hidden}
.meses i{height:7px;border-radius:50%;background:var(--muted)}
.meses i:nth-child(n+11){background:none;box-shadow:inset 0 0 0 1.5px var(--muted)}
.meses small{grid-column:11/span 2;white-space:nowrap;font-size:12.5px;line-height:1.1;color:var(--muted)}
.meses i:nth-child(n+11),.meses small{opacity:0;transition:opacity .3s}
html.pp .meses.on{visibility:visible}.meses.on i,.meses.on small{opacity:1}

/* ===================== comercial · juncao E6 (21/10/2026) · lab-v5/docs/v5-comercial.md, J5, J6 e J11 (kit k4, pela especificacao) ===================== */
/* ---- J5 regua da equipe: pergunta e numero numa linha; menos, regua e mais (44 px); vinte avatares em duas linhas de 10
   (os apagados com visibility hidden: o espaco fica reservado e nada pula) e o preco parado ao lado. Sem JS nao existe ---- */
.regua{margin-top:28px;max-width:560px}
.regua-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.regua-q{font-size:16px;font-weight:500;color:var(--ink)}
.regua-n{flex:none;min-width:6.5em;text-align:right;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.regua-ctl{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;margin-top:8px}
.regua-b{width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s}
.regua-b:hover{border-color:var(--ink)}.regua-b[aria-disabled="true"]{color:var(--line-2);border-color:var(--line);cursor:default}
.regua-b:focus-visible,.regua input:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.regua input[type=range]{width:100%;height:44px;margin:0;padding:0;-webkit-appearance:auto;appearance:auto;accent-color:var(--brand);background:transparent;border:0;box-shadow:none;touch-action:none;cursor:pointer}
.regua-fila{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:14px}
.regua-av{flex:none;display:grid;grid-template-columns:repeat(10,24px);grid-auto-rows:24px;gap:5px}
.regua-av i{display:flex;align-items:center;justify-content:center;border-radius:50%;font-style:normal;font-size:9.5px;font-weight:600;color:var(--ink);visibility:hidden}
.regua-av i.on{visibility:visible}
.regua-preco{display:flex;flex-direction:column;gap:2px}
.regua-preco b{font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap}
.regua-preco span{font-size:15px;color:var(--muted)}
.regua-20,.regua-cred{font-size:14px;line-height:1.5;color:var(--muted)}
.regua-20{margin-top:10px}.regua-20[aria-hidden="true"]{visibility:hidden}.regua-cred{margin-top:2px}
/* ---- J6 veja as conversas do seu WhatsApp: a janela do ChatSIA no visual H sobre a faixa cinza (como a do heroi), com a
   lista a esquerda no desenho .cv e a ferramenta a direita. Aqui a janela e ferramenta: so a barra e o trilho levam
   aria-hidden. No celular, sem moldura: a ferramenta e, depois do resultado, as linhas com os numeros embaixo ---- */
.fila-sec:has(>.fila-stage:not([hidden])){padding-bottom:0}
.fila{scroll-margin-top:88px}
.fila-app .app-body{grid-template-columns:52px 320px minmax(0,1fr);height:auto;min-height:600px}
.fila-lista{position:relative}
.fila-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.fila-head b{margin:0}
.fila-nomes{flex:none;border:0;background:none;padding:6px 0;font:500 13px/1.2 var(--font);color:var(--brand);cursor:pointer}
.fila-nomes:focus-visible,.diag-ex button:focus-visible,.fila .sw:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.fila .diag-list{list-style:none;margin:0;padding:0}
.fila .diag-list .cv{cursor:default}.fila .diag-list .cv:hover{background:#fff}
.fila .diag-list .cv:nth-child(n+7){display:none}
.fila .diag-list .mais{padding:12px 16px;font-size:12.5px;color:var(--muted)}
.fila .cv-prev{white-space:normal}
.fila .cv-tags i b{font-weight:600}
.fila .cv-tags i.bad{background:var(--warn-soft);color:var(--warn)}.fila .cv-tags i.ok{background:var(--ok-soft);color:var(--ok-ink)}
.fila .sw{display:block;margin-top:6px;padding:0;border:0;background:none;font:12px/1.3 var(--font);color:var(--muted);text-decoration:underline;cursor:pointer}
.fila-vazia{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--line-2)}.fila-vazia svg{width:44px;height:44px}
.fila-lista:has(.diag-list li) .fila-vazia{display:none}
.fila-tool{min-width:0;padding:clamp(20px,2.4vw,32px);border-radius:12px;background:#fff;font-size:16px;line-height:1.5;color:var(--text)}
.fila-tool .diag{margin:0;max-width:none}
.fila-tool .drop{padding:40px 24px}
.fila-tool .diag-hero{box-shadow:none;background:var(--bg-2)}
.fila-tool .diag-kpis div{background:var(--bg-2)}
.fila-tool .diag-kpis b{font-size:clamp(26px,2.4vw,34px)}
.fila-tool .diag-manual{padding:0;background:transparent}
.fila-tool .diag-foot{grid-template-columns:auto minmax(200px,280px)}
.diag-ex{margin-top:14px;text-align:center}
.diag-ex button{border:0;background:none;padding:6px 4px;font:500 15px/1.3 var(--font);color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fila-leg{margin-top:14px;text-align:center;font-size:12.5px;color:var(--muted)}
.fila-fim{margin-top:28px;text-align:center}.fila-fim p{font-size:17px;color:var(--text)}.fila-fim .ctas{margin-top:16px}
.fila-semjs{margin-top:28px;max-width:640px}.fila-semjs h3{font-size:18px}.fila-semjs ol{margin:10px 0 0;padding-left:20px;color:var(--muted);display:grid;gap:6px}.fila-semjs p{margin-top:16px}
/* ---- J11 mandar o resultado no WhatsApp: embaixo do resultado e da estimativa (sia e inicial) ---- */
.diag-share{margin-top:14px;text-align:center}.diag-share .link{font-size:15px}
@media (max-width:1100px) and (min-width:761px){.fila-app .app-body{grid-template-columns:52px 260px minmax(0,1fr)}}
@media (max-width:760px){
  .regua-fila{gap:14px}
  .fila-stage{margin-top:28px;padding:20px 0 48px}
  .fila-stage .app.fila-app{margin-top:0;overflow:visible;border-radius:0;background:transparent;box-shadow:none}
  .fila-app .app-bar,.fila-app .rail{display:none}
  .fila-app .app-body{display:flex;flex-direction:column;gap:16px;height:auto;min-height:0;padding:0;background:transparent}
  .fila-lista:has(.diag-list:empty){display:none}
  .fila-tool{padding:0;background:transparent}
  .fila-tool .diag-hero,.fila-tool .diag-kpis div{background:#fff}
  .fila-tool .drop{padding:28px 20px}.fila-tool .drop .btn{min-height:48px;padding:14px 22px;font-size:16px}
  .fila-tool .diag-foot{grid-template-columns:1fr}
}

/* ===================== comercial · juncao E7 (21/10/2026) · lab-v5/docs/v5-comercial.md, J7 (kit k5, pela especificacao) ===================== */
/* ---- J7 seis apps viram uma fila: so no modo capitulo, a pilha de avisos sobre a coluna da conversa da janela (o primeiro a
   voar por cima; os outros 10 px abaixo e um pouco mais estreitos). Branco, canto de 14 px, sombra suave, sem borda fina e
   sem desfoque. O v5.js mostra a pilha com o capitulo 0 e leva cada aviso ate a linha da conversa dele ---- */
.avisos{display:none}
.chap-mode .avisos{display:block;position:absolute;grid-column:3;grid-row:1;inset:0;z-index:3;visibility:hidden;pointer-events:none}
.aviso{position:absolute;top:calc(84px + var(--i) * 10px);left:calc(28px + var(--i) * 7px);right:calc(28px + var(--i) * 7px);z-index:calc(6 - var(--i));display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;align-items:center;margin:0;padding:12px 16px;border-radius:14px;background:#fff;box-shadow:0 16px 36px -16px rgba(12,16,32,.3),0 1px 4px rgba(12,16,32,.08);line-height:1.4}
.aviso img{grid-row:1/3;width:20px;height:20px}
.aviso b,.aviso span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aviso b{font-size:13px;font-weight:600;color:var(--ink)}
.aviso span{font-size:12.5px;color:var(--muted)}

/* ===================== comercial · juncao E8 (21/10/2026) · pontes do blog (item 17, texto N31) ===================== */
/* ---- a ponte: uma linha no meio do artigo com o link de seta do site (sem o sublinhado dos links do texto), levando a uma
   jogada da inicial (a regua da equipe ou as conversas do seu WhatsApp) ---- */
.doc>.ponte{margin-top:14px}
.doc .ponte .link{text-decoration:none;font-weight:600}

/* variante x2 (opcional): na janela do topo, sem as etiquetas das conversas, as 6 linhas cabem na lista */
.chap-mode .chap[data-hero] .cv-tags{display:none}

/* ===================== 23/10/2026 · capas animadas do blog (build.py: cena(); assets/cenas.js) ===================== */
/* Cada capa é uma cena de produto em 16:9, medida em cqw (1% da largura da capa), então é a mesma no cartão e no topo do
   artigo. O CSS desenha o quadro final; com .anima (cenas.js), cada peça com data-t espera a sua classe (v, v2, v3) e entra
   com as curvas do site. Só transform e opacity; os movimentos contínuos (pontos, onda, ponteiro, anéis) só rodam com .on,
   que o cenas.js liga enquanto a capa está na tela. Com movimento reduzido ou sem JavaScript, fica o quadro final, parado. */
/* a moldura (cartão ou topo do artigo) é a referência das medidas cqw da cena */
.post-capa:has(.cena),.capa-artigo{container-type:inline-size}
.post-capa:has(.cena){background:none}
.capa-artigo{border-radius:clamp(16px,2.2vw,24px);overflow:hidden;box-shadow:0 1px 2px rgba(12,16,32,.05),0 18px 40px -28px rgba(12,16,32,.35)}
.cena{--glow:rgba(79,70,229,.16);--glow2:rgba(37,211,102,.10);position:relative;width:100%;height:100%;aspect-ratio:16/9;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:3cqw;padding:5cqw;background:linear-gradient(140deg,#F8F9FD 0%,#ECEEF6 100%);color:var(--ink);font-family:var(--font);font-size:2.8cqw;line-height:1.35;text-align:left;letter-spacing:0}
.cena::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 64% at 84% 10%,var(--glow) 0%,transparent 70%),radial-gradient(46% 60% at 6% 98%,var(--glow2) 0%,transparent 70%)}
.cena.t-W{--glow:rgba(37,211,102,.24);--glow2:rgba(79,70,229,.10)}
.cena.t-IA{--glow:rgba(79,70,229,.26);--glow2:rgba(165,180,252,.32)}
.cena.t-V{--glow:rgba(243,214,140,.55);--glow2:rgba(79,70,229,.10)}
.cena.t-G{--glow:rgba(165,180,252,.42);--glow2:rgba(12,16,32,.06)}
.cena.t-S{--glow:rgba(79,70,229,.16);--glow2:rgba(37,211,102,.18)}
.cena svg{width:1.1em;height:1.1em;flex:none}
.cena img{width:1.25em;height:1.25em;flex:none;display:block}
.cena b{font-weight:600}
.cena small{font-size:.8em;color:var(--muted)}
/* o cartão do blog tem .post-card p com 16 px: dentro da cena, o parágrafo segue a medida da cena */
.cena p,.post-card .cena p{margin:0;font-size:1em;line-height:inherit;color:inherit}
.cena p.cn-corpo{font-size:1.04em;color:var(--text)}
.cena p.cn-perg{font-size:1.04em}
.cena p.cn-tx{color:var(--text)}
.cn-tela{position:relative;background:#fff;border-radius:2.2cqw;padding:2.4cqw 2.8cqw;box-shadow:0 .2cqw .6cqw rgba(12,16,32,.06),0 2.6cqw 6cqw -2.6cqw rgba(12,16,32,.32)}
.cn-ct2{display:flex;align-items:center;gap:1cqw;font-size:1.04em}
.cn-ct2 svg{color:var(--brand)}
.cn-av{display:grid;place-items:center;flex:none;width:3.8cqw;height:3.8cqw;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-style:normal;font-weight:600;font-size:.74em}
.cn-bar{display:block;flex:1;min-width:2cqw;height:1.1cqw;border-radius:99px;background:var(--bg-2)}
.cn-seta{display:grid;place-items:center;flex:none;color:var(--brand-glow)}
.cn-seta svg{width:3.6cqw;height:3.6cqw}

/* entrada das peças: estados iniciais só com .anima */
.cena.anima [data-t]{transition:opacity .5s var(--e-out),transform .65s var(--e-out)}
.cena.anima [data-t]:not(.v){opacity:0;transform:translateY(1.6cqw)}
.cena.anima .cn-pop[data-t]:not(.v){transform:scale(.9)}
.cena.anima .cn-esq[data-t]:not(.v){transform:translateX(-3cqw)}
.cena.anima.sai [data-t]{opacity:0!important;transition:opacity .35s ease}

/* conversa */
.cn-chat{width:62cqw;padding:0;overflow:hidden;font-size:.93em}
.cn-chat-p{width:44cqw}
.cn-topo{display:flex;align-items:center;gap:1.1cqw;padding:1.5cqw 2.2cqw;border-bottom:1px solid var(--line);font-size:.92em}
.cn-topo span{margin-left:auto;color:var(--muted);font-size:.85em}
.cn-msgs{display:flex;flex-direction:column;gap:1.1cqw;padding:1.8cqw 2.2cqw 2.2cqw;background:#FAFAFC}
.cn-l{position:relative;display:flex}
.cn-c{justify-content:flex-start}
.cn-a{justify-content:flex-end}
.cn-b{max-width:80%;padding:1.1cqw 1.6cqw;border-radius:1.8cqw;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.cn-c .cn-b{border-bottom-left-radius:.5cqw}
.cn-a .cn-b{background:var(--brand);color:#fff;box-shadow:none;border-bottom-right-radius:.5cqw}
.cn-a .cn-b small{display:flex;align-items:center;gap:.5cqw;color:rgba(255,255,255,.78);font-weight:500;font-size:.72em;margin-bottom:.3cqw}
.cn-dig{position:absolute;right:0;top:0;display:flex;gap:.6cqw;padding:1.5cqw 1.8cqw;border-radius:1.8cqw 1.8cqw .5cqw 1.8cqw;background:var(--brand-soft);opacity:0}
.cena.anima .cn-dig.v:not(.v2){opacity:1;transform:none}
.cn-dig i{width:.9cqw;height:.9cqw;border-radius:50%;background:var(--brand);animation:cn-pula 1.1s var(--e-move) infinite;animation-delay:calc(var(--i)*.15s)}
@keyframes cn-pula{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-.6cqw);opacity:1}}
.cn-aviso{align-self:center;display:flex;align-items:center;gap:.7cqw;padding:.7cqw 1.5cqw;border-radius:99px;background:var(--ok-soft);color:var(--ok-ink);font-size:.8em;font-weight:500}

/* modelo de mensagem da Meta */
.cn-modelo{width:58cqw;display:flex;flex-direction:column;gap:1.6cqw}
.cn-mh{display:flex;align-items:center;justify-content:space-between;gap:1.2cqw}
.cn-chip{padding:.5cqw 1.3cqw;border-radius:99px;background:var(--bg-2);font-size:.8em;font-weight:500;color:var(--text)}
.cn-st{display:grid}
.cn-st>*{grid-area:1/1;justify-self:end;display:inline-flex;align-items:center;gap:.5cqw;padding:.5cqw 1.3cqw;border-radius:99px;font-size:.8em;font-weight:600;white-space:nowrap}
.cn-st-a{background:var(--note);color:var(--note-ink);opacity:0}
.cena.anima .cn-st-a.v:not(.v2){opacity:1;transform:none}
.cn-st-b{background:var(--ok-soft);color:var(--ok-ink)}
.cn-corpo{font-size:1.06em;line-height:1.45;color:var(--text)}
.cn-var{font-style:normal;padding:0 .5cqw;border-radius:.6cqw;background:var(--brand-soft);color:var(--brand);font-weight:600}
.cn-bt{margin:0 -2.8cqw -2.4cqw;padding:1.2cqw;border-top:1px solid var(--line);text-align:center;color:var(--brand);font-weight:600;font-size:.92em}
.cn-anel-ok{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 .35cqw rgba(37,211,102,.45);pointer-events:none}

/* funil */
.cn-funil{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;width:84cqw;align-items:start}
.cn-col{display:flex;flex-direction:column;gap:1.2cqw;padding:1.6cqw;border-radius:1.8cqw;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(12,16,32,.06)}
.cn-col>b{font-size:.86em;color:var(--text);padding:0 .3cqw}
.cn-vaga,.cn-card{display:flex;flex-direction:column;justify-content:center;gap:.9cqw;height:10cqw;border-radius:1.3cqw}
.cn-vaga{border:.25cqw dashed var(--line-2);opacity:.8}
.cn-gh{display:flex;flex-direction:column;justify-content:center;gap:.8cqw;height:7cqw;padding:0 1.4cqw;border-radius:1.3cqw;background:#fff;box-shadow:0 .1cqw .3cqw rgba(12,16,32,.06);opacity:.75}
.cn-gh::before,.cn-gh::after{content:"";display:block;height:1cqw;border-radius:99px;background:var(--bg-2)}
.cn-gh::before{width:62%}.cn-gh::after{width:40%}
.cn-card{position:relative;padding:0 1.4cqw;background:#fff;box-shadow:0 0 0 .3cqw var(--brand-tint),0 1.6cqw 3.2cqw -1.4cqw rgba(79,70,229,.55)}
.cn-cd{display:flex;align-items:center;gap:1cqw;padding-right:3.2cqw;font-size:.86em;white-space:nowrap;overflow:hidden}
.cn-cd b{overflow:hidden;text-overflow:ellipsis}
.cn-card .cn-bar{flex:none;width:70%}
.cn-ok{position:absolute;right:1.2cqw;top:1.2cqw;display:grid;place-items:center;width:3cqw;height:3cqw;border-radius:50%;background:var(--ok);color:#fff}
.cn-ok svg{width:2cqw;height:2cqw}
.cena.anima .cn-card[data-t]{transition:opacity .45s var(--e-out),transform .9s var(--e-move)}
.cena.anima .cn-card[data-t]:not(.v2){transform:translateX(calc(-200% - 11.2cqw))}
.cena.anima .cn-card.v2:not(.v3){transform:translateX(calc(-100% - 5.6cqw))}
.cena.anima .cn-ok{transition:opacity .3s var(--e-out),transform .45s var(--e-out)}
.cena.anima .cn-card:not(.v3) .cn-ok{opacity:0;transform:scale(.5)}

/* agenda */
.cn-agenda{width:60cqw}
.cn-ah{display:flex;align-items:center;gap:1cqw;margin-bottom:1.8cqw}
.cn-ah svg{color:var(--brand)}
.cn-grade{display:grid;grid-template-columns:repeat(5,1fr);gap:1cqw}
.cn-dia{display:flex;flex-direction:column;gap:.9cqw;text-align:center}
.cn-sl{position:relative;display:block;height:4.6cqw;border-radius:1cqw;background:var(--bg-2)}
.cn-sl.cn-oc{background:#E2E4EE}
.cn-fill{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:var(--brand);color:#fff;font-style:normal;font-weight:600;font-size:.86em;box-shadow:0 1.2cqw 2.4cqw -1cqw rgba(79,70,229,.7)}
.cena.anima .cn-fill[data-t]:not(.v){transform:scale(.6)}
.cn-conf{position:absolute;right:6cqw;bottom:5.5cqw;display:flex;align-items:center;gap:1.3cqw;padding:1.6cqw 2.2cqw}
.cn-conf span:last-child{display:flex;flex-direction:column}
.cn-okc{display:grid;place-items:center;width:4.6cqw;height:4.6cqw;border-radius:50%;background:var(--ok);color:#fff}

/* áudio virando texto */
.cn-audio{width:62cqw;display:flex;flex-direction:column;gap:1.8cqw}
.cn-voz{display:flex;align-items:center;gap:1.4cqw;padding:1.3cqw 1.8cqw;border-radius:1.8cqw;background:var(--ok-soft)}
.cn-voz small{color:var(--ok-ink)}
.cn-play{display:grid;place-items:center;flex:none;width:4.6cqw;height:4.6cqw;border-radius:50%;background:var(--ok-ink);color:#fff}
.cn-play svg{width:2.2cqw;height:2.2cqw;margin-left:.3cqw}
.cn-onda{flex:1;display:flex;align-items:center;gap:.45cqw;height:5cqw}
.cn-onda i{flex:1;height:calc(var(--h)*1%);border-radius:99px;background:var(--ok-ink);opacity:.6;animation:cn-onda 1.3s ease-in-out infinite;animation-delay:calc(var(--i)*-.11s)}
@keyframes cn-onda{0%,100%{transform:scaleY(.5)}50%{transform:none}}
.cn-trans{display:flex;flex-direction:column;gap:.8cqw;padding:1.6cqw 1.8cqw;border-radius:1.6cqw;background:var(--bg-2)}
.cn-tt{display:flex;align-items:center;gap:.6cqw}
small.cn-tt{color:var(--brand);font-weight:600}
.cn-tx{color:var(--text)}

/* disparo */
.cn-msg{width:34cqw;font-size:1.04em}
.cn-msg small{display:block;margin-bottom:.9cqw}
.cn-lista{display:flex;flex-direction:column;gap:1cqw;width:36cqw}
.cn-ct{display:flex;align-items:center;gap:1.2cqw;padding:.9cqw 1.3cqw;border-radius:1.4cqw;background:#fff;box-shadow:0 .2cqw .6cqw rgba(12,16,32,.07)}
.cn-vv{display:flex;color:var(--brand)}
.cn-vv svg{width:2.8cqw;height:2.8cqw}
.cn-lim{display:flex;flex-direction:column;gap:.7cqw;margin-top:.8cqw}
.cn-medidor{position:relative;display:block;height:1.3cqw;border-radius:99px;background:rgba(12,16,32,.08);overflow:hidden}
.cn-medidor i{position:absolute;inset:0;width:58%;border-radius:inherit;background:var(--brand);transform-origin:left}
.cena.anima .cn-medidor i[data-t]{transition:transform 1.4s var(--e-out)}
.cena.anima .cn-medidor i[data-t]:not(.v){opacity:1;transform:scaleX(0)}

/* canais numa caixa só, e a equipe no mesmo número */
.cn-icones{display:flex;flex-direction:column;gap:1.5cqw}
.cn-ic{display:grid;place-items:center;width:7.4cqw;height:7.4cqw;border-radius:2cqw;background:#fff;box-shadow:0 .2cqw .6cqw rgba(12,16,32,.06),0 1.6cqw 3cqw -1.6cqw rgba(12,16,32,.3)}
.cn-ic img{width:3.8cqw;height:3.8cqw}
.cn-caixa{width:56cqw;display:flex;flex-direction:column;gap:1cqw}
.cn-caixa .cn-tt{margin-bottom:.4cqw}
.cn-caixa .cn-tt svg{color:var(--brand)}
.cn-row{display:flex;align-items:center;gap:1.2cqw;padding:1cqw 1.3cqw;border-radius:1.3cqw;background:#FAFAFC}
.cn-row img{width:2.8cqw;height:2.8cqw}
.cn-row b{flex:none;max-width:52%;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-eq{width:66cqw}
.cn-resp{flex:none;padding:.4cqw 1.1cqw;border-radius:99px;background:var(--brand-soft);color:var(--brand);font-size:.74em;font-weight:600;white-space:nowrap}
.cn-resp.cn-gente{background:var(--ok-soft);color:var(--ok-ink)}

/* tempo de resposta e notas */
.cn-relogio{position:relative;flex:none;width:28cqw;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 .3cqw .8cqw rgba(12,16,32,.06),0 2.6cqw 6cqw -2.6cqw rgba(12,16,32,.32)}
.cn-relogio svg{position:absolute;inset:7%;width:86%;height:86%;color:var(--line-2)}
.cn-ponteiro{position:absolute;left:calc(50% - .45cqw);top:17%;width:.9cqw;height:33%;border-radius:99px;background:var(--brand);transform-origin:50% 100%;transform:rotate(60deg);animation:cn-gira 8s linear infinite}
@keyframes cn-gira{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.cn-centro{position:absolute;left:calc(50% - 1.3cqw);top:calc(50% - 1.3cqw);width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--ink)}
.cn-lado{display:flex;flex-direction:column;gap:2cqw;width:34cqw}
.cn-kpi{display:flex;flex-direction:column;gap:.6cqw}
.cn-kpi b{font-size:2.6em;line-height:1;letter-spacing:-.02em}
.cn-graf{display:flex;flex-direction:column;gap:1cqw;width:30cqw}
.cn-lado .cn-graf{width:auto}
.cn-barras{display:flex;align-items:flex-end;gap:1cqw;height:11cqw}
.cn-barras i{flex:1;height:calc(var(--h)*1%);border-radius:.7cqw .7cqw .25cqw .25cqw;background:var(--brand-tint);transform-origin:bottom}
.cn-barras i:last-child{background:var(--brand)}
.cena.anima .cn-barras i[data-t]{transition:transform .8s var(--e-out)}
.cena.anima .cn-barras i[data-t]:not(.v){opacity:1;transform:scaleY(.06)}
.cn-nt{width:44cqw;display:flex;flex-direction:column;gap:1.8cqw}
.cn-perg{font-size:1.05em;font-weight:500}
.cn-esc{display:flex;gap:1cqw}
.cn-esc span{position:relative;display:grid;place-items:center;flex:1;aspect-ratio:1;border-radius:50%;background:var(--bg-2);font-weight:600;color:var(--text)}
.cn-esc .cn-fill{border-radius:50%;box-shadow:0 1cqw 2cqw -.8cqw rgba(79,70,229,.7)}
.cn-obg{display:flex;align-items:center;gap:.8cqw;color:var(--ok-ink);font-weight:600}

/* conta do mês */
.cn-conta{width:56cqw;display:flex;flex-direction:column;gap:1.4cqw}
.cn-li{display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.cn-li span{color:var(--text)}
.cn-val{display:block;flex:none;width:calc(var(--w)*.3cqw);height:1.5cqw;border-radius:99px;background:var(--brand-tint);transform-origin:right}
.cn-tot{margin-top:.4cqw;padding-top:1.4cqw;border-top:1px dashed var(--line-2)}
.cn-tot span{color:var(--ink);font-weight:600}
.cn-tot .cn-val{background:var(--brand)}
.cena.anima .cn-val[data-t]{transition:transform .8s var(--e-out)}
.cena.anima .cn-val[data-t]:not(.v){opacity:1;transform:scaleX(.05)}

/* lista que vai sendo conferida, com ou sem o escudo */
.cn-chk{width:54cqw;display:flex;flex-direction:column;gap:1.4cqw}
.cn-chk .cn-ct2{margin-bottom:.3cqw}
.cn-it{display:flex;align-items:center;gap:1.3cqw;color:var(--text)}
.cn-cx{position:relative;display:grid;place-items:center;flex:none;width:3.6cqw;height:3.6cqw;border-radius:1cqw;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.cn-cx i{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:var(--brand);color:#fff}
.cn-cx svg{width:2.4cqw;height:2.4cqw}
.cena.anima .cn-cx i[data-t]:not(.v){transform:scale(.5)}
.cn-escudo{position:relative;display:grid;place-items:center;flex:none;width:24cqw;aspect-ratio:1}
.cn-esc-ic{position:relative;z-index:1;display:grid;place-items:center;width:15cqw;height:15cqw;border-radius:50%;background:#fff;color:var(--brand);box-shadow:0 .3cqw .8cqw rgba(12,16,32,.06),0 2.6cqw 6cqw -2.6cqw rgba(79,70,229,.55)}
.cn-esc-ic svg{width:7.4cqw;height:7.4cqw}
.cn-anel{position:absolute;inset:16%;border-radius:50%;box-shadow:inset 0 0 0 .3cqw var(--brand-tint);opacity:0;animation:cn-anel 3.2s var(--e-out) infinite}
.cn-anel+.cn-anel{animation-delay:1.6s}
@keyframes cn-anel{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* um contra o outro */
.cn-vs{width:36cqw;display:flex;flex-direction:column;gap:1.3cqw;font-size:.94em}
.cn-vs>b{font-size:1.1em;margin-bottom:.3cqw}
.cn-vs .cn-it{align-items:flex-start;gap:1cqw}
.cn-ico{display:grid;place-items:center;flex:none;width:2.8cqw;height:2.8cqw;margin-top:.1cqw;border-radius:50%}
.cn-ico svg{width:1.9cqw;height:1.9cqw}
.cn-vs-a{opacity:.86}
.cn-vs-a .cn-ico{background:var(--bg-2);color:var(--muted)}
.cn-vs-b{transform:translateY(-1.6cqw);box-shadow:0 0 0 .3cqw var(--brand-tint),0 3cqw 7cqw -3cqw rgba(79,70,229,.5)}
.cn-vs-b .cn-ico{background:var(--brand);color:#fff}
.cena.anima .cn-vs-b.v:not(.v2){transform:none}

/* anúncio que abre a conversa */
.cn-ad{flex:none;width:28cqw;padding:1.4cqw;display:flex;flex-direction:column;gap:.8cqw}
.cn-img{display:block;aspect-ratio:16/10;border-radius:1.2cqw;background:linear-gradient(135deg,#C7CBFB 0%,#EEF0FF 55%,#E6F7EC 100%)}
.cn-ad b{font-size:.98em;line-height:1.25}
.cn-adbt{display:flex;align-items:center;justify-content:center;gap:.7cqw;margin-top:.3cqw;padding:1cqw;border-radius:1cqw;background:var(--ok-ink);color:#fff;font-weight:600;font-size:.84em}
.cn-adbt img{width:2.4cqw;height:2.4cqw;filter:brightness(0) invert(1)}
.cena.anima .cn-adbt.v2:not(.v3){transform:scale(.93);transition-duration:.14s}
.cena.anima .cn-adbt.v3{transition-duration:.25s}

/* automações ligando */
.cn-auto{width:60cqw;display:flex;flex-direction:column;gap:1.2cqw}
.cn-re{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:1.2cqw 1.5cqw;border-radius:1.3cqw;background:#FAFAFC;color:var(--text)}
.cn-sw{position:relative;flex:none;width:6.4cqw;height:3.6cqw;border-radius:99px;background:#D9DCE6}
.cn-sw::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--brand)}
.cn-sw i{position:absolute;top:.4cqw;left:.4cqw;width:2.8cqw;height:2.8cqw;border-radius:50%;background:#fff;box-shadow:0 .2cqw .5cqw rgba(12,16,32,.25);transform:translateX(2.8cqw)}
.cena.anima .cn-sw::before{transition:opacity .3s ease}
.cena.anima .cn-sw i{transition:transform .4s var(--e-out)}
.cena.anima .cn-re:not(.v2) .cn-sw::before{opacity:0}
.cena.anima .cn-re:not(.v2) .cn-sw i{transform:none}

/* agente de IA aprendendo com o que a empresa já tem */
.cn-docs{display:flex;flex-direction:column;gap:1.2cqw}
.cn-doc{display:flex;align-items:center;gap:1cqw;padding:1.1cqw 1.6cqw;border-radius:1.3cqw;background:#fff;box-shadow:0 .2cqw .6cqw rgba(12,16,32,.07);font-size:.9em;font-weight:500;white-space:nowrap}
.cn-doc svg{color:var(--brand)}
.cn-orbe{position:relative;display:grid;place-items:center;flex:none;width:15cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 28%,#8E88F8 0%,var(--brand) 58%,#3730A3 100%);color:#fff;box-shadow:0 2.4cqw 5cqw -1.8cqw rgba(79,70,229,.75)}
.cn-orbe>svg{position:relative;z-index:1;width:6.4cqw;height:6.4cqw}
.cn-orbe .cn-anel{inset:-4%}
.cn-iaresp{display:flex;flex-direction:column;width:30cqw}
.cn-iaresp .cn-b{max-width:100%}

/* ficha do contato */
.cn-ficha{width:50cqw;display:flex;flex-direction:column;gap:1.2cqw}
.cn-fh{display:flex;align-items:center;gap:1.4cqw;padding-bottom:1.3cqw;border-bottom:1px solid var(--line)}
.cn-fh .cn-av{width:6.2cqw;height:6.2cqw;font-size:1em}
.cn-fh>span{display:flex;flex-direction:column}
.cn-fh b{font-size:1.08em}
.cn-fd{display:flex;justify-content:space-between;gap:2cqw}
.cn-fd span{font-weight:500;color:var(--text)}
.cn-tags{display:flex;flex-wrap:wrap;gap:.8cqw;margin-top:.3cqw}
.cn-tag{padding:.5cqw 1.3cqw;border-radius:99px;background:var(--brand-soft);color:var(--brand);font-size:.8em;font-weight:600}

/* mensagens programadas */
.cn-linha{width:60cqw;display:flex;flex-direction:column;gap:1.4cqw}
.cn-pa{position:relative;display:flex;align-items:center;gap:1.4cqw;color:var(--text)}
.cn-pa>span:first-of-type{flex:1}
.cn-pt{flex:none;width:2.2cqw;height:2.2cqw;margin-left:.4cqw;border-radius:50%;background:var(--brand);box-shadow:0 0 0 .7cqw var(--brand-soft)}
.cn-st2{display:grid}
.cn-st2 em{grid-area:1/1;justify-self:end;display:inline-flex;align-items:center;gap:.4cqw;padding:.4cqw 1.1cqw;border-radius:99px;font-style:normal;font-size:.74em;font-weight:600;white-space:nowrap}
.cn-pr{background:var(--bg-2);color:var(--muted);opacity:0}
.cn-en{background:var(--ok-soft);color:var(--ok-ink)}
.cena.anima .cn-st2 em{transition:opacity .3s ease}
.cena.anima .cn-pa:not(.v2) .cn-pr{opacity:1}
.cena.anima .cn-pa:not(.v2) .cn-en{opacity:0}

/* chat no site */
.cn-nav{position:relative;width:80cqw;height:45cqw;border-radius:1.8cqw;background:#fff;overflow:hidden;box-shadow:0 .3cqw .8cqw rgba(12,16,32,.06),0 2.6cqw 6cqw -2.6cqw rgba(12,16,32,.32)}
.cn-nb{display:flex;align-items:center;gap:.8cqw;padding:1.2cqw 1.6cqw;background:#F1F2F7}
.cn-nb>i{width:1.2cqw;height:1.2cqw;border-radius:50%;background:#D5D8E3}
.cn-url{flex:0 1 50%;margin-left:1.6cqw;padding:.45cqw 1.4cqw;border-radius:99px;background:#fff;font-size:.76em;color:var(--muted)}
.cn-pg{display:flex;flex-direction:column;gap:1.4cqw;padding:3.4cqw 3.8cqw}
.cn-pg>i{display:block;height:1.6cqw;border-radius:99px;background:var(--bg-2)}
.cn-pg>i.cn-h{height:3.4cqw;background:#E2E4EE}
.cn-blocos{display:flex;gap:1.6cqw;margin-top:1cqw}
.cn-blocos i{flex:0 0 13cqw;height:9cqw;border-radius:1.2cqw;background:var(--bg-2)}
.cn-wid{position:absolute;right:2.2cqw;bottom:2.2cqw;width:36cqw;padding:0;overflow:hidden;transform-origin:bottom right}
.cn-wh{display:flex;align-items:center;gap:.9cqw;padding:1.2cqw 1.6cqw;background:var(--brand);color:#fff;font-size:.86em}
.cn-wid .cn-msgs{padding:1.4cqw;font-size:.92em}

/* movimentos contínuos: só com a capa na tela (cenas.js, classe on) */
.cn-dig i,.cn-onda i,.cn-ponteiro,.cn-anel{animation-play-state:paused!important}
.cena.on .cn-dig i,.cena.on .cn-onda i,.cena.on .cn-ponteiro,.cena.on .cn-anel{animation-play-state:running!important}
.cena:not(.on) .cn-anel{opacity:0}
@media (prefers-reduced-motion:reduce){.cena *{animation:none!important}.cn-anel{display:none}}