/* Bancada — página de apresentação.
   As cores são as mesmas da própria bancada (web/styles.css), e cada uma tem função:
   teal age (botões, o que você clica) · violeta é a IA · laranja é o que está em andamento
   e o código · verde é o que foi conferido · azul-LED é o sinal da placa · âmbar é o LED L do Arduino. */
:root{
  --bg:#080d0f; --bg-2:#0c1114; --painel:#12191c; --painel-2:#172024; --elevado:#1f2b31;
  --linha:rgba(150,200,210,.10); --linha-2:rgba(150,200,210,.18); --linha-3:#31434a;
  --tinta:#e6eef0; --tinta-2:#9aacb2; --tinta-3:#82969d;
  --teal:#0ca1a6; --teal-2:#1cc4ca; --teal-vel:rgba(28,196,202,.12); --teal-tinta:#03191a;
  --violeta:#a896ff; --violeta-2:#7c68f0; --violeta-vel:rgba(168,150,255,.12);
  --laranja:#f39c12; --laranja-vel:rgba(243,156,18,.13);
  --verde:#4fd08b; --verde-vel:rgba(79,208,139,.13);
  --led:#4fb3ff; --led-vel:rgba(79,179,255,.14); --ambar:#ffb347;
  --amarelo:#f3c13d; --vermelho:#ff6b6b; --azul-bt:#7c9bff;
  --display:"Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --fonte:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --troca:.3s cubic-bezier(.2,.75,.25,1);
  --raio:18px; --raio-m:12px; --raio-p:8px;
  --topo:64px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--tinta);font:400 17px/1.62 var(--fonte);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
em,i,cite{font-style:normal}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--teal);color:var(--teal-tinta)}
:focus-visible{outline:2px solid var(--teal-2);outline-offset:3px;border-radius:6px}
.sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pular{position:fixed;left:16px;top:-60px;z-index:100;background:var(--teal);color:var(--teal-tinta);padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;transition:top var(--troca)}
.pular:focus{top:12px}

/* ---------- fundo: placa perfurada ---------- */
.fundo{position:fixed;inset:0;z-index:0;pointer-events:none;background-color:var(--bg);
  background-image:
    radial-gradient(1100px 640px at 88% -12%, rgba(12,161,166,.17), transparent 62%),
    radial-gradient(900px 720px at -14% 38%, rgba(124,104,240,.10), transparent 62%),
    radial-gradient(circle, rgba(170,215,225,.12) 1.05px, transparent 1.5px);
  background-size:auto,auto,24px 24px}
.fundo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 38%, transparent 52%, rgba(3,5,6,.8))}
main,.rodape{position:relative;z-index:1}
.envelope{width:min(1200px, 100% - 32px);margin-inline:auto}
.secao{padding-block:clamp(84px, 11vw, 150px);position:relative}

/* ---------- tipografia ---------- */
.rotulo{display:inline-flex;align-items:center;gap:10px;margin:0;font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-2)}
.rotulo::before{content:"";width:7px;height:7px;border-radius:2px;background:currentColor;box-shadow:0 0 12px currentColor}
.rotulo--violeta{color:var(--violeta)}
.rotulo--verde{color:var(--verde)}
.titulo{font-family:var(--display);font-weight:760;font-size:clamp(34px, 4.7vw, 62px);line-height:1.02;letter-spacing:-.03em;margin:18px 0 22px;text-wrap:balance;font-variation-settings:"opsz" 96}
.lead{font-size:clamp(17px,1.3vw,20px);color:var(--tinta-2);max-width:40em;margin:0;text-wrap:pretty}
.cabeca{max-width:820px;margin-bottom:clamp(40px,6vw,72px)}
.cabeca.centro{margin-inline:auto;text-align:center}
.cabeca.centro .lead{margin-inline:auto}
.mono{font-family:var(--mono)}
.verde{color:var(--verde)} .violeta{color:var(--violeta)} .laranja{color:var(--laranja)} .led{color:var(--led)} .teal{color:var(--teal-2)}

/* ---------- botões: sobe 1px no hover, afunda 3% no clique ---------- */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;border:1px solid transparent;
  font:600 16px/1 var(--fonte);text-decoration:none;cursor:pointer;white-space:nowrap;background:var(--painel-2);color:var(--tinta);
  transition:transform var(--troca), background var(--troca), border-color var(--troca), box-shadow var(--troca), color var(--troca)}
.bt:hover{transform:translateY(-1px)}
.bt:active{transform:scale(.97)}
.bt svg{width:18px;height:18px;flex:none}
.bt--pri{background:var(--teal);color:var(--teal-tinta);box-shadow:0 10px 30px -12px rgba(12,161,166,.8), inset 0 1px 0 rgba(255,255,255,.18)}
.bt--pri:hover{background:var(--teal-2);color:var(--teal-tinta);box-shadow:0 14px 36px -12px rgba(28,196,202,.9), inset 0 1px 0 rgba(255,255,255,.2)}
.bt--fant{background:rgba(255,255,255,.02);border-color:var(--linha-2)}
.bt--fant:hover{border-color:var(--teal);background:var(--teal-vel)}
.bt--p{min-height:40px;padding:0 16px;font-size:14.5px}
.bt--largo{width:100%}

/* ---------- marca ---------- */
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 19px/1 var(--fonte);letter-spacing:-.01em}
.marca__sinal{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--teal),var(--violeta-2));color:#fff;box-shadow:0 6px 18px -6px rgba(124,104,240,.8)}
.marca__sinal svg{width:62%;height:62%}
.marca__de{font:500 11px/1 var(--mono);color:var(--tinta-3);letter-spacing:.06em;margin-left:2px}
/* o logo (monograma t + nome desenhado como trilha): a altura manda, a largura segue a proporção 331×74 */
.marca{color:var(--tinta)}
.marca__logo{--a:26px;display:block;flex:none;height:var(--a);width:calc(var(--a) * 331 / 74)}

/* ---------- barra do topo ---------- */
.barra{position:sticky;top:0;z-index:40;height:var(--topo);display:flex;align-items:center;
  background:rgba(8,13,15,.55);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid transparent;transition:border-color var(--troca), background var(--troca)}
.barra.rolou{border-bottom-color:var(--linha);background:rgba(8,13,15,.82)}
.barra .envelope{display:flex;align-items:center;justify-content:space-between;gap:20px}
.barra__esq{display:flex;align-items:center;gap:12px}
.barra__nav{display:flex;gap:4px}
.barra__nav a{white-space:nowrap;padding:8px 12px;border-radius:999px;color:var(--tinta-2);text-decoration:none;font-size:15px;font-weight:500;transition:color var(--troca), background var(--troca)}
.barra__nav a:hover{color:var(--tinta);background:rgba(255,255,255,.04)}
.barra__nav a.ativo{color:var(--tinta)}
@media (max-width:1200px){.barra__nav{display:none}}
.marca__de{white-space:nowrap}
@media (max-width:640px){.marca__de{display:none}.barra .bt--p{padding:0 13px}}

