/* Porta Maestro — piloto. Linguagem visual no estilo Apple: claro por padrão, escuro automático, SF Pro, um único azul de destaque.
   Os momentos WOW (cena, pixel art, mapa, vitrine) ficam em "telas" escuras dentro de cartões claros, como um produto fotografado. */

/* ---------------------------------------------------------------------------------------------- fontes */
/* faturamento: Proxima Nova (licença comercial: usada se estiver instalada no aparelho) e Figtree (OFL, local) como reserva */
@font-face{font-family:"Proxima Nova";src:local("Proxima Nova Bold"),local("ProximaNova-Bold"),local("Proxima Nova Semibold"),local("ProximaNova-Semibold");font-weight:700;font-display:swap}
@font-face{font-family:"Figtree";src:url(/vendor/fonts/figtree-latin.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";src:url(/vendor/fonts/figtree-latin-ext.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------------------------------------------------------------------- tokens */
:root{
  color-scheme:light dark;
  --bg:#f5f5f7;--surface:#fff;--surface-2:#f5f5f7;--fill:rgba(120,120,128,.12);--fill-2:rgba(120,120,128,.07);
  --text:#1d1d1f;--text-2:#6e6e73;--text-3:#86868b;
  --sep:rgba(0,0,0,.1);--sep-2:rgba(0,0,0,.06);
  --accent:#0071e3;--accent-h:#0077ed;--accent-soft:rgba(0,113,227,.09);--accent-ring:rgba(0,113,227,.28);--on-accent:#fff;
  --bubble:#e9e9eb;--bubble-me:#0071e3;
  /* cores do sistema (ícones e marcadores) e as versões legíveis como texto sobre fundo claro */
  --blue:#007aff;--purple:#af52de;--pink:#ff2d55;--orange:#ff9500;--green:#34c759;--teal:#30b0c7;--indigo:#5856d6;--red:#ff3b30;--gray:#8e8e93;
  --t-orange:#c93400;--t-green:#248a3d;--t-pink:#d30f45;--t-purple:#8944ab;--t-teal:#0071a4;--t-red:#d70015;
  --whats:var(--green);--clube:var(--orange);--comu:var(--purple);--email:var(--blue);
  --ia:linear-gradient(90deg,#0a84ff,#8e5cf7 45%,#ff375f 80%,#ff9f0a);
  --shadow:0 1px 1px rgba(0,0,0,.02),0 2px 8px rgba(0,0,0,.05);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.06);
  --screen:#0b0b0e;--screen-sep:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.72);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --numero:"Proxima Nova","Figtree",var(--display);
  --ease:cubic-bezier(.16,1,.3,1);
  --muted:var(--text-2);--dim:var(--text-3);--border:var(--sep);--card:var(--surface);--elev:var(--surface);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000;--surface:#1c1c1e;--surface-2:#2c2c2e;--fill:rgba(120,120,128,.24);--fill-2:rgba(120,120,128,.14);
    --text:#f5f5f7;--text-2:#a1a1a6;--text-3:#8d8d93;
    --sep:rgba(255,255,255,.13);--sep-2:rgba(255,255,255,.07);
    --accent:#0a84ff;--accent-h:#409cff;--accent-soft:rgba(10,132,255,.16);--accent-ring:rgba(10,132,255,.4);
    --bubble:#262629;--bubble-me:#0a84ff;
    --blue:#0a84ff;--purple:#bf5af2;--pink:#ff375f;--orange:#ff9f0a;--green:#30d158;--teal:#40c8e0;--indigo:#5e5ce6;--red:#ff453a;--gray:#98989d;
    --t-orange:#ff9f0a;--t-green:#30d158;--t-pink:#ff375f;--t-purple:#bf5af2;--t-teal:#40c8e0;--t-red:#ff453a;
    --shadow:0 0 0 1px rgba(255,255,255,.05);
    --shadow-lg:0 12px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
    --screen:#000;--glass:rgba(28,28,30,.72);
  }
}
:root[data-theme="dark"]{
  --bg:#000;--surface:#1c1c1e;--surface-2:#2c2c2e;--fill:rgba(120,120,128,.24);--fill-2:rgba(120,120,128,.14);
  --text:#f5f5f7;--text-2:#a1a1a6;--text-3:#8d8d93;
  --sep:rgba(255,255,255,.13);--sep-2:rgba(255,255,255,.07);
  --accent:#0a84ff;--accent-h:#409cff;--accent-soft:rgba(10,132,255,.16);--accent-ring:rgba(10,132,255,.4);
  --bubble:#262629;--bubble-me:#0a84ff;
  --blue:#0a84ff;--purple:#bf5af2;--pink:#ff375f;--orange:#ff9f0a;--green:#30d158;--teal:#40c8e0;--indigo:#5e5ce6;--red:#ff453a;--gray:#98989d;
  --t-orange:#ff9f0a;--t-green:#30d158;--t-pink:#ff375f;--t-purple:#bf5af2;--t-teal:#40c8e0;--t-red:#ff453a;
  --shadow:0 0 0 1px rgba(255,255,255,.05);
  --shadow-lg:0 12px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
  --screen:#000;--glass:rgba(28,28,30,.72);
}

/* ---------------------------------------------------------------------------------------------- base */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.5;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh}
.bg{position:fixed;inset:0;z-index:-1;background:var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;letter-spacing:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:none;box-shadow:0 0 0 4px var(--accent-ring)!important}
/* rótulos pequenos: com inicial maiúscula, sem caixa-alta nem fonte mono */
.prova .k,.b.bot .selo,.b.frase small,.b.achado small,.b.reacao small,.b.revisao small,.notas small,.cena-k,.cena-leg small,.px-k,.px-fat small,.mp-k,.pv-k,.final .pauta small,.final .bloco small,.diag-h,.diag-i small,.naop small,.kit small.k,.agente .lado small,.triagem .tk span,.rs .kick{text-transform:none;letter-spacing:-.005em;font-family:var(--sans)}
.prova .k::first-letter,.b.bot .selo::first-letter,.b.frase small::first-letter,.b.achado small::first-letter,.b.reacao small::first-letter,.b.revisao small::first-letter,.notas small::first-letter,.cena-k::first-letter,.cena-leg small::first-letter,.px-k::first-letter,.px-fat small::first-letter,.mp-k::first-letter,.pv-k::first-letter,.final .pauta small::first-letter,.final .bloco small::first-letter,.diag-h::first-letter,.diag-i small::first-letter,.naop small::first-letter,.kit small.k::first-letter,.agente .lado small::first-letter{text-transform:uppercase}

.piloto{font-size:12px;line-height:1.4;color:var(--text-2);text-align:center;padding:9px 16px;background:var(--surface-2);border-bottom:1px solid var(--sep-2)}
.piloto a{color:var(--accent)}
.app{max-width:1060px;margin:0 auto;padding:28px 20px 110px;display:grid;grid-template-columns:minmax(0,600px) minmax(0,300px);gap:40px;justify-content:center}

