:root{
  --ink:#0d1b1e; --muted:#5a6870; --teal:#287e8f; --teal-d:#1f6474;
  --line:#e3e8ea; --bg:#fff; --soft:#f7fafb; --green:#10b981; --amber:#b45309;
  --side:282px;
  --body-fg:#22383e; --p-fg:#4d5f68; --table-alt:#fbfdfd;
  --topbar-bg:#fff; --btn-bg:#fff; --dot-bg:#c2d2d7; --warn-bg:#fffbeb;
  --pill-bg:#e0f2f1; --pill-fg:#0a6b5e; --code-bg:#eef3f4; --code-fg:#22383e;
  --grp-fg:#8496a0;
}
html[data-theme="dark"]{
  --bg:#0b1416; --ink:#e8f0f2; --muted:#9bb0b8; --line:#203036; --soft:#0f1b1f;
  --teal:#4fb3c4; --teal-d:#7fcbd8; --green:#34d399; --amber:#d99a3c;
  --body-fg:#dbe7ea; --p-fg:#b3c6cd; --table-alt:#0f1b1f;
  --topbar-bg:#0e1a1e; --btn-bg:#152227; --dot-bg:#2a3f46; --warn-bg:#241c10;
  --pill-bg:#123a34; --pill-fg:#5fd3bd; --code-bg:#152227; --code-fg:#cfe3ea;
  --grp-fg:#7d939c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--body-fg);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.68;-webkit-font-smoothing:antialiased}

/* ── shell: block, não flex ─────────────────────────────────────── */
.shell{min-height:100vh}
.topbar{display:none;position:fixed;top:0;left:0;right:0;height:58px;z-index:60;
  background:var(--topbar-bg);border-bottom:1px solid var(--line);
  align-items:center;justify-content:space-between;padding:0 16px}
.topbar img{display:block}
.topbar .logo-light{display:none}
html[data-theme="dark"] .topbar .logo-dark{display:none}
html[data-theme="dark"] .topbar .logo-light{display:block}
.burger{background:none;border:0;cursor:pointer;color:var(--ink);display:none;padding:6px;align-items:center}
.burger:hover{color:var(--teal)}

aside{position:fixed;top:0;bottom:0;left:0;width:var(--side);z-index:50;
  background:var(--soft);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow-y:auto;padding:22px 0}
aside::-webkit-scrollbar{width:7px}
aside::-webkit-scrollbar-thumb{background:var(--dot-bg);border-radius:4px}

.side-brand{display:flex;align-items:center;gap:10px;padding:0 18px 18px}
.side-brand a{display:block;line-height:0}
.side-brand img{display:block;max-width:120px}
.side-brand .logo-light{display:none}
html[data-theme="dark"] .side-brand .logo-dark{display:none}
html[data-theme="dark"] .side-brand .logo-light{display:block}
.side-brand .txt{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3}
.side-brand .txt small{display:block;font-size:10.5px;font-weight:400;color:var(--muted)}
.theme-btn{margin-left:auto;width:32px;height:32px;flex:0 0 32px;border-radius:7px;
  border:1px solid var(--line);background:var(--btn-bg);color:var(--muted);
  cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;
  transition:color .15s,border-color .15s}
.theme-btn:hover{color:var(--teal);border-color:var(--teal)}
.icon{display:block;flex:0 0 auto}

.side-nav{flex:1;padding:0 12px}
.grp{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--grp-fg);
  font-weight:700;padding:16px 8px 6px}
.side-nav a{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;
  color:var(--body-fg);text-decoration:none;font-size:13px;font-weight:500}
