/* tour-sigma.css — Tour do SIGMA WEB em formato de revista/manual técnico:
   páginas que "viram", telas em moldura de celular flutuante, narração por áudio. */
#tour-sigma { --az:#0070b8; --az9:#0a3a5c; --az1:#e1eff8; }
.ts-wrap { position:relative; }
.ts-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-bottom:16px; }
.ts-btn { border:none; border-radius:999px; padding:9px 18px; font-size:14px; font-weight:700; cursor:pointer; background:#0070b8; color:#fff; }
.ts-btn:hover { background:#005a94; }
.ts-btn.sec { background:#eef3f7; color:#0a3a5c; }
.ts-progress { font-size:13px; font-weight:700; color:#0a3a5c; }
.ts-dots { display:flex; gap:6px; }
.ts-dot { width:9px; height:9px; border-radius:50%; background:#cdd8e2; cursor:pointer; transition:.2s; }
.ts-dot.on { background:#0070b8; transform:scale(1.25); }

/* "livro" — perspectiva para o virar de página */
.ts-book { position:relative; perspective:2200px; }
.ts-spread { display:grid; grid-template-columns:1fr 1fr; min-height:520px; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 24px 60px rgba(10,40,60,.18); border:1px solid #e4ecf3; }
.ts-page { position:relative; padding:32px 30px; backface-visibility:hidden; }
.ts-page.left { background:linear-gradient(135deg,#fff, #f7fafd); border-right:1px solid #eef1f4; }
.ts-page.right { background:radial-gradient(120% 120% at 100% 0%, var(--pc,#0070b8)10, #fff 55%); display:flex; align-items:center; justify-content:center; }
.ts-spread.flipping { animation:tsflip .7s ease; transform-origin:left center; }
@keyframes tsflip { 0%{ transform:rotateY(0) } 45%{ transform:rotateY(-14deg) } 100%{ transform:rotateY(0) } }

.ts-kicker { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pc,#0070b8); }
.ts-badge { display:inline-block; margin-left:8px; border-radius:6px; padding:2px 8px; font-size:11px; font-weight:800; color:#fff; background:var(--pc,#0070b8); }
.ts-title { margin:8px 0 4px; font-size:26px; font-weight:900; color:#0a3a5c; line-height:1.15; }
.ts-func { font-size:13.5px; font-weight:700; color:var(--pc,#0070b8); margin-bottom:12px; }
.ts-text { font-size:15.5px; line-height:1.65; color:#3a444f; }
.ts-text b { color:#0a3a5c; }
.ts-list { margin:14px 0 0; padding-left:18px; }
.ts-list li { margin:6px 0; font-size:14.5px; color:#44515e; }
.ts-pageno { position:absolute; bottom:14px; left:30px; font-size:12px; color:#9aa6b2; font-weight:700; }

/* moldura de celular flutuante */
.ts-phone { width:270px; max-width:80%; border-radius:34px; background:#0f1f33; padding:12px; box-shadow:0 30px 60px rgba(10,40,60,.35);
  animation:tsfloat 4s ease-in-out infinite; }
@keyframes tsfloat { 0%,100%{ transform:translateY(0) rotate(-1deg) } 50%{ transform:translateY(-12px) rotate(1deg) } }
.ts-phone .scr { border-radius:24px; overflow:hidden; background:#f4f7fb; }
.ts-phone .bar { display:flex; align-items:center; gap:6px; padding:10px 12px; color:#fff; background:linear-gradient(135deg,var(--pc,#0070b8),var(--pc2,#0a3a5c)); font-size:12px; font-weight:800; }
.ts-phone .bar .dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); }
.ts-phone .body { padding:12px; min-height:360px; }
/* elementos de UI mock */
.mk-kpi { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mk-card { background:#fff; border:1px solid #e6edf4; border-radius:12px; padding:10px; }
.mk-card .v { font-size:18px; font-weight:900; color:var(--pc,#0070b8); font-family:"IBM Plex Mono",monospace; }
.mk-card .l { font-size:10px; color:#7a8597; font-weight:700; text-transform:uppercase; }
.mk-row { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #e6edf4; border-radius:10px; padding:9px 10px; margin-top:7px; }
.mk-row .tag { font-size:9px; font-weight:800; color:#fff; border-radius:5px; padding:2px 6px; }
.mk-row .txt { flex:1; }
.mk-row .txt b { font-size:12px; color:#20272e; display:block; }
.mk-row .txt span { font-size:10px; color:#8a94a0; }
.mk-bars { display:flex; align-items:flex-end; gap:6px; height:90px; padding:8px; background:#fff; border:1px solid #e6edf4; border-radius:12px; }
.mk-bars i { flex:1; background:var(--pc,#0070b8); border-radius:4px 4px 0 0; opacity:.85; }
.mk-chat { display:flex; flex-direction:column; gap:8px; }
.mk-chat .b { max-width:85%; padding:8px 11px; border-radius:12px; font-size:11.5px; line-height:1.4; }
.mk-chat .b.me { align-self:flex-end; background:var(--pc,#0070b8); color:#fff; }
.mk-chat .b.ia { align-self:flex-start; background:#fff; border:1px solid #e6edf4; color:#20272e; }
.mk-mic { margin:10px auto 0; width:54px; height:54px; border-radius:50%; background:var(--pc,#0070b8); display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; animation:tspulse 1.6s infinite; }
@keyframes tspulse { 0%,100%{ box-shadow:0 0 0 0 rgba(0,112,184,.4) } 50%{ box-shadow:0 0 0 12px rgba(0,112,184,0) } }
.mk-field { background:#fff; border:1px solid #e6edf4; border-radius:9px; padding:8px 10px; margin-top:7px; }
.mk-field .k { font-size:9px; color:#8a94a0; font-weight:700; text-transform:uppercase; }
.mk-field .val { font-size:12px; color:#20272e; font-weight:600; }

@media (max-width:820px){
  .ts-spread { grid-template-columns:1fr; }
  .ts-page.left { border-right:none; border-bottom:1px solid #eef1f4; }
}
[x-cloak]{display:none}