/* Identidade visual LinQ Telecom: azul-marinho #0F2A5F + laranja #F9A618 */
:root{
  --navy:#0f2a5f; --navy-2:#0a1f4a; --navy-3:#163a80; --orange:#f9a618; --orange-2:#e08e00;
  --bg:#f3f5f9; --surface:#ffffff; --surface2:#eef1f7; --line:#dbe1ec; --text:#0f1d3a; --muted:#56637c;
  --accent:#163a80; --accent-2:#0f2a5f; --accent-soft:#e3eaf8; --amber:#c27803; --red:#c2410c; --green:#15803d;
  --fiber-down:#2563eb; --fiber-up:#f9a618;
  --font:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#071634; --surface:#0d2148; --surface2:#132b5a; --line:#21396b; --text:#e9eef8; --muted:#9fb0cf;
  --accent:#f9a618; --accent-2:#ffb938; --accent-soft:#2a2a1a; --fiber-down:#60a5fa; --fiber-up:#f9a618;}}
:root[data-theme="dark"]{
  --bg:#071634; --surface:#0d2148; --surface2:#132b5a; --line:#21396b; --text:#e9eef8; --muted:#9fb0cf;
  --accent:#f9a618; --accent-2:#ffb938; --accent-soft:#2a2a1a; --fiber-down:#60a5fa; --fiber-up:#f9a618;}
body{font-family:var(--font)}
h1,h2,h3{letter-spacing:-.01em}
.eyebrow{color:var(--orange-2)}
:root[data-theme="dark"] .eyebrow{color:var(--orange)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .eyebrow{color:var(--orange)}}
/* barra lateral sempre na cor da marca */
.side{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);border-right:0;color:#fff}
.side .brand{padding:6px 8px 18px;flex-direction:column;align-items:flex-start;gap:4px}
.side .brand img{width:150px;height:auto}
.side .brand small{color:#b8c6e3;font-size:.78rem}
.side nav a{color:#dfe7f6}
.side nav a i{color:#8ea3cc}
.side nav a:hover{background:rgba(255,255,255,.08)}
.side nav a.on{background:rgba(249,166,24,.16);color:#fff;box-shadow:inset 3px 0 0 var(--orange)}
.side nav a.on i{color:var(--orange)}
.side .navlbl{color:#8ea3cc}
.side .btn.ghost{color:#fff;border-color:rgba(255,255,255,.25)}
.topbar{background:var(--navy);color:#fff;border:0}
.topbar img{height:26px}
.topbar .btn.ghost{color:#fff;border-color:rgba(255,255,255,.3)}
/* botões */
.btn{background:var(--navy);color:#fff}
.btn.line{background:var(--surface);color:var(--navy);border-color:var(--navy)}
:root[data-theme="dark"] .btn:not(.ghost):not(.line){background:var(--orange);color:var(--navy)!important}
:root[data-theme="dark"] .btn.line{color:var(--orange);border-color:var(--orange);background:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn:not(.ghost):not(.line){background:var(--orange);color:var(--navy)!important}
:root:not([data-theme="light"]) .btn.line{color:var(--orange);border-color:var(--orange);background:transparent}}
.chip.on,.seg button.on{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-theme="dark"] .chip.on,:root[data-theme="dark"] .seg button.on{background:var(--orange);color:var(--navy);border-color:var(--orange)}
.hero{background:radial-gradient(120% 140% at 100% 0%,#1d4ea3 0%,var(--navy) 55%,var(--navy-2) 100%);color:#fff;border:0}
.hero .muted{color:#c8d5ee}.hero .eyebrow{color:var(--orange)}
.hero .btn{background:var(--orange);color:var(--navy)}.hero .btn.line{background:transparent;color:#fff;border-color:#fff}.hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hero .art-l{fill:#fff}.hero .art-s{fill:#c8d5ee}
.tile .ic{background:var(--navy);color:var(--orange)}
.bar>i{background:var(--orange)}
.steps li::before{background:var(--navy)}
:root[data-theme="dark"] .steps li::before{background:var(--orange);color:var(--navy)}
.mod.on{border-color:var(--navy)}.mod.on .n{background:var(--navy)}
.tip{border-left-color:var(--navy)}
/* ===== banners ===== */
.bn{border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 30px rgba(15,42,95,.10)}
.bn-head{display:flex;align-items:center;gap:14px;padding:12px 18px;background:var(--navy);color:#fff}
.bn-head img{height:30px}
.bn-head .bn-cat{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.bn-head .bn-num{margin-left:auto;font-weight:800;font-size:.8rem;background:var(--orange);color:var(--navy);padding:3px 10px;border-radius:99px}
.bn-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;padding:18px;align-items:center;background:linear-gradient(180deg,var(--accent-soft),transparent)}
.bn-hero h2{font-size:1.6rem;margin:0 0 4px;font-weight:900}
.bn-hero .bn-sub{color:var(--muted);margin-bottom:10px;font-weight:600}
.bn-scene{background:#0b1f47;border-radius:14px;padding:6px;min-height:210px;display:flex;align-items:center}
.bn-scene svg{width:100%;height:auto;display:block}
.bn-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;padding:0 18px 18px}
.bn-box{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
.bn-box h4{margin:0 0 6px;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.bn-box ul,.bn-box ol{margin:0;padding-left:18px}.bn-box li{margin-bottom:4px;font-size:.92rem}
.bn-box.err{border-color:#fecaca;background:color-mix(in srgb,#ef4444 6%,var(--surface))}.bn-box.err h4{color:#dc2626}
.bn-box.tipb{border-color:var(--orange);background:color-mix(in srgb,var(--orange) 10%,var(--surface))}.bn-box.tipb h4{color:var(--orange-2)}
.bn-box table{width:100%;border-collapse:collapse;font-size:.9rem}.bn-box td{padding:4px 0;border-bottom:1px dashed var(--line)}.bn-box td:last-child{text-align:right;font-weight:800}
.bn-foot{display:flex;justify-content:space-between;padding:10px 18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.bminis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.bmini{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit;text-decoration:none}
.bmini:hover{border-color:var(--orange);transform:translateY(-1px)}
.bmini .bm-sc{background:#0b1f47;height:96px;display:flex;align-items:center;overflow:hidden}.bmini .bm-sc svg{width:100%;height:100%}
.bmini .bm-t{padding:8px 10px;font-size:.84rem;font-weight:700;line-height:1.25}.bmini .bm-n{color:var(--orange-2);font-size:.72rem;font-weight:800;display:block}
.bmodal{position:fixed;inset:0;background:rgba(5,14,35,.78);z-index:2500;display:flex;justify-content:center;align-items:flex-start;padding:24px;overflow:auto}
.bmodal[hidden]{display:none}
.bmodal .bn{max-width:1100px;width:100%}
.bmodal .bm-nav{position:fixed;top:14px;right:14px;display:flex;gap:6px;z-index:2600}
.bmodal .bm-nav button{background:var(--orange);color:var(--navy);border:0;font:800 1.1rem var(--font);width:42px;height:42px;border-radius:50%;cursor:pointer}
/* cena animada (dentro de fundo azul) */
.sc text{font-family:var(--font)}
.sc .t{fill:#e9eef8;font-size:12px;font-weight:700}.sc .s{fill:#9fb0cf;font-size:10px}
.sc .o{fill:var(--orange)} .sc .ostk{stroke:var(--orange)}
.flowd{stroke-dasharray:6 10;animation:flow 1.4s linear infinite}
.flowu{stroke-dasharray:6 10;animation:flow 1.4s linear infinite reverse}
.pulse-o{animation:pulseo 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulseo{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:1;transform:scale(1.05)}}
.fadein{animation:fadein .6s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}}
.grow{transform-box:fill-box;transform-origin:left;animation:grow 1.4s ease both}
@keyframes grow{from{transform:scaleX(0)}}
.draw{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 3.2s ease forwards infinite}
@keyframes draw{70%,100%{stroke-dashoffset:0}}
.cyc{animation:cyc 4s ease-in-out infinite}
@keyframes cyc{0%,20%{opacity:.25}30%,60%{opacity:1}70%,100%{opacity:.25}}
.bob{animation:bob 2.4s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-4px)}}
.slidex{animation:slidex 3s linear infinite}@keyframes slidex{from{transform:translateX(-30px)}to{transform:translateX(30px)}}
@media (prefers-reduced-motion:reduce){.flowd,.flowu,.pulse-o,.draw,.cyc,.bob,.slidex,.grow{animation:none;stroke-dashoffset:0}}
@media (max-width:860px){.bn-hero{grid-template-columns:1fr}}
/* troubleshooting */
.tsgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.tslist{display:flex;flex-direction:column;gap:6px}
.tslist button{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 12px;font:inherit;color:var(--text);cursor:pointer}
.tslist button.on{border-color:var(--navy);box-shadow:inset 4px 0 0 var(--orange)}
.tslist button b{display:block;font-size:.92rem}.tslist button small{color:var(--muted)}
.tool{display:inline-block;font-size:.72rem;font-weight:800;padding:2px 8px;border-radius:99px;margin-right:6px;color:#fff}
.tool.smartolt{background:#0f766e}.tool.ixc{background:#7c3aed}.tool.cliente{background:#2563eb}.tool.campo{background:#c2410c}.tool.noc{background:#be123c}
.tstep{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;background:var(--surface)}
.tstep.cur{border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 35%,transparent)}
.tstep.ok{opacity:.75}.tstep.bad{border-color:#fca5a5}
.tstep .tl{font-size:.75rem;color:var(--muted);font-weight:700}
@media (max-width:1000px){.tsgrid{grid-template-columns:1fr}}
.sc .art-l{fill:#e9eef8}.sc .art-s{fill:#9fb0cf}
.sc.paused *{animation-play-state:paused!important}
.bmini:hover .sc.paused *{animation-play-state:running!important}