:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #16202a;
  --muted: #5b6875;
  --line: #dde3e9;
  --brand: #0f2a3d;
  --accent: #e5484d;
  --accent-soft: rgba(229, 72, 77, .14);
  --blue: #0b6bcb;
  --warn-bg: #fff6e5;
  --warn-line: #f0b429;
  --radius: 14px;
  --topo: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e141a; --surface: #17202a; --text: #e8edf2; --muted: #9aa8b5; --line: #2a3644;
    --brand: #0b1f2e; --accent-soft: rgba(229, 72, 77, .22); --blue: #5aa9ff; --warn-bg: #2b2412; --warn-line: #a47b1c;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.ico { width: 22px; height: 22px; flex: none; }
#app { min-height: 100%; display: flex; flex-direction: column; }

/* Topo */
.topo {
  position: sticky; top: 0; z-index: 20;
  height: calc(var(--topo) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 8px 0;
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 4px;
  background: var(--brand); color: #fff;
}
.topo h1 { margin: 0; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo { display: grid; place-items: center; }
.btn-icone { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: 10px; }
.btn-icone:active { background: rgba(255,255,255,.12); }

/* Início */
.inicio { padding: 16px; max-width: 720px; width: 100%; margin: 0 auto; }
.intro { color: var(--muted); margin: 4px 0 16px; }
.inicio h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 28px 0 10px; }
.destaque, .card {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center;
  padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.destaque { background: var(--brand); color: #fff; border: 0; }
.destaque p, .card p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.destaque p { color: rgba(255,255,255,.75); }
.destaque-ico, .card-ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.destaque-ico { background: rgba(255,255,255,.12); color: #fff; }
.seta { opacity: .6; display: grid; }
.abas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.aba {
  display: flex; gap: 6px; align-items: center; flex: none;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
}
.aba .ico { width: 18px; height: 18px; }
.aba.ativa { background: var(--text); color: var(--bg); border-color: var(--text); }
.lista { display: grid; gap: 10px; margin-top: 12px; }
.em-breve { opacity: .6; }
.em-breve .card-ico { background: var(--line); color: var(--muted); }
.selo { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--muted); }

/* Tela 1: 3D */
.tela-3d { position: relative; flex: 1; display: flex; flex-direction: column; }
.palco-3d { position: relative; flex: 1; min-height: 60vh; overflow: hidden; touch-action: none;
  background: radial-gradient(ellipse at 50% 40%, var(--surface), var(--bg)); }
.palco-3d canvas { display: block; }
.carregando { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.dica, .aviso-modelo { margin: 0; padding: 8px 16px; font-size: 13px; color: var(--muted); text-align: center; }
.aviso-modelo { padding-top: 0; padding-bottom: calc(10px + var(--safe-b)); font-size: 12px; }
.marcadores { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.marcadores.visivel { opacity: 1; }
.marcadores.visivel .marcador { pointer-events: auto; }
.marcador {
  position: absolute; left: 0; top: 0; border: 0; background: none; padding: 0;
  width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center;
}
.marcador .anel { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--accent); background: rgba(255,255,255,.55); box-shadow: 0 0 0 4px var(--accent-soft); }
.marcador.principal .anel { width: 32px; height: 32px; animation: pulso 1.8s infinite; }
.marcador .rot { position: absolute; top: 40px; font-size: 12px; font-weight: 600; background: var(--surface); padding: 1px 6px; border-radius: 6px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
@keyframes pulso { 0%,100% { box-shadow: 0 0 0 3px var(--accent-soft); } 50% { box-shadow: 0 0 0 10px transparent; } }

/* Tela 2/3: vista lateral */
.tela-elemento { position: relative; flex: 1; display: flex; flex-direction: column; }
.viewer {
  position: relative; flex: 1; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background: #fff; min-height: 300px;
}
.v2d-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; transition: opacity .8s; will-change: transform; }
.v2d-img { display: block; }
.v2d-hotspots { position: absolute; inset: 0; pointer-events: none; }
.hotspot {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 0; padding: 0; background: none;
  transition: opacity .25s;
}
.hotspot::before {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  border: 2.5px solid var(--accent); background: rgba(229,72,77,.08);
  box-shadow: 0 0 0 3px rgba(255,255,255,.8);
}
.zoom-baixo .hotspot::before { inset: 13px; border-width: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
.hotspot.ativo::before { inset: 4px; border-width: 3.5px; background: none; box-shadow: 0 0 0 6px var(--accent-soft); }
.hotspot.oculto { opacity: 0; pointer-events: none; }
.btn-3d {
  height: 36px; padding: 0 14px; margin-right: 4px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.6);
  background: none; color: #fff; font-weight: 700; letter-spacing: .04em;
}
.btn-3d[aria-pressed="true"] { background: #fff; color: var(--brand); }
.legenda { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 8px 12px calc(8px + var(--safe-b)); font-size: 12.5px; color: var(--muted); background: var(--surface); border-top: 1px solid var(--line); }
.hs-demo { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); vertical-align: -1px; }

.v3d-canvas { position: absolute; inset: 0; display: none; }
.modo-3d .v3d-canvas { display: block; }
.modo-3d .v2d-hotspots { display: none; }
.modo-3d .v2d-stage { mix-blend-mode: multiply; }

/* Painel inferior */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: 52vh; max-height: calc(100% - var(--topo) - 20px);
  background: var(--surface); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.18);
  transform: translateY(105%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
}
.sheet.aberto { transform: none; }
.sheet-topo { position: relative; height: 34px; flex: none; display: grid; place-items: center; touch-action: none; }
.alca { width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
.sheet .fechar { position: absolute; right: 4px; top: 0; color: var(--muted); }
.sheet-corpo { overflow-y: auto; padding: 0 18px calc(20px + var(--safe-b)); -webkit-overflow-scrolling: touch; }
@media (min-width: 900px) {
  .sheet { left: auto; top: var(--topo); width: 400px; height: auto; max-height: none; border-radius: 0; transform: translateX(105%); box-shadow: -8px 0 30px rgba(0,0,0,.12); }
  body.com-painel .tela-elemento .viewer, body.com-painel .palco-3d { margin-right: 400px; }
}

.chip { display: inline-block; margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.explicacao h2, .ficha h2 { margin: 2px 0 10px; font-size: 21px; line-height: 1.25; }
.explicacao p { margin: 0 0 10px; }
.sub { color: var(--muted); margin-top: -4px; }
.figura-barra { margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.barra-svg { width: 100%; max-height: 190px; }
.barra-svg .cota { font: 600 17px system-ui, sans-serif; fill: var(--text); }
.barra-svg .cota.forte { fill: var(--accent); }
.figura-barra figcaption { font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.bloco { margin: 14px 0; }
.bloco h4, .padrao h4 { margin: 12px 0 4px; font-size: 14px; }
.bloco ul { margin: 0; padding-left: 20px; }
.bloco li { margin: 3px 0; }
.bloco.atencao, .desconto { background: var(--warn-bg); border-left: 4px solid var(--warn-line); padding: 10px 12px; border-radius: 8px; }
.bloco.atencao h4, .desconto h4 { margin-top: 0; }
.desconto p { margin: 6px 0; }
.bloco.revisar { border: 1px dashed var(--muted); padding: 10px; border-radius: 8px; }
.nota { font-size: 13px; color: var(--muted); }
.padrao { margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; }
.padrao summary { padding: 12px 0; font-weight: 600; color: var(--blue); cursor: pointer; }
.padrao[open] { padding-bottom: 8px; }
.padrao .resumo { color: var(--muted); }
.navegacao { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; color: var(--muted); font-size: 14px; }
.btn { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.btn:disabled { opacity: .35; }
.btn.primario { display: block; text-align: center; margin-top: 16px; background: var(--accent); color: #fff; border: 0; font-weight: 600; padding: 14px; }

.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.numero { background: var(--bg); border-radius: 12px; padding: 10px; text-align: center; }
.numero strong { display: block; font-size: 20px; }
.numero small { font-size: 13px; font-weight: 500; color: var(--muted); }
.numero span { font-size: 12px; color: var(--muted); }
.tabela-aco { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tabela-aco th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: 6px 4px; }
.tabela-aco td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

.erro { padding: 40px 20px; text-align: center; }
.erro a { color: var(--blue); }
.toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); z-index: 60; background: #111; color: #fff; padding: 8px 14px; border-radius: 8px; font: 14px ui-monospace, monospace; }
.so-retrato { display: none; }
@media (orientation: portrait) and (max-width: 700px) { .so-retrato { display: inline; font-weight: 600; } }