/* ---------------------------------------------------------------------------------------------- topo e progresso */
.topo{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.orb{position:relative;width:32px;height:32px;border-radius:50%;flex:0 0 auto;overflow:hidden;isolation:isolate;background:#5e5ce6;box-shadow:0 2px 12px rgba(94,92,230,.3)}
/* luz em movimento, desfocada (como a Siri), e não uma roda de cores */
.orb::before{content:"";position:absolute;inset:-35%;background:conic-gradient(from 0deg,#0a84ff,#5e5ce6,#bf5af2,#ff375f,#ff9f0a,#64d2ff,#0a84ff);filter:blur(7px);animation:spin 12s linear infinite}
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85),rgba(255,255,255,.18) 42%,rgba(255,255,255,0) 68%),radial-gradient(circle at 50% 120%,rgba(0,0,0,.18),transparent 60%)}
.orb.pensando{animation:respira 1.6s ease-in-out infinite}
.orb.pensando::before{animation-duration:1.4s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes respira{0%,100%{box-shadow:0 2px 10px rgba(94,92,230,.28)}50%{box-shadow:0 2px 22px rgba(94,92,230,.55)}}
.marca b{display:block;font-family:var(--display);font-size:19px;line-height:1.2;font-weight:600;letter-spacing:-.022em}
.marca span{font-size:14px;color:var(--text-2)}
.prog{height:4px;border-radius:999px;background:var(--fill);overflow:hidden}
.prog i{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width .9s var(--ease)}
.progl{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3);margin:7px 0 18px;min-height:16px;font-variant-numeric:tabular-nums}
.prova{background:var(--surface);border-radius:14px;padding:11px 14px;font-size:14px;line-height:1.45;color:var(--text-2);margin-bottom:18px;box-shadow:var(--shadow);animation:pop .4s var(--ease)}
.prova .k{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:1px}

/* ---------------------------------------------------------------------------------------------- conversa */
.msgs{display:flex;flex-direction:column;gap:10px}
.b{max-width:86%;padding:10px 15px;border-radius:20px;font-size:16px;line-height:1.42;animation:pop .38s var(--ease);overflow-wrap:anywhere}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.b.bot{background:var(--bubble);color:var(--text);border-bottom-left-radius:6px;align-self:flex-start}
.b.bot .ajuda{display:block;font-size:14px;color:var(--text-2);margin-top:4px}
.b.bot .selo{display:inline-block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:2px}
.b.me{background:var(--bubble-me);color:#fff;border-bottom-right-radius:6px;align-self:flex-end;white-space:pre-wrap;margin-bottom:6px}
.b.me mark.centro{color:#fff;background-image:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.9))}
/* momentos WOW na conversa: cartão branco, com o rótulo no gradiente discreto da IA */
.b.bot.wow{background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--sep-2);border-radius:20px;border-bottom-left-radius:6px;padding:13px 16px 14px}
.b.bot.wow .selo{background:var(--ia);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:12.5px;font-weight:600;opacity:1}
@keyframes brilho{to{background-position:300% 0}}
.b.frase{align-self:flex-start;max-width:92%;background:var(--surface);border-radius:20px;padding:14px 18px 15px;box-shadow:var(--shadow);font-family:var(--display);font-size:18px;line-height:1.38;font-weight:500;letter-spacing:-.018em}
.b.frase small{display:block;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--text-2);letter-spacing:-.005em;margin-bottom:5px}
mark.centro{background:none;color:inherit;background-image:linear-gradient(90deg,var(--accent),var(--purple));background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;animation:risco 1.1s .25s var(--ease) forwards;padding-bottom:1px}
@keyframes risco{to{background-size:100% 2px}}
.digitando{align-self:flex-start;display:flex;gap:5px;padding:14px 15px;background:var(--bubble);border-radius:20px;border-bottom-left-radius:6px}
.digitando i{width:8px;height:8px;border-radius:50%;background:var(--text-3);animation:dot 1.2s infinite}
.digitando i:nth-child(2){animation-delay:.15s}.digitando i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:.9;transform:translateY(-2px)}}
.b.ponte{align-self:flex-start;max-width:86%;background:transparent;color:var(--text-2);font-size:15px;padding:2px 4px 2px 15px;border-radius:0;border-left:2px solid var(--sep)}
.b.achado,.b.reacao{align-self:flex-start;max-width:86%;background:var(--surface);box-shadow:var(--shadow);border-radius:18px;padding:11px 15px;font-size:15.5px}
.b.achado small,.b.reacao small,.b.revisao small{display:block;font-size:12.5px;font-weight:600;color:var(--t-orange);margin-bottom:2px}
.b.reacao small{color:var(--t-teal)}
.b.revisao{align-self:flex-start;max-width:88%;background:var(--surface);box-shadow:var(--shadow);padding:11px 15px}
.b.revisao small{color:var(--t-pink)}
.b.revisao s{color:var(--text-3);text-decoration-color:var(--pink);text-decoration-thickness:1.5px;display:block;margin-bottom:6px}
.b.frase .nome{display:block;margin-top:12px;padding-top:11px;border-top:1px solid var(--sep-2);font-family:var(--sans);font-size:14.5px;font-weight:400;line-height:1.45;letter-spacing:-.008em;color:var(--text-2)}
.b.frase .nome b{color:var(--text);font-weight:600;background:var(--accent-soft);padding:1px 8px;border-radius:7px}