/* ---------- herói ---------- */
.heroi{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(20px,3vw,48px);align-items:center;padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(40px,5vw,60px);min-height:min(calc(100svh - var(--topo)), 880px)}
.heroi__texto{position:relative;z-index:3}
.heroi__titulo{font-family:var(--display);font-weight:780;font-size:clamp(42px, 5.9vw, 82px);line-height:.98;letter-spacing:-.038em;margin:20px 0 24px;text-wrap:balance;font-variation-settings:"opsz" 96}
.heroi__titulo .confere{position:relative;color:var(--verde);white-space:nowrap}
.heroi__titulo .confere::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.08em;border-radius:99px;background:linear-gradient(90deg,var(--verde),rgba(79,208,139,.1));transform-origin:left;animation:risca 1.2s .6s cubic-bezier(.2,.75,.25,1) both}
@keyframes risca{from{transform:scaleX(0)}}
.heroi__lead{font-size:clamp(17px,1.35vw,20.5px);color:var(--tinta-2);max-width:34em;margin:0 0 32px;text-wrap:pretty}
.heroi__lead strong{color:var(--tinta);font-weight:600}
.heroi__acoes{display:flex;flex-wrap:wrap;gap:12px}
.heroi__selos{display:flex;flex-wrap:wrap;gap:8px 18px;margin:28px 0 0;padding:0;list-style:none;font:500 13px/1.3 var(--mono);color:var(--tinta-3)}
.heroi__selos li{display:inline-flex;align-items:center;gap:8px}
.heroi__selos svg{width:15px;height:15px;color:var(--teal-2)}
.heroi__palco{position:relative;align-self:stretch;min-height:min(640px, 72svh);margin-right:calc((100vw - min(1200px, 100vw - 32px)) / -2);touch-action:pan-y;cursor:grab;user-select:none}
.heroi__palco.pegando{cursor:grabbing}
.tela3d{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease}
.tela3d.visivel{opacity:1}
.heroi__palco .tela3d,.final__palco .tela3d{-webkit-mask-image:radial-gradient(ellipse 60% 62% at 56% 48%, #000 58%, transparent 100%);mask-image:radial-gradient(ellipse 60% 62% at 56% 48%, #000 58%, transparent 100%)}
.dica-girar{position:absolute;right:max(24px, calc((100vw - 1200px)/2 + 8px));bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);color:var(--tinta-3);letter-spacing:.04em;pointer-events:none}
.dica-girar svg{width:16px;height:16px}
@media (min-width:901px) and (max-width:1100px){.dica-girar{top:18px;bottom:auto}}
.final__palco .tela3d{-webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 50%,#000 55%,transparent 100%)}
.sem-3d .dica-girar{display:none}
@media (hover:none){.dica-girar{display:none}}

/* placa desenhada: aparece quando não há WebGL */
.placa-2d{display:none;position:absolute;inset:8% 6%;margin:auto;max-width:560px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.sem-3d .placa-2d{display:block}
.sem-3d .placa-2d{--led-io2:#6cc2ff;--brilho-io2:1;--led-l:#ffc46b;--brilho-l:1}

/* cartão do agente sobre o palco */
.agente-cartao{position:absolute;z-index:3;left:clamp(0px,1vw,16px);bottom:clamp(12px,3%,32px);width:min(360px, 88%);padding:14px 16px 12px;border-radius:16px;
  background:linear-gradient(180deg,rgba(20,28,32,.86),rgba(14,20,23,.86));border:1px solid rgba(168,150,255,.28);box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.2), 0 0 40px -10px rgba(124,104,240,.35);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13.5px}
.ac-topo{display:flex;align-items:center;gap:9px;font:700 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--violeta)}
.ac-topo .marca__sinal{width:22px;height:22px;border-radius:7px}
.ac-topo .ac-estado{margin-left:auto;color:var(--laranja);font-weight:600;letter-spacing:.02em;text-transform:none}
.ac-topo .ac-estado.ok{color:var(--verde)}
.ac-pedido{margin:11px 0 10px;padding:9px 12px;border-radius:14px 14px 4px 14px;background:var(--elevado);color:var(--tinta);line-height:1.45;min-height:3.4em}
.ac-pedido .cursor{display:inline-block;width:7px;height:1.05em;vertical-align:-2px;background:var(--teal-2);margin-left:1px;animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.ac-passos{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.ac-passos li{display:none;grid-template-columns:22px 1fr;gap:9px;align-items:center;color:var(--tinta-2)}
.ac-passos li.vis{display:grid;animation:entra .35s ease both}
.ac-passos li b{font-weight:600;color:var(--tinta)}
.ac-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--elevado);color:var(--teal-2);font:700 12px/1 var(--mono)}
.ac-passos li.rodando .ac-ic{background:rgba(243,156,18,.16);color:var(--laranja);animation:pulsa 1.1s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.45}}
.ac-fim{margin-top:10px;padding-top:9px;border-top:1px solid var(--linha);display:none;align-items:center;gap:8px;color:var(--verde);font-weight:600}
.ac-fim.vis{display:flex;animation:entra .35s ease both}
.ac-fim svg{width:16px;height:16px}

@media (max-width:900px){
  .heroi{grid-template-columns:1fr;min-height:0;gap:8px;padding-top:24px}
  .heroi__palco{order:-1;min-height:0;height:clamp(300px, 58vw, 440px);margin-inline:-16px;margin-right:-16px}
  .agente-cartao{display:none}
  .heroi__titulo{margin-top:10px}
}

/* ---------- faixa de números ---------- */
.numeros{border-block:1px solid var(--linha);background:linear-gradient(90deg, transparent, rgba(18,25,28,.7), transparent)}
.numeros ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.numeros li{padding:26px 22px;border-left:1px solid var(--linha)}
.numeros li:first-child{border-left:0;padding-left:0}
.numeros b{display:block;font:760 clamp(30px,3.2vw,42px)/1 var(--display);letter-spacing:-.03em;color:var(--tinta)}
.numeros span{display:block;margin-top:8px;color:var(--tinta-2);font-size:14.5px;line-height:1.4}
@media (max-width:820px){.numeros ul{grid-template-columns:1fr 1fr}.numeros li:nth-child(3){border-left:0}.numeros li:nth-child(odd){padding-left:0}.numeros li:nth-child(n+3){border-top:1px solid var(--linha)}}

/* ---------- o problema ---------- */
.problema__grade{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px);align-items:stretch}
.lado{position:relative;border-radius:var(--raio);padding:clamp(24px,3vw,36px);border:1px solid var(--linha);background:rgba(18,25,28,.6)}
.lado h3{margin:0 0 6px;font:700 22px/1.2 var(--display);letter-spacing:-.01em}
.lado > p{margin:0 0 22px;color:var(--tinta-2)}
.lado--antes{background:repeating-linear-gradient(135deg, rgba(255,107,107,.025) 0 12px, transparent 12px 24px), rgba(18,25,28,.6)}
.manual{list-style:none;margin:0;padding:0;counter-reset:m;display:grid;gap:9px}
.manual li{counter-increment:m;display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.18);border:1px solid var(--linha);font-size:15.5px}
.manual li::before{content:counter(m, decimal-leading-zero);font:600 12px/1 var(--mono);color:var(--tinta-3)}
.manual .voce{font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#ffb3b3;background:rgba(255,107,107,.12);border-radius:999px;padding:5px 8px}
.manual li.repete{border-style:dashed;color:var(--tinta-2)}
.lado--depois{border-color:rgba(28,196,202,.3);background:radial-gradient(120% 90% at 100% 0%, rgba(12,161,166,.12), transparent 60%), rgba(18,25,28,.7)}
.ciclo{position:relative;width:min(360px,100%);aspect-ratio:1;margin:6px auto 18px}
.ciclo svg{width:100%;height:100%;overflow:visible}
.ciclo .anel-base{fill:none;stroke:var(--linha-2);stroke-width:1.5;stroke-dasharray:3 6}
.ciclo .anel-luz{fill:none;stroke:url(#grad-ciclo);stroke-width:3;stroke-linecap:round}
.ciclo .no circle{fill:var(--painel-2);stroke:var(--linha-3);stroke-width:1.2}
.ciclo .no text{font:600 12.5px var(--fonte);fill:var(--tinta);text-anchor:middle}
.ciclo .no .sub{font:500 9.5px var(--mono);fill:var(--tinta-3)}
.ciclo .centro-t{font:760 20px var(--display);fill:var(--tinta);text-anchor:middle;letter-spacing:-.01em}
.ciclo .centro-s{font:500 11px var(--mono);fill:var(--verde);text-anchor:middle;letter-spacing:.08em}
.ciclo .viajante{fill:var(--teal-2);filter:drop-shadow(0 0 6px var(--teal-2))}
.voce-faz{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.voce-faz li{display:flex;gap:12px;align-items:flex-start;color:var(--tinta-2);font-size:15.5px}
.voce-faz svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--teal-2)}
.voce-faz b{color:var(--tinta);font-weight:600}
.caso{margin-top:clamp(20px,3vw,32px);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:20px 24px;border-radius:var(--raio-m);border:1px solid rgba(243,156,18,.3);background:linear-gradient(90deg, rgba(243,156,18,.08), transparent 70%)}
.caso code{font:500 .92em var(--mono);color:var(--laranja);background:rgba(243,156,18,.1);padding:1px 6px;border-radius:5px}
.caso p{margin:0;color:var(--tinta-2)}
.caso p b{color:var(--tinta)}
.caso .caso__tag{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--laranja);padding-top:5px}
@media (max-width:900px){.problema__grade{grid-template-columns:1fr}.caso{grid-template-columns:1fr;gap:8px}}

/* ---------- como funciona: rolagem guiada ---------- */
.como__grade{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,4vw,64px);position:relative}
.como__passos{list-style:none;margin:0;padding:0;position:relative}
.como__passos::before{content:"";position:absolute;left:21px;top:30px;bottom:30px;width:2px;background:linear-gradient(var(--teal-2), var(--teal)) no-repeat, var(--linha);background-size:100% var(--prog,0%)}
.passo{min-height:78vh;display:flex;align-items:center;padding:8vh 0 8vh 64px;position:relative}
.passo:first-child{min-height:60vh;padding-top:0}
.passo:last-child{min-height:100vh}
.passo__pino{position:absolute;left:0;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--painel);border:1px solid var(--linha-2);font:700 13px/1 var(--mono);color:var(--tinta-3);transition:all .4s}
.passo:first-child .passo__pino{top:calc(50% - 4vh)}
.passo.ativo .passo__pino{background:var(--teal);border-color:var(--teal-2);color:var(--teal-tinta);box-shadow:0 0 0 6px rgba(28,196,202,.12), 0 0 24px rgba(28,196,202,.5)}
.passo.feito .passo__pino{color:var(--teal-2);border-color:rgba(28,196,202,.4)}
.passo__corpo{max-width:30em;opacity:.75;transition:opacity .5s}
.passo.ativo .passo__corpo{opacity:1}
.passo h3{margin:0 0 10px;font:740 clamp(26px,2.5vw,34px)/1.1 var(--display);letter-spacing:-.02em}
.passo p{margin:0;color:var(--tinta-2);font-size:17px}
.passo .nota{margin-top:14px;display:block;font:500 12.5px/1.5 var(--mono);color:var(--tinta-3)}
.passo__corpo{min-width:0}
.passo .nota b{font-weight:600;color:var(--teal-2)}
.como__lado{position:relative}
.como__fixo{position:sticky;top:calc(var(--topo) + 20px);height:calc(100vh - var(--topo) - 40px);max-height:780px}
.como__palco{position:relative;height:100%;border-radius:24px;overflow:hidden;border:1px solid var(--linha);
  background:radial-gradient(90% 70% at 50% 45%, rgba(28,196,202,.06), transparent 70%), linear-gradient(180deg, rgba(18,25,28,.65), rgba(10,15,17,.65))}
.como__palco::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 80px rgba(0,0,0,.55)}
.palco-topo{position:absolute;z-index:3;left:16px;right:16px;top:14px;display:flex;justify-content:space-between;align-items:center;font:500 11.5px/1 var(--mono);color:var(--tinta-3);letter-spacing:.06em;text-transform:uppercase}
.palco-topo .ao-vivo{display:inline-flex;align-items:center;gap:7px;color:var(--violeta)}
.palco-topo .ao-vivo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violeta);box-shadow:0 0 10px var(--violeta);animation:pulsa 1.6s infinite}