.side-nav a:hover{background:rgba(40,126,143,.09);color:var(--teal)}
.side-nav a.on{background:var(--teal);color:#fff;font-weight:600}
.dot{width:5px;height:5px;border-radius:50%;background:var(--dot-bg);flex:0 0 5px}
.side-nav a.on .dot{background:#fff}
.pill{margin-left:auto;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:9px;
  background:var(--pill-bg);color:var(--pill-fg)}
.side-nav a.on .pill{background:rgba(255,255,255,.22);color:#fff}
.side-foot{padding:16px 18px 0;border-top:1px solid var(--line);font-size:12px;
  color:var(--muted)}
.side-foot a{color:var(--teal);text-decoration:none}

/* ── conteúdo ───────────────────────────────────────────────────── */
main{margin-left:var(--side);min-height:100vh}
.wrap{max-width:900px;margin:0 auto;padding:48px 30px 90px}

h1{font-size:36px;letter-spacing:-.028em;line-height:1.16;margin:0 0 14px;
  color:var(--ink);font-weight:700}
h2{font-size:23px;letter-spacing:-.018em;margin:48px 0 14px;padding-top:16px;
  border-top:1px solid var(--line);color:var(--ink);font-weight:650}
h3{font-size:17.5px;margin:30px 0 10px;color:var(--ink);font-weight:650}
h2[id],h3[id],details[id]{scroll-margin-top:96px}
p{margin:0 0 15px;color:var(--p-fg);max-width:72ch}
li{color:var(--body-fg)}
strong{color:var(--ink)}
a{color:var(--teal)}
.lead{font-size:17px;color:var(--muted);margin-bottom:26px;max-width:700px}
.lim{font-size:12.5px;color:var(--muted)}
.tight{margin:8px 0 0;padding-left:20px}
.tight li{margin-bottom:7px}

code{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12.6px;
  background:var(--code-bg);color:var(--code-fg);padding:2px 6px;border-radius:4px}
pre{background:var(--code-bg);color:var(--code-fg);padding:15px 17px;border-radius:8px;
  overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:12.8px;line-height:1.55}
pre code{background:none;padding:0}

.tw{overflow-x:auto;margin:18px 0 22px}
table{width:100%;border-collapse:collapse;font-size:13.8px}
th{text-align:left;padding:10px 12px;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);background:var(--soft);font-weight:700}
td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;background:transparent}
tr:hover td{background:var(--table-alt)}
td.k{font-family:'JetBrains Mono',monospace;white-space:nowrap;font-weight:500}

.note{background:#eff9f6;border-left:4px solid var(--green);border-radius:0 8px 8px 0;
  padding:16px 20px;margin:22px 0;font-size:14px;color:var(--body-fg)}
.note.warn{background:var(--warn-bg);border-left-color:var(--amber)}
html[data-theme="dark"] .note{background:#10231f}
html[data-theme="dark"] .note.warn{background:var(--warn-bg)}

/* ── exemplos ───────────────────────────────────────────────────── */
details{background:var(--bg);border:1px solid var(--line);border-radius:9px;
  margin:12px 0;overflow:hidden}
summary{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;
  background:var(--soft);list-style:none;flex-wrap:wrap}
summary::-webkit-details-marker{display:none}
summary h3{margin:0;font-size:15px;flex:1;min-width:200px}
.num{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;
  background:var(--code-bg);color:var(--muted);padding:3px 8px;border-radius:5px}
.tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:var(--pill-bg);color:var(--pill-fg);padding:3px 9px;border-radius:10px}
.chev{color:var(--muted);font-size:16px;transition:transform .18s}
details[open] .chev{transform:rotate(90deg)}
.body{padding:16px;border-top:1px solid var(--line)}

/* ── formulário ─────────────────────────────────────────────────── */
.form-box{border:1px solid var(--line);border-radius:10px;padding:22px;
  background:var(--soft);margin:22px 0}
.form-box label{display:block;font-weight:600;font-size:13px;color:var(--ink);
  margin-bottom:6px}
.form-box input,.form-box select{width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:7px;font:inherit;font-size:14px;background:var(--code-bg);
  color:var(--ink);margin-bottom:16px}
.form-box input:focus,.form-box select:focus{outline:2px solid var(--teal);outline-offset:1px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-box button{background:var(--teal);color:#fff;border:0;border-radius:7px;
  padding:12px 22px;font:inherit;font-weight:600;font-size:14.5px;cursor:pointer}
.form-box button:hover{background:var(--teal-d)}
#campo_oem{display:none}

footer{margin-top:60px;padding-top:22px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted)}
footer a{color:var(--teal);text-decoration:none}

/* ── responsivo ─────────────────────────────────────────────────── */
@media(max-width:980px){
  .topbar{display:flex}
  .burger{display:block}
  aside{transform:translateX(-100%);transition:transform .25s;width:290px}
  aside.open{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.35)}
  main{margin-left:0;padding-top:58px}
  .wrap{padding:32px 18px 80px}
  h1{font-size:28px}
  h2{font-size:20px}
}
@media(max-width:620px){
  .form-row{grid-template-columns:1fr}
  table{font-size:12.4px}
  th,td{padding:9px 8px}
  summary{padding:12px 13px}
  summary h3{font-size:14px;min-width:0;flex-basis:100%;order:-1}
}