/* ---------------------------------------------------------------------------------------------- entrada */
.entrada{margin-top:22px}
.campo{display:flex;gap:6px;align-items:flex-end;border:1px solid var(--sep);border-radius:22px;background:var(--surface);padding:3px 3px 3px 16px;transition:border-color .2s,box-shadow .2s}
.campo:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.campo textarea,.campo input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font:inherit;font-size:16px;resize:none;min-height:30px;max-height:220px;padding:9px 0;line-height:1.45}
.campo textarea::placeholder,.campo input::placeholder{color:var(--text-3)}
.campo textarea:focus-visible,.campo input:focus-visible{box-shadow:none!important}
/* enviar: botão de 44 px com o círculo azul de 32 px dentro, como no Mensagens */
.enviar{flex:0 0 auto;width:44px;height:44px;border:0;padding:0;border-radius:50%;background:radial-gradient(circle,var(--accent) 15.5px,transparent 16px);color:#fff;cursor:pointer;display:grid;place-items:center;transition:transform .15s,opacity .2s}
.enviar svg{width:16px;height:16px;display:block}
.enviar:active{transform:scale(.92)}
.enviar:disabled{background:radial-gradient(circle,var(--fill) 15.5px,transparent 16px);color:var(--text-3);cursor:default}
.contato .campo{padding:3px 14px 3px 16px;border-radius:14px}
.atalho{margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:30px;align-items:center}
.chip{font-size:13px;padding:5px 11px;border-radius:999px;color:var(--accent);background:var(--accent-soft);animation:pop .3s}
.chip.alt{cursor:pointer;color:var(--text-2);background:var(--fill-2);min-height:32px}
.chip.alt:hover{color:var(--text)}
.chip.alt.on{color:var(--accent);background:var(--accent-soft)}
.dicas{font-size:13.5px;color:var(--text-3);margin:8px 4px 0;min-height:20px}
.dica{display:inline-block;margin-right:12px;transition:opacity .6s,color .3s}
.dica.feita{color:var(--t-green);text-decoration:line-through;opacity:0;transition:opacity 1.4s .6s,color .3s}
.comecos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.comecos button{font-size:14px;padding:7px 13px;border-radius:999px;border:0;background:var(--fill-2);color:var(--text);cursor:pointer;min-height:36px;transition:background .2s}
@media (hover:hover){.comecos button:hover{background:var(--fill)}}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts.col{flex-direction:column}
.opt{position:relative;min-height:50px;padding:12px 18px;border-radius:14px;border:0;background:var(--surface);color:var(--text);cursor:pointer;text-align:left;font-size:16px;line-height:1.35;box-shadow:inset 0 0 0 1px var(--sep),var(--shadow);transition:box-shadow .2s,background .2s,transform .12s,color .2s}
@media (hover:hover){.opt:hover{box-shadow:inset 0 0 0 1px var(--accent),var(--shadow)}}
.opt:active{transform:scale(.985)}
.opt:disabled{opacity:.4;cursor:default}
.opt.on{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
/* "Não sei" e "Escrever com as minhas palavras": botões de verdade, mas num segundo plano visual */
.opt.nao-sei{background:transparent;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--sep)}
.opt.escrever{display:inline-flex;align-items:center;gap:9px;background:var(--accent-soft);color:var(--accent);font-weight:500;box-shadow:none}
.opt.escrever svg{width:17px;height:17px;flex:0 0 auto}
@media (hover:hover){.opt.escrever:hover{box-shadow:inset 0 0 0 1px var(--accent)}}
.opt.escrever.on{box-shadow:inset 0 0 0 2px var(--accent)}
.discreta{margin:10px 18px 0 0;background:none;border:0;color:var(--text-2);cursor:pointer;font-size:14.5px;padding:10px 2px;min-height:44px}
.discreta:hover{color:var(--accent)}
.nota{font-size:13px;color:var(--text-3);margin:10px 4px 0}
.hesita{font-size:14.5px;color:var(--text);margin-top:12px;padding:11px 14px;background:rgba(255,149,0,.1);border-radius:14px;animation:pop .4s}
.erro{color:var(--t-red);font-size:14px;margin-top:8px}
.contato label{display:block;font-size:13px;font-weight:500;color:var(--text-2);margin:14px 4px 6px}
.contato label:first-child{margin-top:0}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:400!important;color:var(--text-2)!important;margin:16px 4px 0!important;line-height:1.45;cursor:pointer}
.consent input{margin-top:1px;width:20px;height:20px;accent-color:var(--accent);flex:0 0 auto}
.btn-grande{margin-top:18px;width:100%;min-height:50px;border-radius:980px;border:0;background:var(--accent);color:var(--on-accent);font-weight:500;font-size:17px;letter-spacing:-.022em;cursor:pointer;transition:background .2s,transform .12s,opacity .2s}
@media (hover:hover){.btn-grande:hover:not(:disabled){background:var(--accent-h)}}
.btn-grande:active:not(:disabled){transform:scale(.99)}
.btn-grande:disabled{opacity:.35;cursor:default}
.livre{margin-top:12px;animation:pop .3s}
.livre label{display:block;font-size:14px;color:var(--text-2);margin:0 4px 8px}
.opts.col + .btn-grande{margin-top:12px}
/* várias respostas (treinamento: áreas e ferramentas): círculo com visto, como nos Lembretes */
.opt.multi{padding-left:50px}
.opt.multi::before{content:'';position:absolute;left:16px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--text-3);transition:background .2s,box-shadow .2s}
.opt.multi.on{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.opt.multi.on::before{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:none}
/* sugestões de segmento: as 3 mais prováveis (Jev) em cima, um pouco maiores */
.sugestoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sugestoes button{font-size:14px;padding:7px 13px;border-radius:999px;border:0;background:var(--fill-2);color:var(--text);cursor:pointer;min-height:36px;transition:background .2s,box-shadow .2s}
@media (hover:hover){.sugestoes button:hover{background:var(--fill)}}
.sugestoes button.top{font-size:15px;font-weight:500;padding:8px 16px;min-height:40px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--sep),var(--shadow)}
@media (hover:hover){.sugestoes button.top:hover{box-shadow:inset 0 0 0 1px var(--accent),var(--shadow);background:var(--surface)}}
.sugestoes .quebra{flex-basis:100%;height:2px}

/* ---------------------------------------------------------------------------------------------- anotações ao vivo */
.notas{margin-top:10px;background:var(--surface);box-shadow:var(--shadow);border-radius:16px;padding:10px 14px 9px;animation:pop .35s}
.msgs > .notas{align-self:flex-start;max-width:86%;margin-top:0}
.notas small{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:4px}
.notas ul{margin:0;padding:0;list-style:none;font-size:14.5px;color:var(--text)}
.notas li{position:relative;padding:3px 0 3px 22px}
.notas li::before{content:"";position:absolute;left:1px;top:8px;width:13px;height:13px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/9px no-repeat}
.notas li.novo{animation:notaEntra .45s var(--ease)}
@keyframes notaEntra{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------------------------------------- ficha lateral e radar */
.col-ficha{position:sticky;top:24px;align-self:start;margin-top:58px}
.col-ficha details{border-radius:18px;background:var(--surface);box-shadow:var(--shadow);padding:15px 18px}
.col-ficha summary{list-style:none;display:flex;align-items:center;cursor:pointer;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em;min-height:28px}
.col-ficha summary::-webkit-details-marker{display:none}
.col-ficha summary small{margin-left:auto;font-family:var(--sans);font-size:12.5px;color:var(--text-3);font-weight:400;letter-spacing:0;font-variant-numeric:tabular-nums}
.col-ficha summary::after{content:"";flex:0 0 auto;width:7px;height:7px;margin:0 3px 3px 12px;border-right:1.8px solid var(--text-3);border-bottom:1.8px solid var(--text-3);transform:rotate(45deg);transition:transform .25s var(--ease)}
.col-ficha details[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.ficha-vazia{font-size:14px;color:var(--text-3);margin:8px 0 0}
.ficha{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}
.ficha li{animation:pop .4s;border-top:1px solid var(--sep-2);padding:9px 0}
.ficha li:first-child{border-top:0;padding-top:2px}
.ficha li:last-child{padding-bottom:0}
.ficha .k{display:block;font-size:12px;color:var(--text-3);line-height:1.35}
.ficha .v{font-size:14.5px;line-height:1.4}
.ficha .ed{background:none;border:0;color:var(--accent);font-size:13px;cursor:pointer;padding:2px 0;margin-left:6px;min-height:28px}
.radar-box{margin-top:14px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow);padding:15px 18px}
.radar-box h3{margin:0;font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.02em}
.radar-box p{margin:0 0 6px;font-size:12.5px;color:var(--text-3)}
.radar-box svg{width:100%;height:auto;display:block}
.rd-grade{fill:none;stroke:var(--sep)}
.rd-rot{fill:var(--text-2);font-family:var(--sans);font-size:10.5px;text-anchor:middle}
.rd-area{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.ficha-inline{display:flex;flex-direction:column;gap:0;margin-top:12px;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.ficha-inline .linha{border:0;border-top:1px solid var(--sep-2);padding:11px 16px;background:transparent;cursor:pointer;text-align:left;color:var(--text);min-height:52px;transition:background .15s}
.ficha-inline .linha:first-child{border-top:0}
@media (hover:hover){.ficha-inline .linha:hover{background:var(--fill-2)}}
.ficha-inline .linha .k{display:block;font-size:12px;color:var(--text-3)}
.ficha-inline .linha.fixa{cursor:default}
.ficha-inline .linha.fixa:hover{background:transparent}
.ficha-inline .edit{display:flex;gap:6px;margin-top:8px}
.ficha-inline .edit input,.ficha-inline .edit select{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--sep);border-radius:10px;color:var(--text);padding:9px 11px;font:inherit;font-size:15px}
.ficha-inline .edit button{min-height:40px;border-radius:980px;border:0;background:var(--accent);color:#fff;font-weight:500;padding:0 16px;cursor:pointer}
.ficha-inline + .opts{margin-top:12px}

/* ---------------------------------------------------------------------------------------------- final */
.batidas{display:flex;flex-direction:column;gap:6px;margin:4px 0}
.batida{font-size:15px;color:var(--text-2);opacity:0;animation:batida .5s forwards}
.batida::before{content:"✓ ";color:var(--t-green);font-weight:600}
@keyframes batida{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.final{position:relative;border-radius:22px;padding:24px 22px 22px;background:var(--surface);box-shadow:var(--shadow-lg);animation:pop .55s var(--ease)}
.final h2{font-family:var(--display);font-size:24px;line-height:1.2;font-weight:600;margin:0 0 10px;letter-spacing:-.026em}
.final .fr{color:var(--text);font-family:var(--display);font-size:17px;font-weight:500;line-height:1.4;letter-spacing:-.018em;margin:0 0 16px}
.final p{color:var(--text-2);margin:0 0 14px;font-size:16px;line-height:1.5}
.final .pauta,.final .bloco{background:var(--surface-2);border-radius:14px;padding:12px 14px;font-size:15px;color:var(--text);margin:0 0 12px}
.final .pauta small,.final .bloco small{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:3px}
.final .bloco ul{margin:0;padding-left:18px;color:var(--text);font-size:15px}
.final .bloco li{margin:5px 0}
.final .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:20px}
.final .cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:980px;font-weight:500;font-size:17px;letter-spacing:-.022em;color:var(--on-accent);background:var(--accent);text-decoration:none;transition:background .2s,transform .12s}
@media (hover:hover){.final .cta:hover{background:var(--accent-h);text-decoration:none}}
.final .cta:active{transform:scale(.985)}
.final .cta2{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;color:var(--accent);font-size:17px;letter-spacing:-.022em;text-decoration:none}
.final .cta2::after{content:"";width:7px;height:7px;margin-left:7px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg);margin-top:1px}
.final .cta2:hover{text-decoration:underline}
.recomecar{margin-top:18px;background:none;border:0;color:var(--text-2);cursor:pointer;font-size:14px;min-height:44px;padding:0 2px}
.recomecar:hover{color:var(--accent)}
.retomar{background:var(--surface);box-shadow:var(--shadow);border-radius:20px;padding:18px 20px}
.retomar p{margin:0 0 14px}
.rs-diag li{margin:6px 0}
.diag{background:var(--surface);box-shadow:var(--shadow);border-radius:20px;padding:16px 18px;animation:pop .5s var(--ease)}
.diag-h{font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:8px}
.diag-i{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--sep-2);animation:pop .5s var(--ease);font-size:15.5px;line-height:1.5}
.diag-i:first-of-type{border-top:0}
.diag-n{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center}
.diag-i small{display:block;font-size:12px;color:var(--text-3);margin-bottom:2px}
.diag .nome-p{font-size:14px;color:var(--text-2);margin:-4px 0 10px}
.diag .nome-p b{color:var(--text);background:var(--accent-soft);padding:1px 8px;border-radius:7px}