/* HUD: um por passo */
.hud{position:absolute;z-index:3;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s, transform .45s, visibility 0s .45s;font-size:13.5px}
.como__palco[data-passo="0"] .hud--0,.como__palco[data-passo="1"] .hud--1,.como__palco[data-passo="2"] .hud--2,.como__palco[data-passo="3"] .hud--3,
.como__palco[data-passo="4"] .hud--4,.como__palco[data-passo="5"] .hud--5,.como__palco[data-passo="6"] .hud--6{opacity:1;visibility:visible;transform:none;transition:opacity .45s, transform .45s, visibility 0s}
.vidro{background:rgba(14,20,23,.84);border:1px solid var(--linha-2);border-radius:14px;box-shadow:0 24px 50px -18px rgba(0,0,0,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.acao{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:11px 13px}
.acao .ac-ic{width:24px;height:24px}
.acao b{display:block;font-weight:600;font-size:13.5px;color:var(--tinta)}
.acao span{display:block;color:var(--tinta-2);font-size:12.5px;margin-top:1px}
.acao.rodando .ac-ic{background:rgba(243,156,18,.16);color:var(--laranja);animation:pulsa 1.1s infinite}
.hud--0{left:16px;right:16px;bottom:18px;display:grid;gap:10px;justify-items:end}
.balao-voce{max-width:min(380px,92%);padding:11px 14px;border-radius:16px 16px 4px 16px;background:var(--elevado);border:1px solid var(--linha-2);line-height:1.45}
.balao-voce small{display:flex;align-items:center;gap:6px;margin-top:6px;font:500 11px/1 var(--mono);color:var(--tinta-3)}
.balao-voce small svg{width:13px;height:13px;color:var(--violeta)}
.pergunta{justify-self:start;max-width:min(360px,92%);padding:12px 14px;border-color:rgba(168,150,255,.4);box-shadow:0 0 36px -10px rgba(124,104,240,.5)}
.pergunta .t{display:flex;align-items:center;gap:8px;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--violeta);margin-bottom:8px}
.pergunta .t::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violeta);animation:pulsa 1.4s infinite}
.pergunta p{margin:0 0 10px;color:var(--tinta)}
.pergunta .ops{display:flex;flex-wrap:wrap;gap:6px}
.pergunta .ops span{padding:6px 10px;border-radius:9px;border:1px solid var(--linha-3);background:var(--painel-2);font-size:12.5px}
.pergunta .ops span.esc{border-color:var(--violeta);background:#1f1d30}
.hud--1,.hud--2,.hud--3,.hud--4{left:16px;bottom:18px;width:min(380px, calc(100% - 32px))}
.hud--1{top:auto}
.barra-prog{height:3px;border-radius:3px;background:var(--linha);overflow:hidden;margin:2px 13px 12px}
.barra-prog i{display:block;height:100%;width:0;background:var(--laranja);border-radius:inherit}
.como__palco[data-passo="2"] .hud--2 .barra-prog i{animation:enche 2.6s .2s cubic-bezier(.3,.6,.3,1) forwards}
.hud--2 .log .ok{opacity:0}
.como__palco[data-passo="2"] .hud--2 .log .ok{animation:aparece .01s 2.8s forwards}
@keyframes enche{to{width:100%}}
.log{margin:0;padding:0 13px 12px;font:500 11.5px/1.6 var(--mono);color:#c3d2d6;white-space:pre-wrap}
.log .ok{color:var(--verde)}
.segmentos{display:grid;gap:7px;padding:2px 13px 12px}
.seg{display:grid;grid-template-columns:70px 1fr 70px;gap:10px;align-items:center;font:500 11.5px/1 var(--mono);color:var(--tinta-2)}
.seg .trilho{height:5px;border-radius:5px;background:var(--linha);overflow:hidden}
.seg .trilho i{display:block;height:100%;width:0;background:var(--led);box-shadow:0 0 10px var(--led)}
.seg .md5{color:var(--tinta-3);text-align:right}
.como__palco[data-passo="3"] .seg .trilho i{animation:enche .7s cubic-bezier(.3,.6,.3,1) forwards}
.como__palco[data-passo="3"] .seg:nth-child(1) .trilho i{animation-delay:.2s}
.como__palco[data-passo="3"] .seg:nth-child(2) .trilho i{animation-delay:.9s;animation-duration:.25s}
.como__palco[data-passo="3"] .seg:nth-child(3) .trilho i{animation-delay:1.2s;animation-duration:.25s}
.como__palco[data-passo="3"] .seg:nth-child(4) .trilho i{animation-delay:1.5s;animation-duration:1.4s}
.como__palco[data-passo="3"] .seg .md5{animation:aparece .01s forwards;opacity:0}
.como__palco[data-passo="3"] .seg:nth-child(1) .md5{animation-delay:.9s}
.como__palco[data-passo="3"] .seg:nth-child(2) .md5{animation-delay:1.15s}
.como__palco[data-passo="3"] .seg:nth-child(3) .md5{animation-delay:1.45s}
.como__palco[data-passo="3"] .seg:nth-child(4) .md5{animation-delay:2.9s}
@keyframes aparece{to{opacity:1;color:var(--verde)}}
.monitor{padding:0 0 4px}
.monitor .cab{display:flex;justify-content:space-between;padding:9px 13px;border-bottom:1px solid var(--linha);font:600 11.5px/1 var(--mono);color:var(--tinta-2)}
.monitor .cab .ponto{display:inline-flex;align-items:center;gap:6px;color:var(--verde)}
.monitor .cab .ponto::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verde);box-shadow:0 0 8px var(--verde)}
.monitor pre{margin:0;height:124px;overflow:hidden;padding:9px 13px;font:500 12px/1.55 var(--mono);color:#cdeee2;display:flex;flex-direction:column;justify-content:flex-end}
.monitor pre .sis{color:var(--tinta-3)}
.monitor pre .um{color:var(--led)}
.hud--4 .acao{border-top:1px solid var(--linha)}
/* visor da câmera: mira no LED, cuja posição a cena escreve em --led-x/--led-y */
.hud--5{inset:0;transform:none}
.como__palco[data-passo="5"] .hud--5{transform:none}
.mira{position:absolute;left:var(--led-x,50%);top:var(--led-y,50%);width:78px;height:78px;transform:translate(-50%,-50%);transition:left .12s linear, top .12s linear}
.mira::before,.mira::after{content:"";position:absolute;inset:0;border:2px solid var(--led);border-radius:6px;
  -webkit-mask:linear-gradient(#000 0 0) top left/18px 18px no-repeat, linear-gradient(#000 0 0) top right/18px 18px no-repeat, linear-gradient(#000 0 0) bottom left/18px 18px no-repeat, linear-gradient(#000 0 0) bottom right/18px 18px no-repeat;
          mask:linear-gradient(#000 0 0) top left/18px 18px no-repeat, linear-gradient(#000 0 0) top right/18px 18px no-repeat, linear-gradient(#000 0 0) bottom left/18px 18px no-repeat, linear-gradient(#000 0 0) bottom right/18px 18px no-repeat}
.mira::after{inset:-10px;opacity:.35}
.mira__rot{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);white-space:nowrap;padding:5px 9px;border-radius:8px;background:rgba(8,13,15,.85);border:1px solid var(--linha-2);font:600 11.5px/1 var(--mono);color:var(--tinta-2)}
.mira__rot .mira__estado::before{content:"apagado";color:var(--tinta-3)}
html[data-led="1"] .mira__rot .mira__estado::before{content:"aceso";color:var(--ambar)}
.sem-3d .mira{display:none}
.hud-rec{position:absolute;left:16px;top:44px;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:rgba(8,13,15,.8);border:1px solid var(--linha-2);font:600 11.5px/1 var(--mono);color:var(--tinta-2)}
.hud-rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vermelho);animation:pulsa 1s infinite}
.fotos{position:absolute;left:16px;right:16px;bottom:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px}
.foto{padding:8px;display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center}
.mini{display:block;height:48px;border-radius:6px;background:radial-gradient(circle at 34% 58%, var(--c,#1a2a33) 0 3px, transparent 4px), radial-gradient(circle at 34% 58%, var(--g,transparent) 0, transparent 16px), linear-gradient(135deg,#1b2a30,#0e1619);border:1px solid var(--linha-2);position:relative;overflow:hidden}
.mini::after{content:"";position:absolute;left:44%;top:22%;width:40%;height:52%;border-radius:3px;background:linear-gradient(135deg,#cfd5da,#8d959c);opacity:.7}
.foto.acesa .mini,.mini.acesa{--c:#ffe3bd;--g:rgba(255,166,50,.75)}
.foto b{display:block;font-size:12.5px}
.foto span{display:block;font:500 11px/1.3 var(--mono);color:var(--tinta-3)}
.foto.acesa span{color:var(--ambar)}
.hud--6{left:16px;right:16px;bottom:18px;max-width:440px;padding:16px 18px;border-color:rgba(79,208,139,.4);box-shadow:0 0 50px -12px rgba(79,208,139,.45), 0 24px 50px -18px rgba(0,0,0,.8)}
.veredito__t{display:flex;align-items:center;gap:10px;font:760 20px/1.1 var(--display);color:var(--verde);margin-bottom:10px}
.veredito__t svg{width:22px;height:22px}
.veredito dl{margin:0;display:grid;gap:8px}
.veredito dt{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.veredito dd{margin:3px 0 0;color:var(--tinta-2);font-size:13.5px}
.veredito dd b{color:var(--tinta);font-weight:600}
@media (max-width:900px){
  .como__grade{grid-template-columns:minmax(0,1fr)}
  .como__lado{order:-1;position:sticky;top:var(--topo);z-index:5;height:46svh;margin-inline:-16px;padding:8px 8px 0;background:linear-gradient(var(--bg) 80%, transparent)}
  .como__fixo{position:relative;top:0;height:100%}
  .como__palco{border-radius:18px}
  .como__passos::before{left:17px}
  .passo{min-height:44svh;align-items:center;padding:3vh 0 3vh 52px}
  .passo:first-child{min-height:44svh;padding-top:3vh}
  .passo__pino,.passo:first-child .passo__pino{width:36px;height:36px;top:50%;transform:translateY(-50%);border-radius:10px}
  .hud{font-size:12.5px}
  .hud--1,.hud--2,.hud--3,.hud--4{left:10px;bottom:10px;width:calc(100% - 20px)}
  .hud--0{left:10px;right:10px;bottom:10px}
  .pergunta{display:none}
  .fotos{left:10px;right:10px;bottom:10px}
  .hud--6{left:10px;right:10px;bottom:10px;padding:12px 14px}
  .veredito dl{display:none}
  .monitor pre{height:92px}
  .log,.hud--2 .log{display:none}
}

/* ---------- a bancada por dentro (réplica da interface) ---------- */
.demo__cenarios{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 22px}
.cenario{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:12px;border:1px solid var(--linha-3);background:var(--painel-2);cursor:pointer;font-size:15px;transition:all var(--troca)}
.cenario:hover{transform:translateY(-1px);border-color:var(--violeta)}
.cenario:active{transform:scale(.97)}
.cenario[aria-pressed="true"]{border-color:var(--violeta);background:#1f1d30;box-shadow:0 0 0 3px rgba(168,150,255,.12)}
.cenario svg{width:17px;height:17px;color:var(--violeta)}
.cenario small{font:600 10.5px/1 var(--mono);letter-spacing:.04em;color:var(--tinta-3);padding:4px 7px;border-radius:999px;border:1px solid var(--linha-2);margin-left:2px}
.cenario[aria-pressed="true"] small{color:var(--violeta);border-color:rgba(168,150,255,.35)}
.ide{--p:#141c20;--p2:#182227;--r:#1f2b31;--l:#243238;--l2:#31434a;border-radius:16px;border:1px solid var(--l2);background:#0c1114;box-shadow:0 60px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4), 0 0 120px -40px rgba(12,161,166,.35);overflow:hidden;font-size:13px;color:#e2eaec}
.ide__topo{height:50px;display:flex;align-items:center;gap:12px;padding:0 12px;background:#10171a;border-bottom:1px solid var(--l)}
.ide__topo .marca{font-size:15px}
.ide__topo .marca__sinal{width:24px;height:24px;border-radius:7px}
.ide__topo .marca__logo{--a:19px}
.ide__proj{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.ide__proj small{font:600 11px/1 var(--fonte);color:var(--tinta-3);padding:3px 7px;border-radius:999px;background:var(--r)}
.ide__centro{display:flex;gap:8px;margin-inline:auto}
.pilula{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 4px;border-radius:999px;border:1px solid var(--l2);background:var(--p2);font-weight:700;font-size:13px}
.pilula i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff}
.pilula i svg{width:13px;height:13px}
.pilula.trabalhando i{background:var(--laranja);animation:pulsa 1.1s infinite}
.ide__placa{height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border-radius:8px;border:1px solid var(--l2);background:var(--p2);font-size:12.5px;font-weight:600;color:#e2eaec}
.ide__placa svg{width:15px;height:15px;color:var(--tinta-2)}
.ide__placa small{font:500 11px/1 var(--mono);color:var(--tinta-3)}
.ide__placa b,.pilula b,.etapa-pilula > b{font-weight:400;font-size:10px;color:var(--tinta-3)}
.ide__dir{display:flex;align-items:center;gap:6px;color:var(--tinta-2);font-size:13px}
.ide__dir svg{width:16px;height:16px}
.ide__corpo{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr) minmax(220px,270px);gap:8px;padding:8px;height:600px}
.pn{background:var(--p);border:1px solid var(--l);border-radius:12px;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.pn__cab{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--l)}
.pn__cab h4{margin:0;font-size:14px}
.pn__cab small{display:block;font-size:11.5px;color:var(--verde)}
.pn__cab .nova{margin-left:auto;font-size:11.5px;color:var(--tinta-3)}
.ai-marca{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#a896ff26;color:var(--violeta)}
.ai-marca svg{width:16px;height:16px}
.chat{flex:1;overflow:hidden;padding:12px;display:flex;flex-direction:column;gap:10px;justify-content:flex-end}
.chat .msg-voce{align-self:flex-end;max-width:88%;padding:9px 12px;border-radius:14px 14px 4px 14px;background:var(--r);line-height:1.45;font-size:12.5px}
.atividade{border:1px solid #a896ff40;background:#a896ff0a;border-radius:12px;padding:6px 10px 8px}
.atividade > b{display:block;font:700 11.5px/1.3 var(--fonte);color:var(--violeta);margin:2px 0 6px}
.atividade ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.atividade li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:start;animation:entra .3s ease both}
.atividade li .t{font-style:normal;font-size:10.5px;color:var(--tinta-3);padding-top:3px;white-space:nowrap}
.atividade li.rodando .t{color:var(--laranja)}
.chat .msg-voce .anexo{display:block;margin-top:6px;font:500 11px/1.3 var(--mono);color:var(--teal-2)}
@keyframes entra{from{opacity:0;transform:translateY(4px)}}
.atividade li .ac-ic{width:22px;height:22px;font-size:11.5px}
.atividade li strong{display:block;font-size:12.5px;font-weight:600}
.atividade li span{display:block;font-size:11.5px;color:var(--tinta-2);line-height:1.35}
.acao .ac-ic,.atividade li .ac-ic{display:grid;place-items:center;margin-top:0;line-height:1;color:var(--teal-2)}
.atividade li.rodando .ac-ic{background:rgba(243,156,18,.16);color:var(--laranja);animation:pulsa 1.1s infinite}
.atividade li.falhou .ac-ic{background:#ff6b6b24;color:var(--vermelho)}
.atividade li.falhou span{color:#ffb3b3}
.atividade .nota-ia{display:block;padding:7px 9px;border-radius:8px;background:#ffffff08;font-size:12px;color:var(--tinta-2)}
.atividade .nota-ia em{display:block;font:700 10px/1.2 var(--fonte);letter-spacing:.06em;text-transform:uppercase;color:var(--violeta);margin-bottom:3px}
.atividade .rodape-at{margin-top:6px;font-size:11.5px;color:var(--laranja)}
.fotos-at{display:flex;gap:6px;margin-top:4px}
.fotos-at .mini{width:64px;height:42px;border-radius:6px}
.compor{margin:0 10px 10px;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;font-size:12px;color:var(--tinta-3)}
.compor__caixa{min-height:54px;padding:9px 11px;border-radius:10px;border:1px solid var(--l2);background:#0f1619;color:var(--tinta-3);line-height:1.45;transition:border-color .3s}
.compor__caixa.digitando{color:#e2eaec;border-color:var(--teal)}
.compor__pe{display:flex;align-items:center;gap:6px}
.compor__dir{margin-left:auto}
.compor__ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;border:1px solid var(--l2);color:var(--tinta-2)}
.compor__ic svg{width:15px;height:15px}
.compor__ic.voz{color:var(--violeta);border-color:#a896ff59}
.compor__anexo{display:flex;gap:6px}
.chip-anexo{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:8px;border:1px solid var(--l2);background:var(--p2);font:500 11px/1.2 var(--mono);color:#dae3e3;animation:entra .3s ease both}
.chip-anexo svg{width:12px;height:12px;color:var(--teal-2)}
.compor .env{padding:6px 12px;border-radius:8px;background:var(--teal);color:var(--teal-tinta);font-weight:600}
.compor .env.trab{background:var(--laranja);color:#1a1000}
.centro-col{display:grid;grid-template-rows:minmax(0,1fr) 200px;gap:8px;min-width:0;min-height:0}
.abas-arq{display:flex;height:34px;background:#10171a;border-bottom:1px solid var(--l)}
.abas-arq__lista{display:flex;min-width:0;overflow:hidden}
.abas-arq__lista span{display:inline-flex;align-items:center;gap:6px;padding:0 14px;font:500 12px/1 var(--mono);color:var(--tinta-3);border-top:2px solid transparent;white-space:nowrap}
.abas-arq__lista span.ativa{background:#171e21;color:#dae3e3;border-top-color:var(--teal)}
.abas-arq__lista span.ia::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--violeta)}
.abas-arq__mais{display:grid;place-items:center;width:30px;color:var(--tinta-3);font-size:16px}
.ia-mudou{margin:4px 8px 4px auto;display:inline-flex;align-items:center;gap:6px;padding:0 4px 0 10px;border-radius:99px;border:1px solid #a896ff59;background:#a896ff14;color:var(--violeta);font:600 11.5px/1 var(--fonte);white-space:nowrap;animation:anel-ia 1.1s ease-out}
.ia-mudou svg{width:12px;height:12px}
.ia-mudou i{display:grid;place-items:center;width:18px;height:18px;border-left:1px solid #a896ff40;font-style:normal;opacity:.8}
@keyframes anel-ia{0%{box-shadow:0 0 0 0 #a896ff80}100%{box-shadow:0 0 0 10px #a896ff00}}
.editor{flex:1;background:#171e21;overflow:hidden;padding:8px 0;font:500 12.5px/1.62 var(--mono)}
.editor .ln{display:grid;grid-template-columns:40px 1fr;white-space:pre}
.editor .ln.atual{background:#1f282c}
/* o que a IA mudou desde o último pedido, como no editor da bancada */
.editor .ln.ia{background-image:linear-gradient(90deg,#a896ff2e,#a896ff12 45%,#a896ff08);box-shadow:inset 3px 0 0 var(--violeta)}
.editor .ln.ia .n{color:var(--violeta)}
.editor .ln.rem{display:block;padding-left:40px;font:italic 500 11px/1.9 var(--fonte);color:var(--violeta);opacity:.85}
.editor .n{color:#5f6e74;text-align:right;padding-right:14px;user-select:none}
.editor .cur{display:inline-block;width:2px;height:1.2em;vertical-align:-3px;background:#4fc3c7;animation:pisca 1s steps(1) infinite}
.ide .estado{height:24px;display:flex;align-items:center;gap:14px;padding:0 10px;background:#0f1619;border-top:1px solid var(--l);font:500 11px/1 var(--mono);color:var(--tinta-3)}
.ide .estado > span{white-space:nowrap}
.ide .estado .mem{color:var(--teal-2)}
.ide .estado .esp{flex:1}
.console .abas-c{display:flex;align-items:center;gap:2px;height:34px;padding:0 6px;border-bottom:1px solid var(--l)}
.console .abas-c > span:not(.etapa){white-space:nowrap;display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 10px;font-weight:600;font-size:12.5px;color:var(--tinta-2);border-bottom:2px solid transparent}
.console .abas-c span.ativa{color:#e2eaec;border-bottom-color:var(--teal)}
.console .badge{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--r);color:var(--tinta-2)}
.console .badge.laranja{background:#f39c1226;color:var(--laranja)}
.console .badge.verde{background:#4fd08b1f;color:var(--verde)}
.console .badge.verm{background:#ff6b6b24;color:var(--vermelho)}
.console .etapa{margin-left:auto;font-size:11.5px;color:var(--laranja);padding-right:6px}
.compila{padding:8px 12px 4px;border-bottom:1px solid var(--l)}
.compila__t{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:600;color:#e2eaec}
.compila__t small{font:500 11px/1.5 var(--fonte);color:var(--tinta-3)}
.compila.ok .compila__t span{color:var(--verde)}
.compila__barra{height:4px;margin-top:6px;border-radius:4px;background:var(--r);overflow:hidden}
.compila__barra i{display:block;height:100%;width:0;background:var(--teal-2);transition:width .35s linear}
.compila.ok .compila__barra i{background:var(--verde)}
.console pre .ia-enviou{color:var(--violeta)}
.console pre{flex:1;margin:0;padding:8px 12px;overflow:hidden;font:500 11.5px/1.55 var(--mono);color:#c3d2d6;white-space:pre-wrap;display:flex;flex-direction:column;justify-content:flex-end}
.console pre.serial{color:#cdeee2}
.console pre .sis{color:var(--tinta-3)}
.console pre .erro{color:var(--vermelho)}
.console pre .ok{color:var(--verde)}
.bancada-col{gap:0}
.cartao-b{padding:12px;border-bottom:1px solid var(--l)}
.cartao-b:last-child{border-bottom:0}
.cartao-b__cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cartao-b__cab h5{margin:0;font:700 11px/1 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.estado-pill{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--r);color:var(--tinta-2)}
.estado-pill.ok{background:#4fd08b1f;color:var(--verde)}
.estado-pill.gravando{background:#f39c1226;color:var(--laranja)}
.estado-pill.olhando{background:#a896ff26;color:var(--violeta)}
.ide .placa-mini{width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
/* a placa desenhada é um <symbol>: o estado entra por variáveis, que atravessam o <use> */
.ide[data-led="1"]{--led-io2:#6cc2ff;--brilho-io2:1;--led-l:#ffc46b;--brilho-l:1}
.ide[data-conectada="1"]{--cabo:1}
.olhos{position:relative;aspect-ratio:4/3;border-radius:10px;border:1px dashed var(--l2);overflow:hidden;display:grid;place-items:center;text-align:center;color:var(--tinta-3);font-size:11.5px;padding:10px}
.olhos svg.cam{width:22px;height:22px;color:var(--violeta);margin:0 auto 6px}
.olhos .vista{position:absolute;inset:0;display:none;background:radial-gradient(60% 60% at 50% 55%, #1c2a2f, #0b1113)}
.ide[data-camera="1"] .olhos{border-style:solid}
.ide[data-camera="1"] .olhos .vista{display:block}
.olhos .vista svg{position:absolute;inset:14% 8%;width:84%;height:auto;transform:rotate(-6deg)}
.olhos .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.olhos .flash.dispara{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
.olhos .selo{position:absolute;left:6px;bottom:6px;padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.7);font:600 10px/1.2 var(--mono);color:#fff;opacity:0;transition:opacity .3s}
.olhos .selo.vis{opacity:1}
.olhos .olho-nome{position:absolute;right:6px;top:6px;padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.65);font:600 10px/1.2 var(--fonte);color:#fff;display:none}
.ide[data-camera="1"] .olhos .olho-nome{display:block}
.ide[data-olhando="1"] .olhos{box-shadow:0 0 0 2px var(--violeta)}
.olhos-n{margin-left:8px;margin-right:auto;font-size:10.5px;color:var(--tinta-3)}
.olhos-add{font-size:11px;font-weight:600;color:var(--tinta-2)}
.ide__btn{display:inline-flex;align-items:center;gap:6px;color:var(--tinta-2);font-size:13px}
.ide__btn svg,.ide__ic{width:15px;height:15px;color:var(--tinta-3)}
.etapa-pilula{position:relative;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;border:1px solid #a896ff59;background:#a896ff14;color:var(--violeta);font:600 11.5px/1 var(--fonte);animation:anel-ia 1.1s ease-out}
.etapa-pilula svg{width:13px;height:13px}
.etapas{position:absolute;left:0;top:34px;z-index:5;width:280px;display:grid;gap:6px;padding:10px;border-radius:12px;border:1px solid var(--l2);background:#131b1f;box-shadow:0 20px 50px rgba(0,0,0,.6);color:#e2eaec;font-weight:400;animation:entra .3s ease both}
.etapas strong{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.etapas__i{display:grid;gap:3px;padding:7px 9px;border-radius:8px;background:var(--p2);border-left:3px solid var(--teal)}
.etapas__i.ia{border-left-color:var(--violeta)}
.etapas__i b{font-size:12px;font-weight:600;color:#e2eaec}
.etapas__i small{font-size:10.5px;color:var(--tinta-3)}
.etapas__i em{margin-left:6px;padding:1px 6px;border-radius:99px;background:#a896ff26;color:var(--violeta);font-size:10px}
.etapas__bt{display:flex;justify-content:flex-end;gap:8px;font-size:11px;font-weight:600;color:var(--teal-2)}
.demo__rodape{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;color:var(--tinta-3);font-size:13.5px}
.demo__rodape .bt{min-height:40px}
@media (min-width:1101px){.ide__corpo{height:700px}}
@media (max-width:1100px){.ide__corpo{grid-template-columns:minmax(250px,300px) minmax(0,1fr)}.bancada-col{display:none}}
@media (max-width:760px){
  .ide__corpo{grid-template-columns:1fr;height:auto}
  .ide .estado{gap:8px;overflow:hidden}
  #ide-arq,.ide .estado > span:last-child{display:none}
  .console .abas-c > span:nth-child(3),.console .etapa{display:none}
  .pn.chat-col{height:390px}
  .centro-col{grid-template-rows:280px 170px}
  .ide__centro .ide__placa,.ide__dir,.ide__proj small,.ide__btn,.ide__ic,.etapa-pilula{display:none}
  .pilula{padding-right:4px}.pilula em{display:none}
}

/* ---------- recursos ---------- */
.grade-rec{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.rec{position:relative;grid-column:span 2;padding:24px;border-radius:var(--raio);border:1px solid var(--linha);background:linear-gradient(180deg, rgba(23,32,36,.75), rgba(15,21,24,.75));overflow:hidden;transition:border-color var(--troca), transform var(--troca)}
.rec:hover{border-color:var(--linha-2);transform:translateY(-1px)}
.rec--largo{grid-column:span 3}
.rec--alto{grid-row:span 2}
.rec h3{margin:14px 0 8px;font:700 19px/1.25 var(--display);letter-spacing:-.01em}
.rec p{margin:0;color:var(--tinta-2);font-size:15px}
.rec__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--teal-vel);color:var(--teal-2);border:1px solid rgba(28,196,202,.25)}
.rec__ic svg{width:21px;height:21px}
.rec__ic.v{background:var(--violeta-vel);color:var(--violeta);border-color:rgba(168,150,255,.3)}
.rec__ic.l{background:var(--laranja-vel);color:var(--laranja);border-color:rgba(243,156,18,.3)}
.rec__ic.b{background:var(--led-vel);color:var(--led);border-color:rgba(79,179,255,.3)}
.rec ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px;color:var(--tinta-2);font-size:14.5px}
.rec ul li{display:flex;gap:8px}
.rec ul li::before{content:"";flex:none;width:5px;height:5px;margin-top:9px;border-radius:1px;background:var(--teal-2)}
kbd{font:600 11.5px/1 var(--mono);padding:5px 7px;border-radius:6px;border:1px solid var(--linha-3);border-bottom-width:2px;background:var(--painel-2);color:var(--tinta-2)}
.rec .tempo{display:flex;align-items:flex-end;gap:10px;margin-top:16px}
.rec .tempo div{flex:0 0 36px;min-width:0;text-align:center}
.rec .tempo p{flex:1;margin:0 0 2px 8px;font:500 12px/1.4 var(--mono);color:var(--tinta-3)}
.rec .tempo i{display:block;border-radius:6px 6px 2px 2px;background:linear-gradient(var(--laranja), rgba(243,156,18,.25))}
.rec .tempo span{display:block;margin-top:6px;font:500 11.5px/1.3 var(--mono);color:var(--tinta-3)}
@media (max-width:980px){.grade-rec{grid-template-columns:1fr 1fr}.rec,.rec--largo{grid-column:span 1}.rec--alto{grid-row:auto}}
@media (max-width:620px){.grade-rec{grid-template-columns:1fr}}

/* ---------- ferramentas: pinagem ---------- */
.pinagem{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px) minmax(0,1fr);gap:clamp(12px,2.5vw,32px);align-items:center}
.pinagem__col{display:grid;gap:18px}
.grupo h3{margin:0 0 8px;display:flex;align-items:center;gap:8px;font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.grupo h3::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.grupo ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pinagem__col--esq .grupo{text-align:right}
.pinagem__col--esq .grupo h3{justify-content:flex-end}
.pinagem__col--esq .grupo ul{justify-content:flex-end}
.pino{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:7px;background:color-mix(in srgb, var(--c) 13%, transparent);border:1px solid color-mix(in srgb, var(--c) 38%, transparent);font-size:13.5px;line-height:1.2;cursor:default;transition:background var(--troca), transform var(--troca)}
.pino code{font:500 10.5px/1 var(--mono);color:var(--tinta-3)}
.pino:hover,.pino:focus-visible{background:color-mix(in srgb, var(--c) 26%, transparent);transform:translateY(-1px)}
.pino .dica{display:none;position:absolute;z-index:5;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;max-width:260px;padding:8px 10px;border-radius:8px;background:#0c1114;border:1px solid var(--linha-2);font-size:12.5px;color:var(--tinta-2);text-align:left;opacity:0;visibility:hidden;transition:opacity .2s;pointer-events:none;box-shadow:0 12px 30px -10px #000}
.pino:hover .dica,.pino:focus-visible .dica{display:block;opacity:1;visibility:visible}
#ferramentas{overflow-x:clip}
@media (max-width:1200px){.pino code{display:none}}
@media (max-width:980px){.pino{flex-wrap:wrap}.pino:hover,.pino:focus-visible{transform:none}.pino .dica{position:static;flex-basis:100%;transform:none;width:auto;max-width:none;box-shadow:none}}
.pinagem__chip{position:relative}
.pinagem__chip svg{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.pinagem__nota{text-align:center;color:var(--tinta-3);font-size:14px;margin-top:28px}
@media (max-width:980px){.pinagem{grid-template-columns:1fr}.pinagem__chip{order:-1;max-width:220px;margin:0 auto}.pinagem__col--esq .grupo{text-align:left}.pinagem__col--esq .grupo h3,.pinagem__col--esq .grupo ul{justify-content:flex-start}.pino code{display:none}}

/* ---------- comparar ---------- */
.tabela-env{overflow-x:auto;border-radius:var(--raio);border:1px solid var(--linha);background:rgba(15,21,24,.7)}
table.comparar{width:100%;border-collapse:collapse;min-width:720px}
.comparar th,.comparar td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--linha);font-size:15px;vertical-align:middle}
.comparar thead th{font:600 13px/1.3 var(--fonte);color:var(--tinta-2);background:rgba(0,0,0,.2)}
.comparar thead th.nossa{color:var(--tinta);background:linear-gradient(180deg, rgba(12,161,166,.22), rgba(12,161,166,.06))}
.comparar thead th .marca{font-size:15px}
.comparar thead th .marca__sinal{width:22px;height:22px;border-radius:7px}
.comparar thead th .marca__logo{--a:20px}
.comparar tbody th{font-weight:500;color:var(--tinta)}
.comparar td.nossa{background:rgba(12,161,166,.06)}
.comparar tr:last-child th,.comparar tr:last-child td{border-bottom:0}
.sim,.nao,.voce-t{display:inline-flex;align-items:center;gap:8px;font-size:14.5px}
.sim{color:var(--verde)} .nao{color:var(--tinta-3)} .voce-t{color:#ffb3b3}
.sim svg,.nao svg,.voce-t svg{width:17px;height:17px;flex:none}
.tabela-dica{display:none;margin:10px 0 0;text-align:center;font:500 12.5px/1.4 var(--mono);color:var(--tinta-3)}
@media (max-width:640px){
  table.comparar{min-width:540px}
  .comparar th,.comparar td{padding:12px 10px;font-size:13.5px}
  .comparar tbody th,.comparar thead th:first-child{position:sticky;left:0;z-index:1;width:132px;background:#0e1417}
  .sim,.nao,.voce-t{font-size:13px;gap:5px}
  .tabela-dica{display:block}
}

/* ---------- segurança ---------- */
.grade-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.seg-item{padding:26px 24px;background:var(--bg-2)}
.seg-item svg{width:24px;height:24px;color:var(--teal-2)}
.seg-item h3{margin:14px 0 6px;font:700 17px/1.3 var(--display)}
.seg-item p{margin:0;color:var(--tinta-2);font-size:14.5px}
@media (max-width:900px){.grade-seg{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grade-seg{grid-template-columns:1fr}}

/* ---------- planos ---------- */
.planos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
/* quatro planos: quatro colunas na tela larga, 2 × 2 na média (a regra de uma coluna, mais abaixo, vale para as duas) */
.planos[data-planos="4"]{grid-template-columns:repeat(4,1fr);gap:12px}
.planos[data-planos="4"] .plano{padding:26px 18px 20px}
.planos[data-planos="4"] .plano__fita{left:18px}
.planos[data-planos="4"] .preco .v{font-size:40px}
@media (max-width:1180px){.planos[data-planos="4"]{grid-template-columns:repeat(2,1fr);max-width:820px;margin-inline:auto;gap:14px;row-gap:28px}}
.plano{position:relative;display:flex;flex-direction:column;padding:26px 22px 22px;border-radius:var(--raio);border:1px solid var(--linha);background:linear-gradient(180deg, rgba(23,32,36,.8), rgba(14,20,23,.8))}
.plano--destaque{border-color:rgba(28,196,202,.55);background:radial-gradient(120% 70% at 50% 0%, rgba(12,161,166,.16), transparent 60%), linear-gradient(180deg, rgba(23,32,36,.92), rgba(14,20,23,.92));box-shadow:0 30px 70px -30px rgba(12,161,166,.55)}
.plano__fita{position:absolute;top:-12px;left:22px;padding:5px 10px;border-radius:999px;background:var(--teal);color:var(--teal-tinta);font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.plano h3{margin:0;font:760 24px/1.1 var(--display);letter-spacing:-.02em}
.plano__para{margin:6px 0 18px;color:var(--tinta-2);font-size:14.5px;min-height:3.3em}
.preco{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.preco .rs{font:600 16px/1 var(--fonte);color:var(--tinta-2)}
.preco .v{font:780 44px/1 var(--display);letter-spacing:-.03em}
.preco .per{color:var(--tinta-2);font-size:14.5px}
.preco-sub{min-height:1.5em;margin:0 0 18px;color:var(--tinta-3);font-size:13px}
.creditos{display:flex;align-items:center;gap:10px;min-height:58px;padding:11px 12px;border-radius:10px;background:var(--violeta-vel);border:1px solid rgba(168,150,255,.25);margin-bottom:18px}
.creditos b{font:760 22px/1 var(--display);color:var(--tinta)}
.creditos span{font-size:13px;color:var(--tinta-2);line-height:1.3}
.plano ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px;font-size:14.5px;color:var(--tinta-2)}
.plano ul li{display:grid;grid-template-columns:18px 1fr;gap:9px}
.plano ul svg{width:17px;height:17px;margin-top:3px;color:var(--teal-2)}
.plano ul b{color:var(--tinta);font-weight:600}
.plano .bt{margin-top:auto}
.creditos-explica{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.ce{padding:18px 20px;border-radius:var(--raio-m);border:1px solid var(--linha);background:rgba(15,21,24,.7)}
.ce h4{margin:0 0 6px;font-size:15px}
.ce p{margin:0;color:var(--tinta-2);font-size:14px}
@media (max-width:640px){.creditos-explica{grid-template-columns:1fr}.plano__para{min-height:0}}

/* ---------- para quem ---------- */
.grade-quem{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.quem{display:flex;flex-direction:column;padding:24px;border-radius:var(--raio);border:1px solid var(--linha);background:rgba(15,21,24,.7)}
.quem .num{font:600 12px/1 var(--mono);color:var(--teal-2)}
.quem h3{margin:12px 0 8px;font:700 19px/1.25 var(--display)}
.quem p{margin:0;color:var(--tinta-2);font-size:15px}
.quem p:not(.ex){margin-bottom:14px}
.quem .ex{margin-top:auto;padding-top:12px;border-top:1px dashed var(--linha-2);font:500 12.5px/1.5 var(--mono);color:var(--tinta-3)}
@media (max-width:980px){.grade-quem{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grade-quem{grid-template-columns:1fr}}

/* ---------- transparência ---------- */
.limites{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.limites__lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.limites__lista li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:14px 16px;border-radius:12px;background:rgba(15,21,24,.7);border:1px solid var(--linha);color:var(--tinta-2);font-size:15px}
.limites__lista li b{color:var(--tinta);font-weight:600}
.limites__lista svg{width:20px;height:20px;margin-top:2px;color:var(--teal-2)}
.roteiro{position:sticky;top:calc(var(--topo) + 24px);padding:24px;border-radius:var(--raio);border:1px dashed var(--linha-2)}
.roteiro h3{margin:0 0 6px;font:700 19px/1.2 var(--display)}
.roteiro p{margin:0 0 14px;color:var(--tinta-2);font-size:15px}
.placas{display:flex;flex-wrap:wrap;gap:6px}
.placas span{font:500 12.5px/1 var(--mono);padding:7px 10px;border-radius:8px;border:1px solid var(--linha-2);color:var(--tinta-3)}
@media (max-width:900px){.limites{grid-template-columns:1fr}}

/* ---------- dúvidas ---------- */
.duvidas{max-width:860px;margin:0 auto;display:grid;gap:10px}
.duvidas details{border-radius:14px;border:1px solid var(--linha);background:rgba(15,21,24,.7);transition:border-color var(--troca)}
.duvidas details[open]{border-color:var(--linha-2)}
.duvidas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:600;font-size:16.5px}
.duvidas summary::-webkit-details-marker{display:none}
.duvidas summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--tinta-3);border-bottom:2px solid var(--tinta-3);transform:rotate(45deg) translateY(-3px);transition:transform var(--troca)}
.duvidas details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.duvidas details > div{padding:0 22px 20px;color:var(--tinta-2);font-size:15.5px}
.duvidas details > div p{margin:0 0 10px}
.duvidas details > div p:last-child{margin:0}

/* ---------- chamada final ---------- */
.final{position:relative;padding-block:clamp(70px,9vw,120px) clamp(90px,10vw,140px);overflow:hidden}
.final__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.final__palco{position:relative;height:clamp(340px, 42vw, 520px)}
.final .titulo{font-size:clamp(36px,4.8vw,64px)}
.final .lead{margin-bottom:30px}
@media (max-width:900px){.final__grade{grid-template-columns:1fr}.final__palco{order:-1;height:320px;margin-inline:-16px}}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--linha);padding:36px 0 44px;color:var(--tinta-3);font-size:14px}
.rodape .envelope{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.rodape a{color:var(--tinta-2);text-decoration:none}
.rodape a:hover{color:var(--tinta)}
.rodape .marca{gap:12px}.rodape .marca__logo{--a:24px}
.rodape nav{display:flex;gap:18px;flex-wrap:wrap}

/* ---------- diálogo de cadastro ---------- */
dialog.lista{width:min(520px, calc(100vw - 24px));margin-block:max(12px,6vh) auto;max-height:calc(100dvh - max(12px,6vh) - 12px);padding:0;border-radius:20px;border:1px solid var(--linha-3);background:#12191c;color:var(--tinta);box-shadow:0 40px 100px -20px #000}
dialog.lista::backdrop{background:rgba(4,8,10,.78);backdrop-filter:blur(4px)}
.lista__corpo{padding:26px 26px 24px}
.lista__corpo h2{margin:12px 0 6px;font:760 28px/1.1 var(--display);letter-spacing:-.02em}
.lista__corpo > p:not(.rotulo){margin:0 0 20px;color:var(--tinta-2);font-size:15px}
.lista__fechar{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:10px;border:1px solid var(--linha-2);background:transparent;color:var(--tinta-2);cursor:pointer;display:grid;place-items:center}
.lista__fechar:hover{color:var(--tinta);border-color:var(--linha-3)}
.lista__fechar svg{width:16px;height:16px}
.campo{display:grid;gap:6px;margin-bottom:14px}
.campo label{font-size:13.5px;font-weight:600;color:var(--tinta-2)}
.campo label small{font-weight:400;color:var(--tinta-3)}
.campo input,.campo select,.campo textarea{width:100%;min-height:46px;padding:11px 13px;border-radius:11px;border:1px solid var(--linha-3);background:#0c1114;color:var(--tinta);font-size:15.5px;transition:border-color var(--troca), box-shadow var(--troca)}
.campo textarea{min-height:84px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(12,161,166,.2)}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campo [aria-invalid="true"],.campo [aria-invalid="true"]:focus{border-color:var(--vermelho);box-shadow:0 0 0 3px rgba(255,107,107,.18)}
@media (max-width:480px){.duas{grid-template-columns:1fr;gap:0}}
.lista__msg{margin:0 0 14px;padding:12px 14px;border-radius:11px;font-size:14.5px}
.lista__msg:empty{padding:0;margin:0;border:0}
.lista__msg.ok{background:var(--verde-vel);border:1px solid rgba(79,208,139,.35);color:var(--tinta)}
.lista__msg.aviso{background:var(--laranja-vel);border:1px solid rgba(243,156,18,.35);color:var(--tinta)}
.lista__msg.erro{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.35);color:var(--tinta)}
.lista__priv{margin:12px 0 0;color:var(--tinta-3);font-size:12.5px}

/* ---------- entrada suave das seções ---------- */
.js .surge{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.75,.25,1)}
.js .surge.vis{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js .surge{opacity:1;transform:none}
}

/* ================================================================ v2: conta de verdade, 15 placas */
.barra__acoes{display:flex;align-items:center;gap:8px}
.logado .so-visitante{display:none !important}
/* a conta no topo (quem já entrou): avatar que abre um painel */
.conta{position:relative;display:flex}
.conta__bt{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--linha-2);background:transparent;cursor:pointer;transition:border-color var(--troca), transform var(--troca)}
.conta__bt:hover,.conta__bt[aria-expanded="true"]{border-color:var(--teal-2)}
.conta__bt:hover{transform:translateY(-1px)}
.conta__bt:active{transform:scale(.97)}
.conta__bt:focus-visible{outline:2px solid var(--teal-2);outline-offset:2px}
/* iniciais escuras sobre a cor da conta: passam de 4,5:1 nas oito cores que o app sorteia */
.conta__av{--av:var(--teal);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--av);color:#061012;font:700 13px/1 var(--fonte);letter-spacing:.02em;flex:none}
.conta__av--g{width:42px;height:42px;font-size:15px}
.conta__painel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:min(320px, calc(100vw - 32px));max-height:calc(100vh - var(--topo) - 12px);max-height:calc(100dvh - var(--topo) - 12px);overflow-y:auto;overscroll-behavior:contain;padding:8px;border-radius:16px;border:1px solid var(--linha-2);background:var(--painel);box-shadow:0 24px 60px -18px rgba(0,0,0,.85)}
.conta__quem{display:flex;align-items:center;gap:12px;padding:10px 10px 12px}
.conta__quem div{display:grid;gap:3px;min-width:0}
.conta__quem b{font:700 15px/1.2 var(--fonte);color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conta__quem small{font-size:13px;color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conta__quem small:empty{display:none}
.conta__plano{display:grid;gap:4px;margin:0 2px 6px;padding:10px;border-radius:11px;background:var(--teal-vel);border:1px solid rgba(28,196,202,.22)}
.conta__plano b{font:700 13px/1.2 var(--fonte);color:var(--teal-2)}
.conta__plano small{font-size:12.5px;line-height:1.45;color:var(--tinta-2)}
.conta__plano b:empty,.conta__plano small:empty{display:none}
.conta__itens{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.conta__itens a,.conta__itens button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--tinta);font:500 14.5px/1.2 var(--fonte);text-decoration:none;cursor:pointer;transition:background var(--troca), color var(--troca)}
.conta__itens a:hover,.conta__itens button:hover{background:var(--elevado)}
.conta__itens a:focus-visible,.conta__itens button:focus-visible{background:var(--elevado);outline:2px solid var(--teal-2);outline-offset:-2px}
.conta__itens [aria-disabled="true"]{opacity:.55;cursor:progress}
.conta__itens li:last-child{border-top:1px solid var(--linha);margin-top:4px;padding-top:4px}
.conta__itens .conta__sair{color:var(--vermelho)}
.conta__msg{margin:6px 4px 2px;padding:9px 10px;border-radius:10px;background:rgba(243,156,18,.12);color:var(--ambar);font-size:13px;line-height:1.45}
@media (prefers-reduced-motion:reduce){.conta__bt,.conta__itens a,.conta__itens button{transition:none}.conta__bt:hover,.conta__bt:active{transform:none}}
@media (max-width:560px){.barra__acoes .so-visitante{display:none}}
.heroi__entrar{margin:14px 0 0;color:var(--tinta-2);font-size:15px}
.heroi__entrar a{color:var(--teal-2);font-weight:600;text-underline-offset:3px}

/* placas */
.familias{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.familia{padding:24px;border-radius:var(--raio);border:1px solid var(--linha);border-top:3px solid var(--c);background:linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, transparent), transparent 40%), rgba(15,21,24,.75)}
.familia h3{margin:0 0 6px;font:760 22px/1.15 var(--display);letter-spacing:-.01em}
.familia__como{margin:0 0 16px;color:var(--tinta-2);font-size:14.5px}
.familia ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.familia li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.2);border:1px solid var(--linha)}
.familia li b{font:700 15.5px/1.2 var(--fonte)}
.familia li span{flex-basis:100%;order:3;color:var(--tinta-3);font-size:13.5px;line-height:1.35}
.familias__nota{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;max-width:860px;margin:24px auto 0;text-align:center;color:var(--tinta-2);font-size:14.5px}
.familias__nota b{color:var(--tinta)}
@media (max-width:980px){.familias{grid-template-columns:1fr}}

/* planos */
@media (max-width:980px){.planos{grid-template-columns:1fr;max-width:520px;margin-inline:auto;row-gap:28px}}
@media (max-width:700px){.planos[data-planos="4"]{grid-template-columns:1fr;max-width:520px}}
.pacote{display:flex;align-items:center;justify-content:center;gap:12px;max-width:760px;margin:22px auto 0;padding:14px 18px;border-radius:var(--raio-m);border:1px solid rgba(168,150,255,.3);background:var(--violeta-vel);color:var(--tinta-2);font-size:15px}
.pacote svg{flex:none;width:20px;height:20px;color:var(--violeta)}
.pacote b{color:var(--tinta)}

/* cadastro */
.lista__corpo > p.convite,.convite{margin:-8px 0 18px;padding:11px 14px;border-radius:11px;border:1px solid rgba(79,208,139,.35);background:var(--verde-vel);color:var(--tinta);font-size:14.5px}
.lista__msg a{color:var(--teal-2);font-weight:600}
.lista__priv a{color:var(--teal-2)}
#cad-fechado{display:grid;gap:12px}

/* réplica: avatar, gravar dividido, placa com nome, memória */
.pilula--dividida{padding-right:0}
.pilula--dividida b{display:grid;place-items:center;height:100%;padding:0 9px;margin-left:4px;border-left:1px solid var(--l2);font-size:11px;color:var(--tinta-2)}
.ide__dir{gap:10px}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:conic-gradient(var(--teal) var(--uso,18%), var(--l2) 0)}
.avatar span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#7c68f0;color:#fff;font:700 10.5px/1 var(--fonte)}
.placa-nome{margin:6px 0 0;font-size:12px;font-weight:600;color:#e2eaec}
.placa-nome small{display:block;margin-top:2px;font-weight:500;font-size:11px;color:var(--tinta-3)}
@media (max-width:1320px){.ide__dir-t{display:none}}

/* ---------- faixa: funciona com ---------- */
.faixa-placas{position:relative;z-index:1;border-top:1px solid var(--linha);background:linear-gradient(90deg, transparent, rgba(18,25,28,.55), transparent)}
.faixa-placas .envelope{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,3vw,40px);padding-block:22px}
.faixa-placas__t{margin:0;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.faixa-placas__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:10px 24px}
.faixa-placas__lista li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.faixa-placas__lista li::before{content:"";grid-row:span 2;width:9px;height:9px;border-radius:2px;background:var(--c);box-shadow:0 0 12px color-mix(in srgb, var(--c) 60%, transparent)}
.faixa-placas__lista b{font:760 clamp(17px,1.6vw,21px)/1.15 var(--display);letter-spacing:-.01em;color:var(--tinta)}
.faixa-placas__lista span{font-size:13px;line-height:1.35;color:var(--tinta-3)}
.faixa-placas__mais{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--teal-2);text-decoration:none;white-space:nowrap;transition:transform var(--troca)}
.faixa-placas__mais:hover{transform:translateY(-1px)}
.faixa-placas__mais svg{width:16px;height:16px}
@media (max-width:1100px){.faixa-placas .envelope{grid-template-columns:1fr}.faixa-placas__lista{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:16px 20px}}
@media (max-width:520px){.faixa-placas__lista{grid-template-columns:1fr}}

/* ---------- conversa por voz ---------- */
.voz__grade{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.voz__lista{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.voz__lista li{display:grid;grid-template-columns:34px 1fr;gap:12px;color:var(--tinta-2);font-size:15.5px;line-height:1.55}
.voz__lista svg{width:20px;height:20px;margin:3px 0 0 7px;color:var(--violeta)}
.voz__lista b{color:var(--tinta);font-weight:600}
.voz__nota{margin:22px 0 0;padding:14px 16px;border-radius:12px;border:1px solid rgba(168,150,255,.22);background:var(--violeta-vel);color:var(--tinta-2);font-size:14px;line-height:1.55}
.voz__nota b{color:var(--tinta);font-weight:600}
.voz__acao{margin:18px 0 0}
.voz__palco{position:relative;display:grid;gap:14px;justify-items:center}
.vp{width:min(420px,100%);border-radius:18px;border:1px solid rgba(168,150,255,.35);background:linear-gradient(180deg,#171a2b,#11141f);box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 90px -30px rgba(124,104,240,.55);padding:16px;font-size:13.5px;color:#e6e4f5}
.vp__topo{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.vp__estado b{display:block;font-size:15px}
.vp__estado small{font:500 12px/1.4 var(--mono);color:#a9a4c9}
.vp__x{color:#8d88ad;font-size:18px}
.vp__orbe{position:relative;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c9bcff,#7c68f0 60%,#4a3aa8);box-shadow:0 0 24px rgba(124,104,240,.6)}
.vp__orbe i{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(168,150,255,.5);opacity:0}
.vp[data-fase="ouvindo"] .vp__orbe i{animation:onda-voz 1.6s ease-out infinite}
.vp[data-fase="ouvindo"] .vp__orbe i:nth-child(2){animation-delay:.53s}
.vp[data-fase="ouvindo"] .vp__orbe i:nth-child(3){animation-delay:1.06s}
.vp[data-fase="falando"] .vp__orbe{animation:fala-voz .5s ease-in-out infinite alternate}
.vp[data-fase="trabalhando"] .vp__orbe{background:radial-gradient(circle at 35% 30%,#ffd9a0,#f39c12 60%,#a8620a);box-shadow:0 0 24px rgba(243,156,18,.55);animation:pulsa 1.2s ease-in-out infinite}
@keyframes onda-voz{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.6);opacity:0}}
@keyframes fala-voz{from{transform:scale(1)}to{transform:scale(1.1)}}
.vp__falas{height:360px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 32px);mask-image:linear-gradient(transparent,#000 32px);margin:14px 0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.vp__falas p{margin:0;padding:8px 11px;border-radius:12px;line-height:1.45;max-width:90%;animation:entra .35s ease both}
.vp__falas .voce{align-self:flex-end;background:#262a3f;border-bottom-right-radius:4px}
.vp__falas .ela{align-self:flex-start;background:#2a2450;border:1px solid rgba(168,150,255,.25);border-bottom-left-radius:4px}
.vp__falas .ela small,.vp__falas .voce small{display:block;font:600 10px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#a9a4c9;margin-bottom:3px}
.vp__falas .pergunta-voz{border-color:rgba(243,193,61,.45)}
.vp__pe{display:flex;justify-content:space-between;align-items:center;gap:10px}
.vp__bt{padding:8px 14px;border-radius:10px;background:#7c68f0;color:#fff;font-weight:600;font-size:13px}
.vp[data-fase]:not([data-fase="parado"]) .vp__bt{background:#2d2a45;color:#d9d4ff}
.vp__voz{font-size:12px;color:#a9a4c9}
.vp-bancada{width:min(420px,100%);display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--linha-2);background:rgba(15,21,24,.85);font-size:13px;transition:border-color .3s}
.vp-bancada b{display:block;font-weight:600;color:var(--tinta)}
.vp-bancada small{display:block;color:var(--tinta-3);font-size:12px}
.vp-bancada__ic{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--elevado);color:var(--teal-2)}
.vp-bancada__ic svg{width:16px;height:16px}
.vp-bancada.ativa{border-color:rgba(243,156,18,.5)}
.vp-bancada.ativa .vp-bancada__ic{background:rgba(243,156,18,.16);color:var(--laranja);animation:pulsa 1.1s infinite}
.vp-bancada.ok{border-color:rgba(79,208,139,.45)}
.vp-bancada.ok .vp-bancada__ic{background:var(--verde-vel);color:var(--verde)}
@media (max-width:900px){.voz__grade{grid-template-columns:minmax(0,1fr)}.vp__falas{height:340px}}

/* ---------- recursos: pequenas amostras ---------- */
.lilas{color:var(--violeta)}
.mini-editor{margin-top:14px;display:grid;padding:8px 0;border-radius:10px;background:#171e21;border:1px solid var(--linha);font:500 12px/1.7 var(--mono);color:#dae3e3;overflow:hidden}
.mini-editor span{padding:0 14px;white-space:pre}
.mini-editor .ia{background-image:linear-gradient(90deg,#a896ff2e,#a896ff12 45%,#a896ff08);box-shadow:inset 3px 0 0 var(--violeta)}
.mini-editor .rem{font:italic 500 11px/1.9 var(--fonte);color:var(--violeta)}
.teclas-painel{margin-top:14px;display:grid;grid-template-columns:repeat(3,38px) 1fr;grid-template-rows:38px 38px;gap:6px;align-items:center}
.teclas-painel kbd{display:grid;place-items:center;height:38px;border-radius:9px;border:1px solid var(--linha-3);border-bottom-width:3px;background:var(--painel-2);font:700 13px/1 var(--mono);color:var(--tinta)}
.teclas-painel .k-w{grid-column:2;grid-row:1;border-color:var(--teal);color:var(--teal-2);animation:tecla 2.4s ease-in-out infinite}
.teclas-painel .k-a{grid-column:1;grid-row:2}.teclas-painel .k-s{grid-column:2;grid-row:2}.teclas-painel .k-d{grid-column:3;grid-row:2}
.teclas-painel span{grid-column:4;grid-row:1 / 3;padding-left:12px;font:500 12px/1.4 var(--mono);color:var(--tinta-3)}
@keyframes tecla{0%,55%,100%{transform:none;border-bottom-width:3px}20%,40%{transform:translateY(2px);border-bottom-width:1px;background:var(--teal-vel)}}
@media (prefers-reduced-motion:reduce){.teclas-painel .k-w,.vp__orbe,.vp__orbe i,.ia-mudou,.etapa-pilula{animation:none !important}}

/* ---------- placas: quatro grupos ---------- */
.familias--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.familia h3 small{margin-left:8px;font:600 12px/1 var(--mono);color:var(--c);vertical-align:3px}
.familia__placas{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.familia__placas span{padding:5px 9px;border-radius:8px;background:rgba(0,0,0,.22);border:1px solid var(--linha);font-size:13px;color:var(--tinta)}
.familia--pc{border-style:dashed;border-top-style:solid}
@media (max-width:980px){.familias--4{grid-template-columns:1fr}}
.monitor pre .hora,.console pre .hora{font-style:normal;color:var(--tinta-3);margin-right:10px}
.familias__nota{display:block}
.familias__nota b{margin-right:6px}

/* réplica: a barra do topo cabe em tablet e notebook pequeno */
.ide__proj,.ide__placa,.ide__btn,.pilula{white-space:nowrap}
.ide__proj{min-width:0}
#ide-projeto{min-width:0;max-width:16ch;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1120px){.ide__btn,.ide__ic,.ide__placa small,.ide__placa > svg,.ide__proj small{display:none}}
@media (max-width:960px){.ide__dir{display:none}#ide-arq,.ide .estado > span:last-child{display:none}.ide .estado{overflow:hidden}}
/* a resposta final da IA é uma mensagem; o painel de ações fica embaixo, recolhido quando é longo */
.chat .msg-ia{align-self:flex-start;max-width:94%;padding:9px 12px;border-radius:14px 14px 14px 4px;background:#a896ff12;border:1px solid #a896ff33;line-height:1.45;font-size:12.5px;color:#e2eaec;animation:entra .3s ease both}
.chat .msg-ia em{display:block;font:700 10px/1.2 var(--fonte);letter-spacing:.06em;text-transform:uppercase;color:var(--violeta);margin-bottom:3px}
.atividade.recolhida ol{display:none}
.atividade.recolhida > b::after{content:" ▸";color:var(--tinta-3)}
.olhos-add{margin-left:10px;white-space:nowrap}