/* ── blocos de exemplo: botões, saída e realce de código ─────────────── */
.dl,.cbl{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:8px;
  font-size:13px;font-weight:600;line-height:1.2;
  text-decoration:none;white-space:nowrap;
  margin:14px 8px 4px 0;transition:background .15s,border-color .15s,transform .1s;
}
.dl{
  background:var(--teal);color:#fff;border:1.5px solid var(--teal);
}
.dl:hover{background:var(--teal-d);border-color:var(--teal-d)}
.dl:active,.cbl:active{transform:translateY(1px)}
.cbl{
  background:transparent;color:var(--teal);border:1.5px solid var(--teal);
}
.cbl:hover{background:var(--pill-bg)}
html[data-theme="dark"] .dl{background:var(--teal);color:#06171b}
html[data-theme="dark"] .dl:hover{background:var(--teal-d)}
html[data-theme="dark"] .cbl{color:var(--teal);border-color:var(--teal)}
html[data-theme="dark"] .cbl:hover{background:rgba(79,179,196,.14)}

/* bloco de leitura / conclusão */
.bloco{
  background:var(--soft);border:1px solid var(--line);border-radius:9px;
  padding:14px 16px;margin:16px 0;
}
.bloco-tit{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;
}
.leitura p{margin:0;color:var(--body-fg);font-size:14px}

/* saída de código / terminal */
.saida{
  background:var(--code-bg);color:var(--code-fg);
  border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;margin:14px 0;overflow-x:auto;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:12.6px;line-height:1.62;white-space:pre;
}
.saida code{background:none;padding:0;color:inherit;font-size:inherit}

/* realce inline dentro dos exemplos */
.c{color:var(--muted);font-style:italic}      /* comentário */
.s{color:#b45309}                             /* string */
.n{color:#7c3aed}                             /* número */
html[data-theme="dark"] .s{color:#e9c46a}
html[data-theme="dark"] .n{color:#c9a6ff}
.k{color:var(--teal);font-weight:600}         /* keyword */

/* responsivo: botões empilham */
@media(max-width:620px){
  .dl,.cbl{display:flex;width:100%;justify-content:center;margin:9px 0}
}

/* ── tabela de preços: fonte reduzida para caber em 3-4 colunas ──── */
table{font-size:12.9px}
th{font-size:10px;padding:9px 10px}
td{padding:9px 10px}
td.k{font-size:12.4px}
.tw table td:first-child{min-width:150px}

/* ── botão de recolher o menu ────────────────────────────────────── */
.collapse-btn{
  margin:8px 12px 12px;padding:0;height:30px;border:1px solid var(--line);
  border-radius:6px;background:var(--btn-bg);color:var(--muted);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:color .15s,border-color .15s,background .15s;
}
.collapse-btn:hover{color:var(--teal);border-color:var(--teal);background:var(--bg)}

/* estado recolhido: só ícones, largura mínima */
body.nav-collapsed{--side:56px}
body.nav-collapsed .side-brand .txt,
body.nav-collapsed .side-nav .grp,
body.nav-collapsed .side-nav a > .lbl,
body.nav-collapsed .side-foot,
body.nav-collapsed .side-brand .theme-btn{display:none}
body.nav-collapsed .side-brand{justify-content:center;padding:0 8px 18px}
body.nav-collapsed .side-nav{padding:0 6px}
body.nav-collapsed .side-nav a{justify-content:center;padding:10px 0;gap:0;font-size:0}
body.nav-collapsed .side-nav a .dot{width:8px;height:8px;flex:0 0 8px}
body.nav-collapsed .side-nav a .pill{display:none}
/* tooltip nativo com o rótulo, já que o texto some */
body.nav-collapsed .side-nav a::after{content:none}
body.nav-collapsed .collapse-btn{margin:8px 6px 12px}
body.nav-collapsed #themeBtn{margin:10px auto 0;display:inline-flex;width:26px;height:26px}
body.nav-collapsed .side-brand{flex-direction:column;gap:10px;padding:0 8px 14px}

@media(max-width:980px){
  .collapse-btn{display:none}
  body.nav-collapsed{--side:282px}
}

/* ── calculadora de ROI ─────────────────────────────────────────────── */
[data-roi]{margin:28px 0}
.roi{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--soft)}
.roi-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.roi-kicker{display:block;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.roi-head h4{margin:0;font-size:15.5px;font-weight:650;color:var(--ink)}
.roi-verdict{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;
  padding:6px 12px;border-radius:20px;white-space:nowrap}
.roi-verdict.is-good{background:#d1fae5;color:#065f46}
.roi-verdict.is-ok{background:#dbeafe;color:#1e40af}
.roi-verdict.is-weak{background:#fee2e2;color:#991b1b}
html[data-theme="dark"] .roi-verdict.is-good{background:#064e3b;color:#6ee7b7}
html[data-theme="dark"] .roi-verdict.is-ok{background:#1e3a8a;color:#bfdbfe}
html[data-theme="dark"] .roi-verdict.is-weak{background:#7f1d1d;color:#fecaca}

.roi-body{display:grid;grid-template-columns:1fr 260px;gap:0}
.roi-inputs{padding:18px 22px;border-right:1px solid var(--line)}
.roi-field{margin-bottom:16px}
.roi-field:last-child{margin-bottom:0}
.roi-field label{display:block;font-size:12.6px;font-weight:500;color:var(--body-fg);
  margin-bottom:7px;line-height:1.4}
.roi-input-wrap{display:flex;align-items:stretch;gap:0}
.roi-input-wrap input{flex:1;padding:8px 10px;border:1px solid var(--line);
  border-radius:6px 0 0 6px;font:inherit;font-size:13.5px;background:var(--code-bg);
  color:var(--ink);font-family:'JetBrains Mono',monospace;min-width:0}
.roi-suffix{display:flex;align-items:center;padding:0 10px;border:1px solid var(--line);
  border-left:0;border-radius:0 6px 6px 0;background:var(--soft);
  font-size:11.5px;color:var(--muted);white-space:nowrap}
.roi-input-wrap input:focus{outline:2px solid var(--teal);outline-offset:-1px}
.roi-range{width:100%;margin-top:8px;height:4px;accent-color:var(--teal);cursor:pointer}

.roi-results{padding:18px 22px;display:flex;flex-direction:column;gap:10px;
  background:var(--bg)}
.roi-big{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:600;
  color:var(--ink);line-height:1.1}
.roi-big small{display:block;font-family:Montserrat,sans-serif;font-size:11px;
  font-weight:500;color:var(--muted);margin-top:4px;text-transform:uppercase;
  letter-spacing:.06em}
.roi-row{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;color:var(--muted);padding:3px 0}
.roi-row b{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink);
  font-weight:600}
.roi-break{padding-top:8px;border-top:1px solid var(--line)}
.roi-bar{height:7px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:8px}
.roi-bar-fill{height:100%;width:0;border-radius:4px;transition:width .25s,background .25s}
.roi-bar-fill[data-tone="good"]{background:var(--green)}
.roi-bar-fill[data-tone="ok"]{background:var(--teal)}
.roi-bar-fill[data-tone="weak"]{background:#dc2626}
.roi-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);
  font-family:'JetBrains Mono',monospace;margin-top:4px}
.roi-note{font-size:11.5px;color:var(--muted);margin:0;padding:12px 22px 16px;
  line-height:1.55;border-top:1px solid var(--line)}
@media(max-width:820px){
  .roi-body{grid-template-columns:1fr}
  .roi-inputs{border-right:0;border-bottom:1px solid var(--line)}
  .roi-big{font-size:22px}
}

/* link de voltar com ícone */
.side-foot a{display:inline-flex;align-items:center;gap:5px}
.side-foot a .icon{opacity:.7}

/* ── monograma W ────────────────────────────────────────────────────── */
.side-brand .brand-full{display:block;line-height:0;flex:0 0 auto}
.side-brand .brand-full img{display:block;max-width:120px}
.side-brand .mark{display:none;line-height:0;flex:0 0 auto}
.side-brand .mark img{display:block;width:30px;height:30px}
/* recolhido: troca a logo completa pelo monograma W */
body.nav-collapsed .side-brand .brand-full{display:none}
body.nav-collapsed .side-brand .mark{display:block}
.mark-light{display:none}
html[data-theme="dark"] .mark-dark{display:none}
html[data-theme="dark"] .mark-light{display:block}
.topbar .mark img{height:26px;width:26px}
body.nav-collapsed .side-brand .mark img{width:26px;height:26px}

/* ── botões com ícone: garantir visibilidade ─────────────────────────── */
.theme-btn svg,.collapse-btn svg,.burger svg{display:block;pointer-events:none}
.theme-btn{display:inline-flex!important;align-items:center;justify-content:center}
.collapse-btn{display:inline-flex!important;align-items:center;justify-content:center}
.burger{display:none}
@media(max-width:980px){.burger{display:inline-flex!important;align-items:center;justify-content:center}}
.side-foot a svg{display:inline-block;vertical-align:-2px;margin-right:4px}

/* ── diagramas de arquitetura ───────────────────────────────────────── */
.fig{margin:28px 0;padding:0;border:1px solid var(--line);border-radius:12px;
  background:var(--soft);overflow:hidden}
.fig-inner{padding:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fig figcaption{padding:10px 16px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);background:var(--bg)}

.diag{width:100%;height:auto;display:block;color:var(--ink);
  min-width:560px}  /* rola no celular em vez de esmagar */
.diag text{font-family:Montserrat,sans-serif}
.dt{font-size:12.5px;font-weight:650;fill:var(--ink);text-anchor:middle}
.ds{font-size:10.5px;fill:var(--muted);text-anchor:middle}
.dn{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;
  fill:var(--ink);text-anchor:middle}
.dn2{font-family:'JetBrains Mono',monospace;font-size:12px;fill:var(--teal);
  text-anchor:middle}

/* caixas */
.dbox rect{stroke-width:1.5;fill:var(--bg);
  transition:fill .18s ease,stroke-width .18s ease}
.dbox:hover rect{stroke-width:2.2}
.d-core rect{stroke:var(--teal)}
.d-app rect{stroke:#7c3aed}
.d-sec rect{stroke:var(--amber)}
.d-muted rect{stroke:var(--line)}
html[data-theme="dark"] .d-app rect{stroke:#a78bfa}

/* setas — animadas no fluxo */
.darr{stroke:currentColor;stroke-width:1.4;opacity:.45;marker-end:url(#ar);
  stroke-dasharray:5 4}
@keyframes flow{to{stroke-dashoffset:-18}}
.anim .darr{animation:flow 1.1s linear infinite}

/* eixo e limiar */
.daxis{stroke:var(--line);stroke-width:1.5}
.dlim{stroke:var(--teal);stroke-width:1.6;stroke-dasharray:5 4;
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* retornados: entram em sequência */
.dret rect,.dret{fill:var(--teal);stroke:none}
text.dn{fill:#fff}
@keyframes pop{0%{opacity:0;transform:translateY(6px) scale(.92)}
  100%{opacity:1;transform:translateY(0) scale(1)}}
.anim .dret{animation:pop .42s cubic-bezier(.34,1.4,.64,1) backwards}
.anim .dret:nth-of-type(1){animation-delay:.05s}
.anim .dret:nth-of-type(2){animation-delay:.12s}
.anim .dret:nth-of-type(3){animation-delay:.19s}
.anim .dret:nth-of-type(4){animation-delay:.26s}

/* excluídos: aparecem depois, como prova */
.dex,.dex rect{fill:none;stroke:var(--line);stroke-width:1.4;stroke-dasharray:4 3}
@keyframes fade{from{opacity:0}to{opacity:1}}
.anim .dex{animation:fade .5s ease backwards;animation-delay:.5s}

/* WORM */
.dworm{fill:var(--bg);stroke:var(--teal);stroke-width:1.4;
  transition:fill .18s}
.anim .dworm{animation:pop .38s cubic-bezier(.34,1.4,.64,1) backwards}
.dworm:nth-of-type(1){animation-delay:.05s}
.dworm:nth-of-type(2){animation-delay:.13s}
.dworm:nth-of-type(3){animation-delay:.21s}
.dworm:nth-of-type(4){animation-delay:.29s}
.dworm:nth-of-type(5){animation-delay:.37s}
.dworm:nth-of-type(6){animation-delay:.45s}
.dgone{fill:none;stroke:var(--amber);stroke-dasharray:5 4;
  animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.4}50%{opacity:1}}
.dbreak{fill:none;stroke:var(--amber);stroke-width:1.4}

/* camadas da stack */
.dlayer{fill:var(--bg);stroke:var(--line);stroke-width:1.3;
  transition:stroke .18s,fill .18s}
.dlayer:hover{stroke:var(--teal)}
.dpkg{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:4 3}
.dtop{fill:var(--teal);opacity:.14;stroke:var(--teal);stroke-width:1.3}
.dout{fill:none;stroke:var(--teal);stroke-width:1.2;stroke-dasharray:4 3}

/* respeita quem pediu menos movimento */
@media(prefers-reduced-motion:reduce){
  .anim .darr,.anim .dret,.anim .dex,.anim .dworm,.dlim,.dgone{
    animation:none!important}
}

/* responsivo */
@media(max-width:700px){
  .fig-inner{padding:10px}
  .diag{min-width:520px}
}