/* ---------------------------------------------------------------------------------------------- bastidores (lupa e gaveta) */
.lupa{position:fixed;right:16px;bottom:16px;z-index:30;border:0;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:var(--text-2);border-radius:999px;padding:10px 16px;font-size:13px;font-weight:500;cursor:pointer;min-height:44px;box-shadow:var(--shadow-lg)}
.lupa:hover{color:var(--text)}
.gaveta{position:fixed;right:16px;bottom:72px;z-index:31;width:min(460px,calc(100vw - 32px));max-height:min(70vh,640px);overflow:auto;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);border-radius:20px;box-shadow:var(--shadow-lg)}
.gaveta-h{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:12px 12px 12px 18px;background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--sep-2);font-size:15px}
.gaveta-h button{background:var(--fill);border:0;color:var(--text-2);font-size:13px;cursor:pointer;width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.gaveta-corpo{padding:12px 16px;font-size:13px}
.gaveta-corpo .call{background:var(--surface);border-radius:12px;padding:10px 12px;margin-bottom:10px;box-shadow:var(--shadow)}
.gaveta-corpo .call b{font-family:var(--mono);font-size:12px;color:var(--t-purple)}
.gaveta-corpo .call .t{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.gaveta-corpo .ans{display:grid;grid-template-columns:130px 1fr;gap:3px 10px;margin-top:6px}
.gaveta-corpo .ans span:nth-child(odd){font-family:var(--mono);font-size:11.5px;color:var(--text-3)}
.gaveta-corpo .cand{margin:4px 0;padding-left:8px;border-left:2px solid var(--sep)}
.gaveta-corpo .cand.ok{border-color:var(--green)}

/* ---------------------------------------------------------------------------------------------- resumo imprimível */
body.resumo{background:var(--bg)}
.rs{max-width:680px;margin:0 auto;padding:48px 20px 64px}
.rs .kick{font-size:13px;font-weight:600;color:var(--text-2)}
.rs h1{font-family:var(--display);font-size:34px;line-height:1.15;font-weight:700;letter-spacing:-.03em;margin:8px 0 18px}
.rs h2{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.022em;margin:32px 0 10px}
.rs-frase{font-family:var(--display);font-size:19px;font-weight:500;line-height:1.4;letter-spacing:-.018em}
.rs dl{display:grid;grid-template-columns:160px 1fr;gap:10px 14px;background:var(--surface);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
.rs dt{font-size:13px;color:var(--text-3);padding-top:1px}
.rs dd{margin:0}
.rs-pauta,.rs-mail,.rs-q{border-radius:14px;padding:14px 16px;background:var(--surface);box-shadow:var(--shadow)}
.rs-foot{margin-top:32px;font-size:13px;color:var(--text-3)}
@media print{:root{--bg:#fff;--surface:#fff;--text:#111;--text-2:#444;--text-3:#666;--shadow:none}body,body.resumo{background:#fff;color:#111}.bg,.piloto,.lupa{display:none}.rs dl,.rs-pauta,.rs-mail,.rs-q{border:1px solid #ddd;box-shadow:none}}

/* ---------------------------------------------------------------------------------------------- telas escuras dos momentos WOW */
/* a cena (depois da P3): cartão claro, o desenho numa tela escura */
.cena-card{margin:6px 0;border-radius:22px;background:var(--surface);box-shadow:var(--shadow);padding:14px 14px 12px;overflow:hidden;animation:cenaEntra .7s var(--ease)}
@keyframes cenaEntra{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.cena-k{font-size:13px;font-weight:600;color:var(--text-2);margin:2px 4px 10px}
.cena-svg{border-radius:16px;overflow:hidden;background:radial-gradient(ellipse at 45% 0%,#1d1d24 0%,var(--screen) 70%)}
.cena-svg svg{display:block;width:100%;height:auto}
.cena-card .lente{transform-box:fill-box;opacity:0;animation:lupaEntra .9s .85s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes lupaEntra{from{opacity:0;transform:translate(282px,104px) scale(.2)}to{opacity:1;transform:translate(282px,104px) scale(1)}}
.cena-card .seta{opacity:0;animation:aparece .4s 1.45s forwards,fluxo 1.2s 1.45s linear infinite}
.cena-card .seta-ponta,.cena-card .com-ia{opacity:0;animation:aparece .4s 1.7s forwards}
.cena-card .objetivo{opacity:0;transform-box:fill-box;animation:objEntra .8s 1.8s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes objEntra{from{opacity:0;transform:translate(546px,118px) scale(.3)}to{opacity:1;transform:translate(546px,118px) scale(1)}}
@keyframes aparece{to{opacity:1}}
@keyframes fluxo{to{stroke-dashoffset:-28}}
@keyframes desenha{to{stroke-dashoffset:0}}
.cena-leg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.cena-leg>div{border-radius:12px;padding:9px 11px;background:var(--surface-2);opacity:0;animation:pop .5s forwards}
.cena-leg .l1{animation-delay:2.1s}.cena-leg .l2{animation-delay:2.35s}.cena-leg .l3{animation-delay:2.6s}
.cena-leg small{display:block;font-size:12px;font-weight:500;color:var(--text-3);margin-bottom:1px}
.cena-leg .l2 small{color:var(--t-pink)}.cena-leg .l3 small{color:var(--t-green)}
.cena-leg b{font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.012em}
.cena-card.mini{padding:8px;border-radius:16px;margin-bottom:12px}
.cena-card.mini .lente,.cena-card.mini .seta,.cena-card.mini .seta-ponta,.cena-card.mini .com-ia,.cena-card.mini .objetivo,.cena-card.mini .cena-leg>div{animation-delay:0s!important;opacity:1}
.cena-card.mini .lente{transform:translate(282px,104px)}.cena-card.mini .objetivo{transform:translate(546px,118px)}
.cena-card.mini .seta{animation:fluxo 1.2s linear infinite}
.cena-card.mini .cena-leg b{font-size:13px}
.cena-card.sai{animation:cenaSai .7s cubic-bezier(.5,0,.75,0) forwards}
@keyframes cenaSai{to{opacity:.15;transform:translateY(30px) scale(.97);filter:blur(1px)}}
/* movimentos da cena e dos padrões */
.cena-card .anda{animation:anda 5s 1.2s ease-in-out infinite alternate}
@keyframes anda{to{transform:translateX(-14px)}}
.cena-card .gira{animation:gira 6s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.cena-card .fumaca{animation:fumaca 3s ease-in-out infinite}
@keyframes fumaca{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:.8;transform:translateY(-4px)}}
.cena-card .voa{animation:voa 6s ease-in-out infinite alternate}
@keyframes voa{to{transform:translate(20px,-6px)}}
.cena-card .flutua{animation:voa 7s ease-in-out infinite alternate}
.cena-card .esteira{stroke-dasharray:8 6;animation:fluxo 1s linear infinite}
.cena-card .pulsa{animation:pulsa 1.6s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:.45}50%{opacity:1}}
.cena-card .pisca{animation:pulsa .9s ease-in-out infinite}
.cena-card .cai{animation:cai 2.1s cubic-bezier(.5,0,.8,.6) infinite}
@keyframes cai{0%{transform:translateY(0);opacity:0}15%{opacity:1}75%{transform:translateY(38px);opacity:1}100%{transform:translateY(38px);opacity:0}}
.cena-card .escorre{animation:escorre 3.2s ease-in infinite}
@keyframes escorre{0%{transform:translateY(-8px);opacity:0}30%{opacity:1}100%{transform:translateY(30px);opacity:0}}
.cena-card .empilha{opacity:0;animation:empilha 3.6s ease-out infinite}
@keyframes empilha{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
.cena-card .formiga{animation:fluxo 1.1s linear infinite}
.cena-card .procura{animation:procura 4.5s ease-in-out infinite}
@keyframes procura{0%{transform:translate(-30px,-14px)}25%{transform:translate(30px,-22px)}50%{transform:translate(34px,24px)}75%{transform:translate(-26px,30px)}100%{transform:translate(-30px,-14px)}}
.cena-card .ponteiro{animation:gira 2.4s linear infinite}
.cena-card .vaza-e{animation:vazaE 1.8s ease-out infinite}.cena-card .vaza-d{animation:vazaD 1.8s ease-out infinite}
@keyframes vazaE{0%{transform:none;opacity:1}100%{transform:translate(-28px,26px);opacity:0}}
@keyframes vazaD{0%{transform:none;opacity:1}100%{transform:translate(28px,26px);opacity:0}}
.cena-card .cursor{animation:cursor 2.2s ease-in-out infinite}
@keyframes cursor{0%,100%{transform:translate(-24px,0)}50%{transform:translate(24px,-6px)}}
.cena-card .redesenha{stroke-dasharray:120;animation:redesenha 3s ease-in-out infinite}
@keyframes redesenha{0%{stroke-dashoffset:120}50%,100%{stroke-dashoffset:0}}
.cena-card .chega{animation:chega 2.4s ease-out infinite}
@keyframes chega{0%{transform:translate(30px,-20px);opacity:0}40%{transform:none;opacity:1}100%{opacity:1}}
.cena-card .hesita{animation:hesita 4s ease-in-out infinite}
@keyframes hesita{0%{transform:none}30%{transform:translate(40px,-30px)}45%{transform:translate(40px,-30px)}60%{transform:translate(40px,-26px)}100%{transform:none}}
.cena-card .bussola{animation:bussola 1.4s ease-in-out infinite}
@keyframes bussola{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(50deg)}}

/* a empresa em pixel art, em escala real: cartão claro, a cena numa tela escura, os números em tipografia de sistema */
.px-card{margin:6px 0;border-radius:22px;background:var(--surface);box-shadow:var(--shadow);padding:14px;overflow:hidden;animation:cenaEntra .6s var(--ease)}
.px-k{font-size:13px;font-weight:600;color:var(--text-2);margin:2px 4px 10px}
.px-tela{border-radius:14px;overflow:hidden;cursor:zoom-in;background:var(--screen)}
.px-tela canvas{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
.px-leg{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:12px 4px 0}
.px-n{font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.px-nl{font-size:15px;color:var(--text-2)}
.px-papeis{display:flex;flex-wrap:wrap;gap:6px 14px;width:100%;font-size:13px;color:var(--text-2);margin-top:4px}
.px-papeis i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.px-leg small{width:100%;font-size:12px;color:var(--text-3);margin-top:2px}
.px-zoom{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:auto;display:flex;align-items:flex-start;justify-content:flex-start;padding:24px;cursor:zoom-out}
.px-zoom canvas{image-rendering:pixelated;margin:auto;flex:0 0 auto;border-radius:12px}
/* o faturamento entra em cima da pixel art: Proxima Nova, no mesmo tamanho de antes */
.px-fat{display:grid;grid-template-rows:0fr;opacity:0;margin:0 4px;transition:grid-template-rows .6s var(--ease),opacity .5s,margin .6s}
.px-fat > *{overflow:hidden}
.px-fat.on{grid-template-rows:auto;opacity:1;margin:0 4px 12px}
.px-fat small{display:block;font-size:12.5px;font-weight:500;color:var(--text-3)}
.px-fat b{display:block;font-family:var(--numero);font-weight:700;font-size:clamp(30px,7.5vw,44px);line-height:1.08;letter-spacing:-.025em;color:var(--text);font-variant-numeric:lining-nums tabular-nums;padding-bottom:2px}
.px-fat.on b{animation:fatEntra .8s var(--ease) both}
@keyframes fatEntra{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* o mapa do caso */
.mapa{margin:6px 0 8px;align-self:stretch;border-radius:22px;background:var(--surface);box-shadow:var(--shadow);padding:14px 12px 12px;animation:pop .45s var(--ease)}
.mapa.compacto{padding:12px 10px 10px}
.mapa svg{display:block;width:100%;height:auto;margin:0 auto}
.mp-k{font-size:13px;font-weight:600;color:var(--text-2);margin:0 0 8px 4px}
.mp-n{opacity:0;transform-box:fill-box;transform-origin:center;animation:mpPop .5s var(--ease) forwards}
.mp-n rect{stroke-width:1;fill:color-mix(in srgb,var(--c) 9%,var(--surface));stroke:color-mix(in srgb,var(--c) 42%,transparent)}
.mp-n.forte rect{stroke-width:1.6;fill:color-mix(in srgb,var(--c) 16%,var(--surface));stroke:var(--c)}
.mp-t{fill:var(--text);font-family:var(--sans);font-size:13.5px;font-weight:600;text-anchor:middle;letter-spacing:-.01em}
.mp-s{fill:var(--text-3);font-family:var(--sans);font-size:10.5px;font-weight:500;text-anchor:middle}
.mp-a{fill:none;stroke:var(--text-3);stroke-opacity:.55;stroke-width:1.3;animation:mpTraco .55s ease-out forwards}
.mp-ponta{fill:var(--text-3);fill-opacity:.8}
.mp-r{opacity:0;animation:mpFade .4s forwards}
.mp-r rect{fill:var(--surface);stroke:var(--sep)}
.mp-r text{fill:var(--text-2);font-family:var(--sans);font-size:10.5px;text-anchor:middle}
@keyframes mpPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes mpTraco{to{stroke-dashoffset:0}}
@keyframes mpFade{to{opacity:1}}
.mapa.antigo{opacity:.45;transition:opacity .4s}
.mp-n.aj rect{stroke-width:2;stroke:var(--orange);filter:drop-shadow(0 2px 6px rgba(255,149,0,.35))}
.mp-n.aj .mp-s{fill:var(--t-orange)}

/* a vitrine da empresa no fim: a cena em pixel art, nas cores da marca, e o nome — sem site, sem "encontramos" */
.vitrine{--marca:var(--accent);margin:18px 0 4px;border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(10px) scale(.99);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.vitrine.on{opacity:1;transform:none}
.vitrine .px-card.vt{margin:0;border:0;background:var(--screen);padding:0;border-radius:0;box-shadow:none;animation:none}
.vitrine .px-card.vt .px-tela{border-radius:0}
.vitrine figcaption{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;padding:14px 18px 16px}
.vitrine figcaption b{position:relative;padding-left:18px;font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.022em;color:var(--text)}
.vitrine figcaption b::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--marca);box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 22%,transparent)}
.vitrine figcaption span{font-size:14px;color:var(--text-2)}

/* ---------------------------------------------------------------------------------------------- provas reais antes do convite */
.provas{margin:16px 0 8px;padding:18px 18px 16px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow);animation:mpFade .5s forwards}
.pv-k{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:12px}
.pv-k2{margin-top:20px;padding-top:16px;border-top:1px solid var(--sep-2)}
.pv-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pv-video{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.pv-play,.pv-video video{position:relative;display:block;width:100%;aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:0;background:#000;padding:0;cursor:pointer}
.pv-video video{object-fit:contain}
.pv-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
@media (hover:hover){.pv-play:hover img{transform:scale(1.035)}}
.pv-bt{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);box-shadow:0 4px 18px rgba(0,0,0,.25)}
.pv-bt::after{content:'';position:absolute;left:19px;top:15px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #fff}
.pv-video figcaption{font-size:13px;line-height:1.4;color:var(--text-2)}
.pv-video figcaption b{color:var(--text);font-weight:600}
.pv-video q{display:block;margin-top:3px;color:var(--text);font-size:13px}
.pv-dentro{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pv-dentro li{font-size:14px;color:var(--text);padding:9px 12px 9px 34px;border-radius:12px;background:var(--surface-2);position:relative}
.pv-dentro li::before{content:'';position:absolute;left:11px;top:12px;width:15px;height:15px;border-radius:50%;background:var(--comu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/10px no-repeat}
.pv-gar{margin:12px 0 0;font-size:13px;color:var(--text-2)}
.pv-fund{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pv-pessoa{display:flex;gap:12px;align-items:center;min-width:0}
.pv-pessoa img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none}
.pv-pessoa b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.pv-pessoa small{display:block;font-size:12.5px;color:var(--text-3)}
.pv-pessoa span{display:block;font-size:13px;color:var(--text-2);line-height:1.35;margin-top:2px}
.pv-logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.pv-logos img{height:22px;width:auto;filter:brightness(0);opacity:.55}
.pv-logos .lg-renova-energia{height:25px}.pv-logos .lg-emr{height:29px}.pv-logos .lg-hostgator{height:14.5px}   /* proporções da proposta: 38 · 44 · 50 · 25 */
.pv-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:16px}
.pv-nums div{padding:12px 14px;border-radius:14px;background:var(--surface-2)}
.pv-nums b{display:block;font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.025em}
.pv-nums span{display:block;font-size:12.5px;color:var(--text-2);line-height:1.35;margin-top:2px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pv-logos img{filter:brightness(0) invert(1);opacity:.7}}
:root[data-theme="dark"] .pv-logos img{filter:brightness(0) invert(1);opacity:.7}

/* ---------------------------------------------------------------------------------------------- peças antigas (triagem, agente, "não precisa", kit) */
.triagem{background:var(--surface);box-shadow:var(--shadow);border-radius:22px;padding:14px;animation:cenaEntra .6s var(--ease)}
.triagem .tk{font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:10px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.triagem .fila{display:flex;flex-wrap:wrap;gap:6px;min-height:34px;margin-bottom:10px}
.triagem .cols{display:grid;gap:8px}
.triagem .col{border-radius:12px;padding:8px;min-height:60px;background:var(--surface-2);transition:background .3s,box-shadow .3s}
.triagem .col.cheia{box-shadow:inset 0 0 0 1.5px var(--pink)}
.triagem .col h5{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--text-2);display:flex;justify-content:space-between}
.triagem .msg{font-size:12.5px;line-height:1.3;padding:5px 9px;border-radius:12px;background:var(--bubble);display:inline-block;margin:0 4px 4px 0;animation:voaMsg .45s var(--ease)}
.triagem .msg.duvida{box-shadow:inset 0 0 0 1px var(--orange)}
@keyframes voaMsg{from{opacity:0;transform:translateY(-16px) scale(.9)}to{opacity:1;transform:none}}
.triagem .nota-t{font-size:12px;color:var(--text-3);margin-top:8px}
.agente{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:18px;align-items:center;border-radius:22px;padding:18px;background:var(--surface);box-shadow:var(--shadow);animation:cenaEntra .6s var(--ease)}
.fone{border:0;border-radius:36px;padding:10px;background:#0b141a;box-shadow:0 0 0 4px #1d1d1f,0 18px 40px rgba(0,0,0,.25);color:#e9edef}
.fone .top{display:flex;align-items:center;gap:8px;padding:6px 8px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.fone .top i{width:26px;height:26px;border-radius:50%;background:#25d366;flex:0 0 auto}
.fone .top b{font-size:13px}.fone .top span{display:block;font-size:10.5px;color:#25d366}
.fone .conv{padding:10px 4px;display:flex;flex-direction:column;gap:8px;min-height:190px}
.fone .cli{align-self:flex-start;background:#1f2c34;border-radius:10px 10px 10px 2px;padding:7px 10px;font-size:13px;max-width:88%}
.fone .ag{align-self:flex-end;background:#005c4b;border-radius:10px 10px 2px 10px;padding:7px 10px;font-size:13px;max-width:92%;animation:pop .4s}
.fone .ag mark{background:rgba(255,214,10,.22);color:#ffe58a;border-radius:4px;padding:0 3px}
.agente .lado small{display:block;font-size:12.5px;font-weight:600;color:var(--t-green);margin-bottom:6px}
.agente .lado h4{margin:0 0 12px;font-family:var(--display);font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.agente .tons{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.agente .tons button{border:0;background:var(--fill-2);color:var(--text-2);border-radius:999px;padding:7px 13px;font-size:13px;cursor:pointer;min-height:36px}
.agente .tons button.on{color:var(--accent);background:var(--accent-soft)}
.agente .fontes{font-size:13.5px;color:var(--text-2);margin:0;padding-left:18px}
.agente .fontes li{margin:3px 0}
.agente .ex{font-size:12px;color:var(--text-3);margin-top:10px}
.naop{background:var(--surface);box-shadow:var(--shadow);border-radius:20px;padding:14px 16px;animation:pop .5s}
.naop small,.kit small.k{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.naop ul{margin:0;padding-left:0;list-style:none}
.naop li{padding:6px 0 6px 26px;position:relative;font-size:15px}
.naop li::before{content:"✕";position:absolute;left:4px;top:6px;color:var(--pink);font-weight:600}
.kit{background:var(--surface);box-shadow:var(--shadow);border-radius:20px;padding:14px 16px;animation:pop .5s}
.kit h4{margin:0 0 8px;font-size:17px;font-weight:600}
.kit pre{white-space:pre-wrap;font-family:var(--sans);font-size:14.5px;line-height:1.5;margin:0 0 8px;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.kit .esp{font-size:13px;color:var(--text-3);margin:0 0 10px}
.kit button{min-height:40px;border-radius:980px;border:0;background:var(--accent-soft);color:var(--accent);padding:0 16px;cursor:pointer;font-weight:500}
.kit button.ok{background:var(--green);color:#fff}
.kit .aviso{font-size:12px;color:var(--text-3);margin-left:8px}

/* a empresa achada (legado) */
.achei{margin:6px 0 4px;background:var(--surface);box-shadow:var(--shadow);border-radius:22px;padding:14px;animation:cenaEntra .7s var(--ease)}
.achei figcaption{font-size:16px;color:var(--text);margin:0 2px 12px;line-height:1.35}
.achei figcaption small{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:3px}
.achei-corpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:12px;align-items:start}
.achei-corpo:has(> .nav:only-child){grid-template-columns:1fr}
.achei-px .px-card.mini{margin:0;padding:6px;border-radius:14px;animation:none}
.nav{display:block;border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;box-shadow:var(--shadow);transition:transform .2s}
.nav:hover{transform:translateY(-2px)}
.nav-barra{display:flex;align-items:center;gap:5px;background:var(--surface-2);padding:7px 9px}
.nav-barra > i{width:8px;height:8px;border-radius:50%;background:#c7c7cc;flex:0 0 auto}
.nav-barra > i:nth-child(1){background:#ff5f57}.nav-barra > i:nth-child(2){background:#febc2e}.nav-barra > i:nth-child(3){background:#28c840}
.nav-end{display:flex;align-items:center;gap:6px;margin-left:8px;flex:1;min-width:0;background:var(--fill-2);border-radius:7px;padding:3px 8px;font-size:11px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-end img{width:13px;height:13px;border-radius:3px;flex:0 0 auto}
.nav-print{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}

/* publicidade: prévia de como a empresa apareceria nos nossos canais */
.pub-previa{margin:6px 0;border-radius:22px;background:var(--surface);box-shadow:var(--shadow);padding:14px;overflow:hidden;animation:cenaEntra .6s var(--ease)}
.pub-tela{display:flex;gap:12px;justify-content:center;align-items:flex-end;border-radius:16px;padding:18px;background:radial-gradient(ellipse at 45% 0%,#1d1d24 0%,var(--screen) 70%)}
.pub-video{position:relative;flex:1 1 auto;max-width:440px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#1c1c22,#101014 60%),#111;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.pub-previa[data-formato="ambos"] .pub-video{max-width:300px}
.pub-fala{position:absolute;left:50%;top:18%;width:22%;aspect-ratio:1;margin-left:-11%;border-radius:50%;background:radial-gradient(circle at 50% 38%,#3a3a44 0 34%,transparent 35%),radial-gradient(ellipse at 50% 100%,#2c2c34 0 58%,transparent 59%);opacity:.9}
.pub-video.mencao .pub-fala{left:70%}
.pub-fala.v{position:relative;left:auto;top:auto;margin:58% auto 0;width:44%}
.pub-titulo{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 9%;background:linear-gradient(90deg,rgba(10,132,255,.28),rgba(191,90,242,.18))}
.pub-titulo small{font-size:11px;font-weight:600;color:rgba(255,255,255,.72);margin-bottom:4px}
.pub-titulo b{font-family:var(--display);font-size:clamp(15px,3.2vw,21px);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:#fff}
.pub-faixa{position:absolute;left:5%;bottom:17%;max-width:78%;padding:7px 12px 8px;border-radius:10px;background:rgba(255,255,255,.92);color:#1d1d1f;box-shadow:0 6px 20px rgba(0,0,0,.35);transform:translateX(-12px);opacity:0;transition:transform .7s var(--ease) .5s,opacity .7s .5s}
.pub-previa.on .pub-faixa{transform:none;opacity:1}
.pub-faixa small{display:block;font-size:9.5px;font-weight:600;color:#6e6e73}
.pub-faixa b{display:block;font-size:14px;font-weight:700;letter-spacing:-.015em}
.pub-faixa span{display:block;font-size:11px;color:#424245;margin-top:1px}
.pub-canal{position:absolute;left:4%;top:5%;display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.85)}
.pub-orb{width:16px;height:16px;border-radius:50%;background:conic-gradient(from 0deg,#0a84ff,#5e5ce6,#bf5af2,#ff375f,#ff9f0a,#64d2ff,#0a84ff)}
.pub-barra{position:absolute;left:4%;right:4%;bottom:6%;height:3px;border-radius:2px;background:rgba(255,255,255,.2)}
.pub-tempo{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:#ff3b30;transition:width 2.4s linear .3s}
.pub-previa.on .pub-tempo{width:46%}
.pub-trecho{position:absolute;left:38%;width:14%;top:-2px;bottom:-2px;border-radius:3px;background:rgba(255,214,10,.85)}
.pub-vertical{position:relative;flex:0 0 auto;width:clamp(120px,24vw,150px);aspect-ratio:9/16;border-radius:18px;overflow:hidden;padding:12px 10px;background:linear-gradient(180deg,#1c1c22,#0e0e12);box-shadow:0 0 0 3px #2c2c2e,0 12px 30px rgba(0,0,0,.45)}
.pub-vertical .pub-canal{left:10px;top:10px}
.pub-vertical b{position:absolute;left:10px;right:10px;bottom:16px;font-size:12px;line-height:1.25;font-weight:700;color:#fff}
.pub-tag{position:absolute;left:10px;top:34px;font-size:9.5px;font-weight:600;color:#1d1d1f;background:rgba(255,255,255,.9);border-radius:6px;padding:2px 6px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-previa figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:12px 4px 2px}
.pub-previa figcaption b{font-size:14.5px;font-weight:600;letter-spacing:-.012em}
.pub-previa figcaption span{font-size:13px;color:var(--text-3)}
@media (max-width:480px){.pub-tela{padding:12px;gap:8px}.pub-previa[data-formato="ambos"] .pub-tela{flex-direction:column;align-items:center}.pub-previa[data-formato="ambos"] .pub-video{max-width:none;width:100%}}
@media (prefers-reduced-motion:reduce){.pub-faixa{opacity:1;transform:none}.pub-tempo{width:46%}}

/* ---------------------------------------------------------------------------------------------- telas menores */
@media (max-width:900px){
  /* uma coluna: marca e progresso primeiro, depois o resumo (recolhível) e a conversa */
  .app{grid-template-columns:minmax(0,1fr);gap:0;padding-top:18px}
  .col-chat{display:contents}
  .topo{order:-3}.prog,.progl{order:-2}
  .col-ficha{position:static;margin:0 0 18px;order:-1}
}
@media (max-width:640px){
  .agente{grid-template-columns:1fr}.cena-leg{grid-template-columns:1fr}.cena-leg b{font-size:14px}
  .achei-corpo{grid-template-columns:1fr}
  /* o botão de bastidores do piloto não cobre o conteúdo no celular */
  /* no celular, o botão fica no alto da página (rola junto) e não cobre a conversa */
  .lupa{position:absolute;top:6px;bottom:auto;right:8px;padding:6px 12px;min-height:32px;font-size:12px;box-shadow:var(--shadow)}
  .piloto{padding-right:120px;text-align:left}
  .gaveta{top:56px;bottom:auto}
}
@media (max-width:560px){
  .pv-videos{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none}
  .pv-video{scroll-snap-align:start}
  .pv-dentro,.pv-fund{grid-template-columns:1fr}
  .pv-logos{gap:12px 18px}.pv-logos img{height:18px}.pv-logos .lg-renova-energia{height:21px}.pv-logos .lg-emr{height:24px}.pv-logos .lg-hostgator{height:12px}
}
@media (max-width:480px){
  .app{padding-left:16px;padding-right:16px}
  .b{font-size:16px;max-width:90%}
  .b.frase{font-size:17px}
  .final{padding:22px 18px 20px}
  .final h2{font-size:22px}
  .rs dl{grid-template-columns:1fr}
  .provas{padding:16px 14px 14px}
}

/* ---------------------------------------------------------------------------------------------- movimento reduzido */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  mark.centro{background-size:100% 2px}.batida{opacity:1}
  .cena-card .lente,.cena-card .objetivo{opacity:1;transform:translate(282px,104px)}.cena-card .objetivo{transform:translate(546px,118px)}
  .cena-card .seta,.cena-card .seta-ponta,.cena-card .com-ia,.cena-leg>div{opacity:1}
  .cena-card .d{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .mp-n,.mp-r{opacity:1}.mp-a{stroke-dashoffset:0!important}
}

/* ---------------------------------------------------------------------------------------------- "é esta a sua empresa?" */
/* o cartão com o que a descoberta achou: palco escuro (o site no celular, a foto da página num círculo com a cor da marca) e,
   embaixo, os dados do cadastro. "ok" = a pessoa confirmou (a marca vai para a animação); "nao" = ficou de fora */
.emp-conf{--marca:var(--accent);margin:12px 0 6px;max-width:480px;border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(8px) scale(.99);transition:opacity .7s var(--ease),transform .7s var(--ease),box-shadow .5s var(--ease),filter .5s var(--ease)}
.emp-conf.on{opacity:1;transform:none}
.ec-palco{position:relative;display:grid;grid-template-columns:128px 1fr;gap:18px;align-items:center;padding:18px;min-height:210px;color:#f5f5f7;
  background:radial-gradient(120% 95% at 88% 8%,color-mix(in srgb,var(--marca) 42%,transparent),transparent 62%),radial-gradient(90% 80% at 0% 100%,color-mix(in srgb,var(--marca) 16%,transparent),transparent 70%),var(--screen)}
.ec-cel{width:128px;aspect-ratio:390/760;border-radius:24px;padding:4px;background:#1c1c1e;box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.1)}
.ec-cel img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:20px;background:#fff}
.ec-palco.com-og{grid-template-columns:1fr;padding:0;min-height:0}
.ec-og{display:block;width:100%;aspect-ratio:1.91/1;object-fit:cover}
.ec-palco.com-og .ec-id{position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.ec-palco.com-janela{grid-template-columns:1fr}
.ec-janela{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.ec-barra{display:flex;align-items:center;gap:5px;padding:7px 10px;background:#e8e8ed}
.ec-barra i{width:8px;height:8px;border-radius:50%;background:#ff5f57}.ec-barra i:nth-child(2){background:#febc2e}.ec-barra i:nth-child(3){background:#28c840}
.ec-barra span{margin-left:8px;font:12px var(--mono);color:#6e6e73;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-janela img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.ec-palco.so-marca{grid-template-columns:1fr;justify-items:center;text-align:center}
.ec-id{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.ec-palco.so-marca .ec-id{align-items:center}
.ec-avatar{position:relative;width:68px;height:68px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--marca),0 8px 22px rgba(0,0,0,.4);margin-bottom:6px;flex:none}
.ec-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ec-avatar.logo img{object-fit:contain;padding:9px}
.ec-avatar.escuro{background:#15161b}
.ec-avatar.letras{display:grid;place-items:center;background:linear-gradient(145deg,var(--marca),color-mix(in srgb,var(--marca) 55%,#000));color:#fff;font:700 24px var(--display);letter-spacing:-.02em}
.ec-ok{position:absolute;right:-3px;bottom:-3px;width:24px;height:24px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--screen);transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.ec-ok::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ec-nome{font:700 21px/1.15 var(--display);letter-spacing:-.022em;text-wrap:balance;overflow-wrap:anywhere}
.ec-site{font:12.5px var(--mono);color:rgba(245,245,247,.62);overflow-wrap:anywhere}
.ec-dados{padding:14px 16px 16px;display:grid;gap:3px}
.ec-razao{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--text-2);text-transform:uppercase;overflow-wrap:anywhere}
.ec-linha{font-size:13.5px;color:var(--text-2);font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;column-gap:6px}
.ec-cnpj{font-family:var(--mono);font-size:12.5px}
.ec-sep{color:var(--text-3)}
.ec-ativ{font-size:12.5px;color:var(--text-3)}
.ec-redes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ec-rede{display:flex;flex-direction:column;gap:1px;padding:7px 11px;border-radius:12px;background:var(--fill-2);color:var(--text);text-decoration:none;line-height:1.2;min-width:0}
.ec-rede small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.ec-rede span{font-size:13px;overflow-wrap:anywhere}
.ec-rede:hover{background:var(--fill)}
.ec-rede:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.emp-conf.ok{box-shadow:0 0 0 2px var(--marca),var(--shadow-lg)}
.emp-conf.ok .ec-ok{transform:scale(1)}
.emp-conf.nao{opacity:.42;filter:grayscale(1);transform:scale(.985)}
.ec-pergunta{margin:10px 0 4px}
.ec-pergunta p{margin:0 0 2px;font-size:16px;color:var(--text)}
.ec-pergunta small{display:block;color:var(--text-3);font-size:13px;margin-bottom:10px}
@media (max-width:420px){.ec-palco{grid-template-columns:108px 1fr;gap:14px;padding:14px}.ec-cel{width:108px}.ec-nome{font-size:19px}.ec-avatar{width:58px;height:58px}}
@media (prefers-reduced-motion:reduce){.emp-conf,.ec-ok{transition:none}}

[hidden]{display:none!important}