/* ============================================================
   SPIRAL VISION · design system v2 — "instrumento, não dashboard"
   preto profundo · grafite · dourado discreto · azul só em ativo
   ============================================================ */
:root{
  --void:#070605; --obsidian:#100E0B; --graphite:#1A1712; --hairline:#28221A;
  --gold:#C9A24C; --gold-deep:#8A6D2F; --bone:#E7E1D5; --ash:#8F887A; --ash-dim:#5E594E;
  --pulse:#3D7BFF; --ok:#4FA972; --watch:#D0A83C; --alert:#C65545;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void) radial-gradient(1200px 600px at 50% -10%,rgba(201,162,76,.05),transparent 60%);
  color:var(--bone);font:15px/1.6 var(--sans);
  padding:0 clamp(20px,4vw,64px) 80px;max-width:1240px;margin:auto;
  -webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--pulse);outline-offset:3px;border-radius:2px}

/* ---------- barra superior ---------- */
header{display:flex;align-items:baseline;gap:34px;padding:26px 0 18px;border-bottom:1px solid var(--hairline)}
.wordmark{font:15px var(--serif);letter-spacing:.42em;color:var(--gold);white-space:nowrap}
.wordmark b{font-weight:normal;color:var(--ash)}
nav{display:flex;gap:26px;flex:1}
nav a{color:var(--ash-dim);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:4px 0;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
nav a:hover{color:var(--ash)}
nav a.active{color:var(--pulse);border-bottom-color:var(--pulse)}
.meta{font:11px var(--mono);color:var(--ash-dim);white-space:nowrap}
.meta .live{color:var(--ok)}

/* ---------- entrada orquestrada ---------- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0)*90ms)}
@media (prefers-reduced-motion:reduce){.rise{animation:none}.gauge-value,.pulseline{animation:none!important}}

/* ---------- herói: o Medidor Espiral ---------- */
.hero{display:grid;grid-template-columns:300px 1fr 260px;gap:48px;align-items:center;padding:54px 0 44px;border-bottom:1px solid var(--hairline)}
.gauge{position:relative;width:280px;height:280px;justify-self:center}
.gauge svg{width:100%;height:100%;overflow:visible}
.gauge .track{stroke:var(--hairline);fill:none;stroke-width:2}
.gauge-value{stroke:var(--gold);fill:none;stroke-width:3.5;stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(201,162,76,.5));animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{filter:drop-shadow(0 0 5px rgba(201,162,76,.35))}50%{filter:drop-shadow(0 0 13px rgba(201,162,76,.7))}}
.gauge .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.gauge .n{font:200 74px/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gauge .of{font:12px var(--mono);color:var(--ash-dim);margin-top:2px}
.gauge .state{font:italic 15px var(--serif);margin-top:10px}
.state.green{color:var(--ok)}.state.yellow{color:var(--watch)}.state.red{color:var(--alert)}
.hero .middle .eyebrow, .eyebrow{font:11px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ash-dim)}
.hero .headline{font:300 25px/1.35 var(--serif);margin:14px 0 22px;max-width:26ch}
.confidence{display:flex;align-items:center;gap:12px;font:12px var(--mono);color:var(--ash)}
.confbar{width:150px;height:3px;background:var(--hairline);position:relative}
.confbar i{position:absolute;inset:0;right:auto;background:var(--gold-deep)}
.hero .pulsebox{justify-self:end;text-align:right}
.pulseline{stroke:var(--gold);fill:none;stroke-width:1.5;stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 2.2s .4s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pulsebox .cap{font:11px var(--mono);color:var(--ash-dim);margin-top:8px}

/* ---------- indicadores como linhas de registro ---------- */
section{padding:34px 0 8px}
h2.section{font:11px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:6px}
.rows{border-top:1px solid var(--hairline)}
.row{display:grid;grid-template-columns:220px 1fr 170px 46px;gap:20px;align-items:center;
  padding:20px 6px;border-bottom:1px solid var(--hairline);cursor:pointer;
  transition:background .3s}
.row:hover{background:linear-gradient(90deg,transparent,rgba(201,162,76,.045) 40%,transparent)}
.row .name{font:12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.row .spark{opacity:.85}
.row .reading{font:300 27px var(--mono);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.row .reading small{font-size:13px;color:var(--ash-dim)}
.dot{width:8px;height:8px;border-radius:50%;justify-self:center}
.dot.green{background:var(--ok);box-shadow:0 0 8px rgba(79,169,114,.5)}
.dot.yellow{background:var(--watch);box-shadow:0 0 8px rgba(208,168,60,.5)}
.dot.red{background:var(--alert);box-shadow:0 0 8px rgba(198,85,69,.5)}
.dot.none{background:var(--hairline);box-shadow:none}
.row .detail{grid-column:1/-1;display:none;font:13px/1.7 var(--sans);color:var(--ash);max-width:76ch;padding:2px 0 8px}
.row .detail code{font:12px var(--mono);color:var(--gold-deep)}
.row.open .detail{display:block}

/* ---------- assinaturas: radar + mapa temporal ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:38px 0;border-bottom:1px solid var(--hairline)}
.radar text{font:10px var(--sans);fill:var(--ash-dim);letter-spacing:.12em;text-transform:uppercase}
.radar .web{stroke:var(--hairline);fill:none}
.radar .shape{fill:rgba(201,162,76,.12);stroke:var(--gold);stroke-width:1.5}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,14px);gap:3px;margin-top:14px}
.heat i{width:14px;height:14px;background:var(--graphite);border-radius:2px}
.heat-cap{font:11px var(--mono);color:var(--ash-dim);margin-top:10px}

/* ---------- regime, percepção, pergunta ---------- */
.regime{padding:30px 0;border-bottom:1px solid var(--hairline);font:16px var(--serif);display:flex;gap:14px;align-items:center}
.regime .tick{width:3px;height:34px;background:var(--hairline)}
.regime.possible .tick{background:var(--watch)}
.perception{padding:40px 0;border-bottom:1px solid var(--hairline)}
.perception p{font:300 20px/1.75 var(--serif);max-width:66ch;margin-top:14px}
.question{padding:36px 0}
.question p{font:16px/1.6 var(--serif);max-width:60ch;margin:12px 0 18px}
.question button{background:transparent;border:1px solid var(--hairline);color:var(--ash);
  padding:9px 22px;margin-right:12px;letter-spacing:.06em;transition:all .25s}
.question button:hover{border-color:var(--pulse);color:var(--pulse)}
.ack{font:12px var(--mono);color:var(--ok)}

/* ---------- sinais / tabelas / blocos ---------- */
.signals p{font:14px/1.7 var(--sans);color:var(--ash);padding:8px 0;border-bottom:1px solid var(--hairline)}
.signals em{color:var(--gold-deep);font-style:normal;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-right:8px}
table{width:100%;border-collapse:collapse;font:13px var(--sans)}
td,th{padding:12px 10px;border-bottom:1px solid var(--hairline);text-align:left}
th{color:var(--ash-dim);font-weight:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
td{font-variant-numeric:tabular-nums}
.delta-up{color:var(--alert)}.delta-down{color:var(--ok)}.delta-flat{color:var(--ash-dim)}
.kv{display:grid;grid-template-columns:240px 1fr;gap:10px 20px;font:13.5px var(--sans);padding-top:8px}
.kv .k{color:var(--ash-dim)}
.kv div:not(.k){font-family:var(--mono);font-size:12.5px}
.prose{max-width:74ch}
.prose p{margin:10px 0;font:14.5px/1.75 var(--sans);color:var(--bone)}
.prose h3{font:11px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);margin:26px 0 6px}
.note{font:12.5px var(--sans);color:var(--ash-dim);margin-top:14px;max-width:70ch}

/* ---------- estados: loading / vazio / erro ---------- */
.loading{display:flex;flex-direction:column;align-items:center;gap:18px;padding:120px 0;color:var(--ash-dim);font:12px var(--mono);letter-spacing:.2em;text-transform:uppercase}
.spinner{width:44px;height:44px;animation:spin 1.8s linear infinite}
.spinner path{stroke:var(--gold);fill:none;stroke-width:2.5;stroke-linecap:round}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:100px 0;text-align:center}
.empty .big{font:300 24px var(--serif);margin-bottom:12px}
.empty p{color:var(--ash);max-width:52ch;margin:auto}
.empty code{font:13px var(--mono);color:var(--gold)}
.broken{margin:60px 0;padding:28px;border-left:3px solid var(--alert);background:linear-gradient(90deg,rgba(198,85,69,.08),transparent)}
.broken strong{color:var(--alert);letter-spacing:.06em}
.broken p{color:var(--ash);margin-top:8px;font-size:14px}

footer{color:var(--ash-dim);font:11px var(--mono);margin-top:60px;text-align:center;letter-spacing:.08em}

/* ---------- responsivo: tablet → notebook → ultrawide → TV ---------- */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;gap:26px;justify-items:center;text-align:center}
  .hero .headline{max-width:34ch}.hero .pulsebox{justify-self:center;text-align:center}
  .duo{grid-template-columns:1fr;gap:40px}
  .row{grid-template-columns:150px 1fr 120px 30px;gap:10px}
  .row .reading{font-size:21px}
}
@media (max-width:600px){
  .row{grid-template-columns:1fr auto 24px}
  .row .spark{display:none}
  nav{flex-wrap:wrap;gap:14px}
  .gauge{width:220px;height:220px}.gauge .n{font-size:56px}
}
@media (min-width:1700px){body{max-width:1480px;font-size:16px}.gauge{width:330px;height:330px}}

