/* APIcultura - "Conecte seu agente": agente (vidro) -> hub 3D em camadas -> provedores, com fios de energia SVG.
   So CSS 3D + SVG. Animacoes apenas em transform, opacity e stroke-dashoffset. */
.cx{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) 280px minmax(0,.9fr);gap:clamp(28px,5vw,76px);align-items:center;padding:8px 0 4px}
.cx>*{min-width:0}
.cx-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.cx-col{position:relative;z-index:2}
/* ---- agente ---- */
.cx-agent{padding:0;border-radius:var(--r-lg);overflow:visible;box-shadow:0 1px 0 var(--glass-line) inset,0 28px 60px -28px rgba(60,38,0,.45),0 6px 18px -8px rgba(60,38,0,.2)}
:root[data-theme="dark"] .cx-agent{box-shadow:0 1px 0 var(--glass-line) inset,0 30px 70px -26px rgba(0,0,0,.9)}
.cx-ahead{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:22px 22px 16px}
.cx-logo{position:relative;width:96px;height:96px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(160deg,var(--glass-2),var(--paper));box-shadow:0 0 0 2px var(--accent),0 0 42px -6px var(--accent-glow),var(--sh)}
.cx-logo::before{content:"";position:absolute;inset:-9px;border-radius:38px;border:1.5px solid var(--accent);opacity:.55;animation:cxring 2.6s var(--ease-out) infinite}
.cx-logo::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 45%);pointer-events:none}
.cx-logo .glyph{display:grid;place-items:center;animation:cxpop .5s var(--ease-expo)}
.cx-logo .ti{--s:54px}
.cx-logo svg{width:50px;height:50px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cx-sel{display:block;font:600 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:6px}
.cx-ahead h3{font-size:clamp(22px,2.4vw,28px);line-height:1.1}
.cx-ahead small{display:block;margin-top:4px;color:var(--text-mute);font-size:13px}
.cx-tabs{display:flex;gap:8px;align-items:center;padding:0 22px 16px;flex-wrap:wrap}
.cx-tabs>span{font:500 12px var(--f-ui);color:var(--text-mute);margin-right:4px}
.cx-tab{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);cursor:pointer;color:var(--ink);transition:transform .18s var(--ease-out),opacity .18s;opacity:.7}
.cx-tab:hover{opacity:1;transform:translateY(-2px)}
.cx-tab[aria-selected="true"]{opacity:1;box-shadow:0 0 0 2px var(--accent),0 8px 18px -8px var(--accent-glow);transform:translateY(-2px)}
.cx-tab .ti{--s:22px}.cx-tab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cx-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cx-persona{display:flex;gap:10px;align-items:center;margin:0 22px;padding:10px 0;border-top:1px solid var(--glass-edge);font-size:13px;color:var(--text-mute)}
.cx-persona>span:first-child,.cx-persona b{white-space:nowrap}.cx-persona b{color:var(--ink);font:600 14px var(--f-ui)}.cx-persona .badge{margin-left:auto}
.cx-agent .persona-swap{padding:0 22px}
.cx-agent .agent-prog{padding:2px 22px 22px}
.cx-agent .task{padding:11px 2px}
.cx-agent .task .tg{max-width:40%;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---- hub 3D ---- */
.cx-mid{display:grid;justify-items:center;gap:6px}
.hub{position:relative;width:280px;display:grid;justify-items:center}
.hub-stage{position:relative;width:280px;height:270px;perspective:950px}
.hub-lift{position:absolute;inset:0;animation:cxfloat 6s ease-in-out infinite}
.hub-shadow{position:absolute;left:50%;top:50%;width:270px;height:100px;margin:64px 0 0 -135px;border-radius:50%;background:radial-gradient(closest-side,rgba(60,32,0,.5),transparent);filter:blur(10px);opacity:.75;animation:cxshadow 6s ease-in-out infinite}
:root[data-theme="dark"] .hub-shadow{background:radial-gradient(closest-side,rgba(0,0,0,.9),transparent)}
.hub-obj{position:absolute;left:50%;top:50%;width:240px;height:240px;margin:-120px 0 0 -120px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(0deg)}
.hl{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(calc(var(--z)*11px));fill:var(--accent);fill-opacity:var(--fo,.3);stroke:var(--honey-1);stroke-opacity:var(--so,.8);stroke-width:1.6;stroke-linejoin:round}
.hl.top{fill:#fff;fill-opacity:.2;stroke:#fff;stroke-opacity:.9}
:root[data-theme="dark"] .hl.top{fill-opacity:.12;stroke-opacity:.7}
.hl.top .in{fill:none;stroke:var(--honey-1);stroke-opacity:.75}
.hl.top .cell{fill:var(--honey-1);fill-opacity:.28;stroke:var(--honey-2);stroke-opacity:.8}
.hub-core{position:absolute;left:50%;top:50%;width:240px;height:140px;margin:-70px 0 0 -120px;border-radius:50%;background:radial-gradient(closest-side,var(--accent-glow),transparent);opacity:.5;transform:translateY(-8px)}
.hub.pulse .hub-core{animation:cxcore 3s ease-out}
.hub-mark{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-76px 0 0 -52px;filter:drop-shadow(0 14px 14px rgba(70,40,0,.45)) drop-shadow(0 0 14px var(--accent-glow))}
.hub-mark svg{width:100%;height:100%;display:block}
.hub-label{text-align:center;display:grid;gap:2px}
.hub-label b{font:600 15px var(--f-ui);color:var(--ink)}
.hub-label span{font-size:12.5px;color:var(--text-mute)}
/* ---- provedores ---- */
.cx-right{display:grid;gap:16px;align-content:center}
.cx-pers{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cx-pers-l{font:600 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);width:100%;margin-bottom:2px}
.cx-pers .chip{padding:8px 13px;font-size:13px}
.cx-pers .chip[aria-selected="true"]{background:var(--accent);color:#2A1A00;border-color:transparent}
.cx-belt{display:grid;gap:14px;transition:opacity .25s}.cx-belt.out{opacity:0}
.pv{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 18px 14px 14px;border-radius:22px;background:linear-gradient(160deg,var(--glass-2),var(--glass));border:1px solid var(--glass-line);box-shadow:0 1px 0 var(--glass-line) inset,0 18px 36px -22px rgba(60,38,0,.55),0 3px 8px -4px rgba(60,38,0,.18);opacity:.6;isolation:isolate;transition:transform .5s var(--ease-expo),opacity .35s}
.pv::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--accent),0 24px 44px -18px var(--accent-glow);opacity:0;transition:opacity .35s;z-index:-1;pointer-events:none}
:root[data-theme="dark"] .pv{box-shadow:0 1px 0 var(--glass-line) inset,0 22px 40px -22px rgba(0,0,0,.9)}
.pv-ico{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line)}
.pv-ico .ti{--s:26px}
.pv-t{display:grid;gap:3px;min-width:0}.pv-t b{font:600 15px var(--f-ui);color:var(--ink)}
.pv-t code{font:500 11.5px var(--f-mono);color:var(--text-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-st{font:600 12px var(--f-mono);color:var(--accent-strong);min-width:3.4em;text-align:right}
.pv.on{opacity:1;transform:translateX(-10px) scale(1.03)}
.pv.on::after{opacity:1}
.pv.done{opacity:.9}
.pv.on .pv-ico{border-color:var(--accent)}
/* ---- fios de energia (base estatica; faiscas = elementos HTML movidos por transform em JS) ---- */
.w-base{fill:none;stroke:url(#cxGrad);stroke-width:2;stroke-linecap:round;opacity:.42}
.w-go,.w-back,.w-gg,.w-gk{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:7 93;stroke-dashoffset:7;opacity:0}
.w-gg,.w-gk{stroke-width:11}
:root[data-theme="dark"] .w-go,:root[data-theme="dark"] .w-back,:root[data-theme="dark"] .w-gg,:root[data-theme="dark"] .w-gk{stroke:var(--honey-1)}
.w.on .w-go,.w.on .w-back{opacity:1}
.w.on .w-gg,.w.on .w-gk{opacity:.26}
.w.on .w-go,.w.on .w-gg{animation:var(--wg) 3s linear infinite}
.w.on .w-back,.w.on .w-gk{animation:var(--wb) 3s linear infinite}
.w0{--wg:cx0go;--wb:cx0back}.wp{--wg:cxpgo;--wb:cxpback}
.cx.static .w-base{opacity:.7}.cx.static .w-go,.cx.static .w-back,.cx.static .w-gg,.cx.static .w-gk{display:none}
/* ---- linha de comando ---- */
.cx-cmd{margin:clamp(28px,4vw,48px) auto 0;max-width:860px;display:grid;gap:10px;justify-items:center;text-align:center}
.cx-cmd .cmd{width:100%}
.cx-cmd small{color:var(--text-mute);font-size:12.5px}
/* ---- keyframes ---- */
@keyframes cxring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.14);opacity:0}}
@keyframes cxpop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes cxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes cxshadow{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(.9);opacity:.55}}
@keyframes cxcore{0%{transform:translateY(-8px) scale(1);opacity:.5}25%{opacity:1}100%{transform:translateY(-8px) scale(1.25);opacity:.5}}
@keyframes cx0go{0%{stroke-dashoffset:7}25%,100%{stroke-dashoffset:-100}}
@keyframes cx0back{0%,80%{stroke-dashoffset:-100}100%{stroke-dashoffset:7}}
@keyframes cxpgo{0%,25%{stroke-dashoffset:7}50%,100%{stroke-dashoffset:-100}}
@keyframes cxpback{0%,55%{stroke-dashoffset:-100}80%,100%{stroke-dashoffset:7}}
/* ---- responsivo: empilha agente, hub, provedores ---- */
@media(max-width:940px){
  .cx{grid-template-columns:1fr;gap:64px;max-width:520px;margin-inline:auto}
  .cx-belt{grid-template-columns:1fr 1fr;gap:12px}
  .pv{grid-template-columns:auto 1fr;padding:12px;gap:10px}.pv-st{grid-column:1/-1;text-align:left;min-height:1.2em}
  .pv.on{transform:translateY(-4px) scale(1.02)}
  .pv-ico{width:42px;height:42px}
}
@media(max-width:480px){
  .cx-agent .task .tg{display:none}.cx-persona>span:first-child{font-size:0}.cx-persona>span:first-child::before{content:"Persona";font-size:13px}
  .cx-ahead{grid-template-columns:auto 1fr;padding:18px 16px 12px}
  .cx-logo{width:84px;height:84px;border-radius:26px}.cx-logo .ti{--s:46px}.cx-logo svg{width:42px;height:42px}
  .cx-tabs,.cx-persona,.cx-agent .persona-swap,.cx-agent .agent-prog{padding-inline:16px}.cx-persona{margin-inline:16px;padding-inline:0}
  .cx-belt{gap:10px}.pv-t b{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.cx *{animation:none!important}.hub-lift{animation:none}}