/* ==========================================================================
   [api-vivo] SECAO "API E AUTOMACAO" DA HOME (12/10/2026)
   Notebook com o codigo sendo escrito e o terminal devolvendo a resposta
   REAL da API (campos conferidos nas rotas /api/v1). Passos ao lado, um aceso
   por vez, que trocam a cena do notebook. Prefixo `ax-`.

   Leveza: so transform/opacity; o JS pausa tudo fora da tela e com a aba
   oculta; no celular nada de enfeite continuo nem backdrop-filter, e no
   maximo 2 cards flutuantes, parados.
   ========================================================================== */
.ax{--ax-roxo:#a78bfa;--ax-roxo2:#7c3aed;--ax-neon:#39ff88;--ax-azul:#38bdf8;--ax-ouro:#fcd34d;--ax-tx:#f4f1fa;--ax-tx2:#b3acc4;
  --ax-mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,monospace;
  position:relative;margin-top:clamp(56px,7vw,96px)!important;margin-bottom:clamp(40px,5vw,72px)!important;color:var(--ax-tx)}
.ax *{box-sizing:border-box}

/* ------------------------------------------------------------ cabecalho */
.ax-head{max-width:640px;margin:0 0 clamp(26px,3.4vw,40px)}
.ax-eyebrow{display:inline-flex;align-items:center;gap:9px;height:28px;padding:0 13px 0 10px;border-radius:999px;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:#d8c8ff;background:rgba(168,85,247,.09);border:1px solid rgba(196,160,255,.26)}
.ax-eyebrow i{font-style:normal;font-family:var(--ax-mono);letter-spacing:0;color:var(--ax-neon)}
.ax-head h2{margin:16px 0 12px;font-family:'Space Grotesk',"Plus Jakarta Sans",system-ui,sans-serif;font-size:clamp(28px,3.6vw,44px);
  line-height:1.06;font-weight:600;letter-spacing:-.03em;color:#fff}
.ax-head h2 em{font-style:normal;background:linear-gradient(90deg,#c4b5fd,#a78bfa 45%,#39ff88);-webkit-background-clip:text;background-clip:text;color:transparent}
.ax-head p{margin:0;color:var(--ax-tx2);font-size:15px;line-height:1.65;max-width:56ch}

/* ------------------------------------------------------------ grade */
.ax-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,56px);align-items:center}

/* ------------------------------------------------------------ palco do notebook */
.ax-palco{position:relative;isolation:isolate;padding:26px 0 30px}
.ax-aura{position:absolute;z-index:-1;inset:6% 4% 0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side at 35% 45%,rgba(139,92,246,.38),transparent 70%),
             radial-gradient(closest-side at 72% 60%,rgba(56,189,248,.18),transparent 70%),
             radial-gradient(closest-side at 50% 90%,rgba(57,255,136,.10),transparent 70%);
  animation:ax-respira 8s ease-in-out infinite}
@keyframes ax-respira{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}

.ax-note{position:relative;width:100%;max-width:640px;margin:0 auto;transform-origin:50% 100%}
/* tampa: aluminio escuro com bisel fino */
.ax-tampa{position:relative;padding:12px 12px 14px;border-radius:18px 18px 8px 8px;
  background:linear-gradient(160deg,#3a3448,#17131f 38%,#0c0a12);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.14),0 40px 80px -40px rgba(0,0,0,.9)}
.ax-camera{position:absolute;top:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#1d1a26;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ax-tela{position:relative;overflow:hidden;border-radius:9px;aspect-ratio:16/10;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0f0b1a,#0a0713);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
/* reflexo de vidro parado */
.ax-tela::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.06),transparent 28%,transparent 70%,rgba(255,255,255,.025))}
/* base: teclado visto de frente, mais larga que a tampa */
.ax-base{position:relative;height:14px;margin:0 -5.5%;border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,#4a4358,#221d2c 55%,#120f18);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 18px 30px -14px rgba(0,0,0,.85)}
.ax-base i{position:absolute;left:50%;top:0;width:16%;height:5px;margin-left:-8%;border-radius:0 0 7px 7px;background:#16121e}

/* barra da janela */
.ax-barra{display:flex;align-items:center;gap:10px;height:30px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025)}
.ax-luzes{display:flex;gap:5px;flex:none}
.ax-luzes i{width:8px;height:8px;border-radius:50%;background:#3a3446}
.ax-luzes i:nth-child(1){background:#ff5f57}.ax-luzes i:nth-child(2){background:#febc2e}.ax-luzes i:nth-child(3){background:#28c840}
.ax-abas{display:flex;gap:2px;min-width:0;overflow:hidden}
.ax-aba{flex:none;height:22px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:6px;font:500 10.5px/1 var(--ax-mono);
  color:#8d84a3;transition:background .3s,color .3s}
.ax-aba b{width:6px;height:6px;border-radius:2px;background:currentColor;opacity:.55}
.ax-aba.on{background:rgba(167,139,250,.14);color:#e9e2ff}
.ax-url{margin-left:auto;flex:none;font:500 10px/1 var(--ax-mono);color:#6f6788;white-space:nowrap}
.ax-url b{color:var(--ax-neon);font-weight:600}

/* editor */
.ax-corpo{flex:1 1 auto;display:flex;min-height:0}
.ax-lateral{flex:none;width:126px;padding:10px 8px;border-right:1px solid rgba(255,255,255,.05);font:500 10.5px/1.9 var(--ax-mono);color:#6f6788}
.ax-lateral span{display:block;padding:0 6px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-lateral span.on{background:rgba(167,139,250,.12);color:#e9e2ff}
.ax-lateral i{font-style:normal;color:#4e4764;margin-right:5px}
.ax-codigo{flex:1 1 auto;min-width:0;margin:0;padding:10px 12px;overflow:hidden;font:400 11.5px/1.75 var(--ax-mono);color:#d8d2e6;counter-reset:ax-ln}
.ax-l{display:block;white-space:pre;opacity:0;transform:translateY(4px);transition:opacity .28s ease,transform .28s ease}
.ax-l::before{counter-increment:ax-ln;content:counter(ax-ln);display:inline-block;width:20px;margin-right:12px;text-align:right;color:#3f3954}
.ax-l.on{opacity:1;transform:none}
.ax-cursor{display:inline-block;width:7px;height:13px;margin-left:2px;vertical-align:-2px;background:var(--ax-neon);animation:ax-pisca 1s steps(1) infinite}
@keyframes ax-pisca{50%{opacity:0}}
/* cores da sintaxe */
.ax-c{color:#6b6383;font-style:italic}.ax-m{color:var(--ax-azul);font-weight:600}.ax-s{color:var(--ax-neon)}
.ax-k{color:#c4b5fd}.ax-n{color:var(--ax-ouro)}.ax-p{color:#8d84a3}.ax-f{color:#f0abfc}

/* terminal */
.ax-term{flex:none;height:39%;border-top:1px solid rgba(255,255,255,.07);background:rgba(4,2,10,.55);display:flex;flex-direction:column}
.ax-term-t{display:flex;align-items:center;gap:8px;height:24px;padding:0 12px;font:600 9.5px/1 var(--ax-mono);letter-spacing:.12em;text-transform:uppercase;color:#6f6788}
.ax-term-t .ax-status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;letter-spacing:.04em;text-transform:none;font-weight:600;
  color:var(--ax-neon);opacity:0;transition:opacity .3s}
.ax-term-t .ax-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ax-neon);box-shadow:0 0 8px var(--ax-neon)}
.ax-term.ok .ax-status{opacity:1}
.ax-saida{flex:1 1 auto;margin:0;padding:2px 12px 8px;overflow:hidden;font:400 11px/1.65 var(--ax-mono);color:#cfc8de}
.ax-saida .ax-l::before{content:none}

/* cards flutuantes em volta do notebook */
.ax-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:15px;white-space:nowrap;
  background:rgba(22,16,40,.74);border:1px solid rgba(233,222,255,.14);color:#fff;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07);animation:ax-flutua 7s ease-in-out infinite}
.ax-chip b{display:block;font-size:12.5px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.ax-chip small{display:block;font-size:10.5px;color:rgba(233,222,255,.62);line-height:1.3}
.ax-chip-ic{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;color:#fff}
.ax-chip-ic svg{width:15px;height:15px}
.ax-chip-ic.verde{background:linear-gradient(135deg,#7dffb2,#10b981);box-shadow:0 0 16px -3px rgba(57,255,136,.55);color:#04260f}
.ax-chip-ic.roxo{background:linear-gradient(135deg,#a78bfa,#7c3aed);box-shadow:0 6px 16px -6px rgba(124,58,237,.7)}
.ax-chip-ic.azul{background:linear-gradient(135deg,#7dd3fc,#2563eb);box-shadow:0 6px 16px -6px rgba(37,99,235,.7)}
.ax-chip-ic.ouro{background:linear-gradient(135deg,#fde68a,#d97706);box-shadow:0 0 16px -3px rgba(251,191,36,.6);color:#2a1600}
.ax-chip .ax-saldo{background:linear-gradient(180deg,#fff 30%,#a7ffc9);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.ax-c1{left:-3%;top:6%}
.ax-c2{right:-4%;top:28%;animation-delay:-2.5s;animation-duration:8s}
.ax-c3{left:-5%;bottom:20%;animation-delay:-4s;animation-duration:9s}
.ax-c4{right:2%;bottom:2%;animation-delay:-1.2s;animation-duration:7.6s}
@keyframes ax-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ------------------------------------------------------------ passos */
.ax-passos{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:ax-p}
.ax-passo{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 14px;align-items:start;
  padding:15px 16px 16px;border-radius:18px;cursor:pointer;text-align:left;width:100%;color:inherit;font:inherit;
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:1px solid rgba(233,222,255,.11);
  transition:border-color .35s ease,background .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.ax-passo:hover{border-color:rgba(196,160,255,.3)}
.ax-passo:focus-visible{outline:2px solid #c4b5fd;outline-offset:2px}
.ax-passo-ic{grid-row:1/3;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#cfc4ea;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);transition:background .35s,color .35s,box-shadow .35s}
.ax-passo-ic svg{width:18px;height:18px}
.ax-passo h3{margin:0;display:flex;align-items:baseline;gap:9px;font-size:15px;font-weight:650;letter-spacing:-.01em;color:#fff}
.ax-passo h3::before{counter-increment:ax-p;content:"0" counter(ax-p);font:600 10.5px/1 var(--ax-mono);color:#6f6788;letter-spacing:.06em}
.ax-passo p{margin:0;font-size:13px;line-height:1.55;color:var(--ax-tx2)}
.ax-passo code{font:500 11.5px/1 var(--ax-mono);color:#c4b5fd;background:rgba(167,139,250,.1);padding:2px 6px;border-radius:5px;white-space:nowrap}
/* barra neon de progresso do passo aceso */
.ax-passo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#a78bfa,#39ff88);box-shadow:0 0 10px rgba(57,255,136,.55)}
.ax-passo.on{border-color:rgba(196,160,255,.42);background:linear-gradient(165deg,rgba(167,139,250,.14),rgba(124,58,237,.05))}
.ax-passo.on .ax-passo-ic{color:#fff;background:linear-gradient(135deg,#a78bfa,#7c3aed);border-color:transparent;box-shadow:0 8px 20px -8px rgba(124,58,237,.8)}
.ax-passo.on h3::before{color:var(--ax-neon)}
.ax-passo.on::after{animation:ax-barra var(--ax-dur,7.5s) linear forwards}
@keyframes ax-barra{to{transform:scaleX(1)}}

/* botoes */
.ax-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ax-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 8px 0 20px;border-radius:999px;
  font-size:14px;font-weight:650;text-decoration:none;color:#fff;transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .25s}
.ax-btn:active{transform:scale(.98)}
.ax-btn-p{background:linear-gradient(135deg,#a78bfa,#7c3aed 60%,#6d28d9);box-shadow:0 14px 30px -14px rgba(124,58,237,.95),inset 0 1px 0 rgba(255,255,255,.22)}
.ax-btn-p::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;pointer-events:none;transform:skewX(-20deg) translateX(0);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:ax-faixa 5.5s ease-in-out infinite}
@keyframes ax-faixa{0%,70%{transform:skewX(-20deg) translateX(0)}100%{transform:skewX(-20deg) translateX(560%)}}
.ax-btn-p:hover{filter:brightness(1.07)}
.ax-btn-s{padding-right:20px;background:rgba(255,255,255,.04);border:1px solid rgba(233,222,255,.16)}
.ax-btn-s:hover{background:rgba(255,255,255,.08)}
.ax-seta{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.ax-seta svg{width:14px;height:14px}
.ax-btn-p:hover .ax-seta{transform:translateX(2px)}

/* ------------------------------------------------------------ endpoints */
.ax-rotas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:clamp(26px,3.4vw,40px)}
.ax-rota{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:13px 14px;border-radius:16px;min-width:0;
  background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid rgba(233,222,255,.1)}
.ax-rota::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--ax-cor,#a78bfa),transparent);opacity:.7}
.ax-rota code{font:500 11.5px/1.3 var(--ax-mono);color:#e9e2ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-rota code b{display:inline-block;min-width:38px;margin-right:6px;font-weight:700;color:var(--ax-cor,#38bdf8)}
.ax-rota span{font-size:12px;line-height:1.4;color:#a59cbb}
.ax-rota.get{--ax-cor:#38bdf8}.ax-rota.post{--ax-cor:#39ff88}

/* ------------------------------------------------------------ responsivo */
@media (max-width:1180px){.ax-c3{display:none}}
@media (max-width:980px){
  /* minmax(0,...): com 1fr puro, as linhas longas de codigo (white-space:pre)
     alargavam a coluna e o notebook passava da tela no celular */
  .ax-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .ax-palco,.ax-lado{min-width:0}
  .ax-palco{max-width:640px;width:100%;margin:0 auto}
  .ax-rotas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px),(hover:none){
  /* celular/toque: sem enfeite continuo e sem desfoque */
  .ax-aura,.ax-chip,.ax-btn-p::before,.ax-cursor{animation:none!important}
  .ax-chip{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(22,16,40,.94)}
}
@media (max-width:760px){
  .ax-head{text-align:center;margin-left:auto;margin-right:auto}
  .ax-head p{margin:0 auto}
  .ax-palco{padding:14px 0 18px;overflow-x:clip}
  .ax-lateral{display:none}
  .ax-tampa{padding:8px 8px 10px;border-radius:14px 14px 6px 6px}
  .ax-tela{aspect-ratio:auto;height:300px}
  .ax-url{display:none}
  .ax-codigo{font-size:10px;line-height:1.7;padding:8px 8px}
  .ax-l::before{width:14px;margin-right:8px}
  .ax-saida{font-size:9.8px;padding:2px 8px 6px}
  .ax-term{height:42%}
  /* so 2 cards flutuantes, parados, sem sair da tela */
  .ax-c2,.ax-c3{display:none}
  .ax-c1{left:2px;top:-4px}.ax-c4{right:2px;bottom:-2px}
  .ax-chip{padding:7px 11px 7px 7px;border-radius:13px}
  .ax-chip-ic{width:26px;height:26px;border-radius:9px}
  .ax-chip b{font-size:11.5px}.ax-chip small{font-size:9.5px}
  .ax-passo{padding:13px 13px 14px;grid-template-columns:34px minmax(0,1fr);gap:3px 11px;border-radius:16px}
  .ax-passo-ic{width:34px;height:34px;border-radius:10px}
  .ax-passo h3{font-size:14px}.ax-passo p{font-size:12.5px}
  .ax-acoes{justify-content:center}
  .ax-btn{height:46px}
  .ax-rotas{gap:8px}
  .ax-rota{padding:11px 11px;border-radius:14px}
  .ax-rota code{font-size:10.5px}.ax-rota code b{min-width:32px;margin-right:4px}
  .ax-rota span{font-size:11px}
}
@media (max-width:380px){.ax-tela{height:280px}.ax-codigo{font-size:9.4px}.ax-saida{font-size:9.2px}}

/* pausa: fora da tela (o JS marca) e movimento reduzido */
.ax.ax-pausa *,.ax.ax-pausa *::before,.ax.ax-pausa *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .ax *,.ax *::before,.ax *::after{animation:none!important;transition:none!important}
  .ax-l{opacity:1;transform:none}
}

/* luz que segue o mouse (o JS grava --mx/--my) */
@media (hover:hover){
  .ax-passo:hover{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(167,139,250,.12),transparent 62%),linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
  .ax-passo.on:hover{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(167,139,250,.16),transparent 62%),linear-gradient(165deg,rgba(167,139,250,.14),rgba(124,58,237,.05))}
  .ax-rota:hover{border-color:rgba(196,160,255,.26);background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(167,139,250,.1),transparent 62%),linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
}

/* a loja fixa todo <button> em 46px de altura: os passos sao <button> e
   cortavam o texto. Altura livre, sem o estilo de botao da loja. */
html body .ax .ax-passo{height:auto!important;min-height:0!important;line-height:normal!important;box-shadow:none;letter-spacing:normal;text-transform:none}

/* uma regra global da loja troca a fonte de todo <code> pela do sistema:
   aqui dentro o codigo tem de ser monoespacado */
html body .ax code,html body .ax .ax-l,html body .ax .ax-saida,html body .ax .ax-codigo{font-family:var(--ax-mono)!important}

/* celular: o card do saldo ficava em cima das abas do editor — sobe para
   acima da tampa, com espaco reservado no palco */
@media (max-width:760px){
  .ax-palco{padding-top:40px!important}
  .ax-c1{top:0!important;left:4px!important}
}