/* ---------- impressão = PDF ---------- */
@media print{
  body{background:#fff;color:#111;max-width:100%;padding:8mm;font-size:11.5px}
  nav,.question,footer,button,.spinner{display:none!important}
  header,.hero,.rows .row,.regime,.perception,.duo{border-color:#ccc}
  .wordmark,.gauge .n,.prose h3{color:#6b5313}
  .row .name,.meta,.eyebrow,.row .detail{color:#555}
  .row{break-inside:avoid}.row .detail{display:block}
  .gauge-value{filter:none;animation:none}.pulseline{animation:none;stroke-dashoffset:0}
  svg polyline,svg path{stroke:#6b5313}
  .heat i{border:1px solid #ddd}
}

/* ============ POLISH V1.0 (Millenium) — só confiança, zero função ============ */
/* P0/P1 · bloco de fonte dos dados */
.source-block{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  padding:14px 18px;margin:0 0 26px;border:1px solid var(--hair);border-radius:3px;
  background:linear-gradient(90deg,rgba(201,162,76,.03),transparent);font:11px var(--mono)}
.source-block .grp{display:flex;flex-direction:column;gap:3px}
.source-block .lbl{color:var(--ash-dim);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.source-block .val{color:var(--bone);font-size:12px}
.source-block .val.ok{color:var(--ok)}
.source-block .val.demo{color:var(--watch)}
.source-block .live-dot{color:var(--ok)}

/* P4 · tooltips: o ponto de interrogação e o balão */
.help{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  border:1px solid var(--ash-dim);border-radius:50%;color:var(--ash-dim);font:9px var(--sans);
  margin-left:8px;cursor:help;position:relative;vertical-align:middle}
.help:hover{border-color:var(--gold);color:var(--gold)}
.help .tip{display:none;position:absolute;bottom:150%;left:50%;transform:translateX(-50%);
  width:210px;padding:9px 12px;background:#17130d;border:1px solid var(--hair);border-radius:4px;
  color:var(--ash);font:11px/1.5 var(--sans);letter-spacing:0;text-transform:none;z-index:10;
  box-shadow:0 8px 24px rgba(0,0,0,.6)}
.help:hover .tip{display:block}

/* P5 · health */
.health-grid{display:grid;grid-template-columns:200px 1fr;gap:12px 22px;font:13px var(--sans);padding-top:8px}
.health-grid .k{color:var(--ash-dim)}
.health-grid .v{font-family:var(--mono);font-size:12.5px;color:var(--bone)}
.health-grid .v.ok{color:var(--ok)}

/* P3 · rodapé enterprise */
.foot-ent{margin-top:56px;padding-top:20px;border-top:1px solid var(--hair);text-align:center;
  font:10px var(--mono);color:var(--ash-dim);letter-spacing:.1em;line-height:2}
.foot-ent b{color:var(--ash);font-weight:normal}

/* P7 · impressão: cabeçalho com marca + timestamp */
.print-head{display:none}
@media print{
  .print-head{display:block;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #ccc}
  .print-head .brand{font:14px Georgia,serif;color:#6b5313;letter-spacing:.3em}
  .print-head .meta{font:9px monospace;color:#666;margin-top:3px}
  .source-block,.help{display:none!important}
}