/* ============================================================
   BitNR1 — apresentação interativa
   Tokens: claro por padrão; escuro via prefers-color-scheme ou data-theme
   ============================================================ */
:root {
  color-scheme: light;
  --bg: #F5F7F6;
  --surface: #FFFFFF;
  --surface-2: #EDF1F0;
  --ink: #10262C;
  --ink-2: #4A5D62;
  --muted: #7E9094;
  --line: #D9E1E0;
  --line-strong: #B9C7C6;
  --brand: #0E3B47;
  --brand-2: #155E6E;
  --brand-ink: #EAF4F3;
  --brand-ink-2: #A9C4C6;
  --brand-line: rgba(234,244,243,.16);
  --accent: #0F8F7A;
  --accent-ink: #FFFFFF;
  --accent-soft: #D8F0EA;
  --amber: #E39A2D;
  --amber-soft: #FBEEDC;
  --focus: #1E7FD8;
  --f-baixo: #0ca30c; --f-moderado: #fab219; --f-alto: #ec835a; --f-critico: #d03b3b;
  --h1: #FBEEDC; --h2: #F6D3A2; --h3: #EDAB62; --h4: #D7782C; --h5: #A44E12; --h6: #6B3007;
  --heat-ink-dark: #10262C; --heat-ink-light: #FFFFFF;
  --shadow: 0 10px 30px rgba(16,38,44,.08);
  --radius: 14px;
  --r-sm: 8px;
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;
  --maxw: 1180px;
  --measure: 66ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0C1A1E; --surface: #12262C; --surface-2: #17313A;
    --ink: #EEF3F2; --ink-2: #B7C6C8; --muted: #86999C;
    --line: #22393F; --line-strong: #325057;
    --brand: #071316; --brand-2: #0E3B47;
    --brand-ink: #EEF3F2; --brand-ink-2: #A9C4C6; --brand-line: rgba(238,243,242,.14);
    --accent: #35D0B4; --accent-ink: #061114; --accent-soft: #123B37;
    --amber: #EFB25A; --amber-soft: #3A2A14;
    --h1: #2A2116; --h2: #5C3B16; --h3: #8C5619; --h4: #C3762A; --h5: #E79A4B; --h6: #F5C58A;
    --heat-ink-dark: #EEF3F2; --heat-ink-light: #10262C;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0C1A1E; --surface: #12262C; --surface-2: #17313A;
  --ink: #EEF3F2; --ink-2: #B7C6C8; --muted: #86999C;
  --line: #22393F; --line-strong: #325057;
  --brand: #071316; --brand-2: #0E3B47;
  --brand-ink: #EEF3F2; --brand-ink-2: #A9C4C6; --brand-line: rgba(238,243,242,.14);
  --accent: #35D0B4; --accent-ink: #061114; --accent-soft: #123B37;
  --amber: #EFB25A; --amber-soft: #3A2A14;
  --h1: #2A2116; --h2: #5C3B16; --h3: #8C5619; --h4: #C3762A; --h5: #E79A4B; --h6: #F5C58A;
  --heat-ink-dark: #EEF3F2; --heat-ink-light: #10262C;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.2rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.02rem; font-weight: 600; }
p { margin: 0; max-width: var(--measure); }
p + p { margin-top: .9em; }
a { color: var(--accent); }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.lead { font-size: 1.15rem; color: var(--ink-2); }
.small { font-size: .9rem; color: var(--ink-2); }
.note { font-size: .86rem; color: var(--muted); border-left: 3px solid var(--line-strong); padding-left: .8em; margin-top: 1.2em; max-width: var(--measure); }
.wrap { width: min(var(--maxw), 100% - 2.5rem); margin-inline: auto; }
.grid { display: grid; gap: 1.25rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stack { display: grid; gap: 1rem; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .5em; border: 1.5px solid var(--line-strong); background: var(--surface);
  color: var(--ink); padding: .6em 1.1em; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: transform .15s ease, background .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.ghost { background: transparent; }
.btn.sm { padding: .4em .85em; font-size: .85rem; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- Navegação ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 1rem; min-height: 60px; }
.logo { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--ink); }
.logo .mark { width: 30px; height: 30px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; align-items: end; }
.logo .mark i { display: block; background: var(--accent); border-radius: 2px; height: var(--h); transform-origin: bottom; animation: bar 1.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes bar { 0%,100% { transform: scaleY(1);} 50% { transform: scaleY(.45);} }
.logo small { font-family: var(--font-mono); font-weight: 400; color: var(--muted); font-size: .7rem; margin-left: .2rem; }
.navlinks { display: flex; gap: .2rem; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.navlinks a { color: var(--ink-2); text-decoration: none; font-size: .82rem; padding: .45em .6em; border-radius: 999px; white-space: nowrap; }
.navlinks a:hover, .navlinks a.active { background: var(--surface-2); color: var(--ink); }
.navtools { display: flex; gap: .4rem; align-items: center; margin-left: auto; }
.navlinks + .navtools { margin-left: 0; }
.iconbtn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer; display: grid; place-items: center; }
.iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); width: 0; z-index: 60; transition: width .1s linear; }
@media (max-width: 1080px) { .navlinks { display: none; } }
.navtools .btn { white-space: nowrap; }

/* ---------- Seções ---------- */
section.sec { padding: clamp(4rem, 8vw, 7rem) 0; position: relative; }
section.sec.dark { background: var(--brand); color: var(--brand-ink); }
section.sec.dark .eyebrow { color: var(--accent); }
section.sec.dark .lead, section.sec.dark .small { color: var(--brand-ink-2); }
section.sec.dark .note { color: var(--brand-ink-2); border-color: var(--brand-line); }
section.sec.alt { background: var(--surface-2); }
.sec-head { display: grid; gap: .8rem; margin-bottom: 2.5rem; max-width: 780px; }
.sec-head .lead { max-width: 62ch; }
.reveal { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
.js .reveal:not(.in) { transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.in) { opacity: 1; transform: none; }
  *,*::before,*::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { margin-top: 1.2rem; }
.hero .cta { margin-top: 1.8rem; }
.hero .pill-row { margin-top: 2rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.pill { font-family: var(--font-mono); font-size: .76rem; border: 1px solid var(--line-strong); padding: .3em .75em; border-radius: 999px; color: var(--ink-2); background: var(--surface); }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }

.cycle { width: min(100%, 440px); margin-inline: auto; aspect-ratio: 1; position: relative; }
.cycle svg { width: 100%; height: 100%; overflow: visible; }
.cycle .ring { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.cycle .arc { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.cycle .node circle { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; transition: all .3s; }
.cycle .node text { font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink-2); text-anchor: middle; letter-spacing: .06em; transition: fill .3s; }
.cycle .node.on circle { fill: var(--accent); stroke: var(--accent); }
.cycle .node.on text { fill: var(--ink); font-weight: 600; }
.cycle .center { text-anchor: middle; font-family: var(--font-display); }
.cycle .center .big { font-size: 26px; font-weight: 700; fill: var(--ink); }
.cycle .center .sub { font-size: 11px; fill: var(--muted); font-family: var(--font-mono); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.card h3 { margin-bottom: .5rem; }
.card .eyebrow { display: block; margin-bottom: .6rem; }
.dark .card { background: rgba(255,255,255,.04); border-color: var(--brand-line); }
.kicker { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--accent); }
.list { padding-left: 1.2em; margin: .5em 0 0; }
.list li { margin: .3em 0; }
.list li::marker { color: var(--accent); }
.check { list-style: none; padding: 0; margin: .5em 0 0; }
.check li { position: relative; padding-left: 1.6em; margin: .45em 0; }
.check li::before { content: ""; position: absolute; left: 0; top: .45em; width: 1em; height: 1em; border-radius: 50%; background: var(--accent-soft); }
.check li::after { content: ""; position: absolute; left: .3em; top: .62em; width: .32em; height: .55em; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.dark .check li::before { background: rgba(53,208,180,.18); }

/* ---------- Problema ---------- */
.problem { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.problem .card { display: grid; gap: .6rem; align-content: start; }
.quote { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; line-height: 1.3; }
.quote::before { content: "“"; color: var(--accent); }
.quote::after { content: "”"; color: var(--accent); }
@media (max-width: 760px) { .problem { grid-template-columns: 1fr; } }
.drawer { display: flex; gap: .6rem; align-items: flex-end; height: 60px; margin-top: .6rem; }
.drawer i { display: block; width: 22px; background: var(--line-strong); border-radius: 3px 3px 0 0; height: 40px; position: relative; }
.drawer i::after { content: "PDF"; position: absolute; inset: auto 0 4px; text-align: center; font-family: var(--font-mono); font-size: 8px; color: var(--bg); }
.drawer i:nth-child(odd) { height: 48px; }

/* ---------- Pilares ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.pillar .num { font-family: var(--font-mono); color: var(--muted); font-size: .8rem; }
.pillar .why { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--line-strong); font-size: .92rem; color: var(--ink-2); }
.pillar .why b { color: var(--accent); }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- Ecossistema ---------- */
.eco { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: start; }
.eco-map { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; position: relative; }
.eco-block { border: 1.5px solid var(--brand-line); border-radius: var(--r-sm); padding: .9rem 1rem; background: rgba(255,255,255,.03); cursor: pointer; text-align: left; transition: border-color .2s, background .2s, transform .2s; color: var(--brand-ink); width: 100%; }
.eco-block:hover { border-color: var(--accent); transform: translateY(-2px); }
.eco-block[aria-pressed="true"] { border-color: var(--accent); background: rgba(53,208,180,.10); }
.eco-block .t { font-family: var(--font-display); font-weight: 600; font-size: .98rem; }
.eco-block .s { font-size: .8rem; color: var(--brand-ink-2); margin-top: .2rem; }
.eco-block.core { grid-column: 1 / -1; text-align: center; padding: 1.2rem; border-width: 2px; }
.eco-block.core .t { font-size: 1.15rem; }
.eco-block.wide { grid-column: 1 / -1; }
.eco-link { grid-column: 1 / -1; height: 26px; position: relative; }
.eco-link::before, .eco-link::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1.5px; background: var(--brand-line); }
.eco-link::before { left: 25%; } .eco-link::after { left: 75%; }
.eco-link.one::before { left: 50%; } .eco-link.one::after { display: none; }
.eco-detail { position: sticky; top: 80px; border: 1px solid var(--brand-line); border-radius: var(--radius); padding: 1.4rem; background: rgba(255,255,255,.04); min-height: 320px; }
.eco-detail h3 { color: var(--accent); margin-bottom: .6rem; }
.eco-detail ul { padding-left: 1.1em; margin: .6em 0 0; }
.eco-detail li { margin: .35em 0; font-size: .95rem; }
@media (max-width: 900px) { .eco { grid-template-columns: 1fr; } .eco-detail { position: static; } }

/* ---------- Canais ---------- */
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.tab { border: 1.5px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: .5em 1em; cursor: pointer; font-weight: 600; font-size: .9rem; display: inline-flex; gap: .5em; align-items: center; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.panel { display: none; }
.panel[data-active="true"] { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; animation: fade .4s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none;} }
@media (max-width: 860px) { .panel[data-active="true"] { grid-template-columns: 1fr; } }
.anon-meter { display: grid; gap: .4rem; margin-top: 1rem; }
.anon-meter .bar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.anon-meter .bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; width: var(--w); transition: width .8s ease; }
.anon-meter .lbl { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .78rem; color: var(--ink-2); }

.device { border-radius: 22px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; margin-inline: auto; }
.device.phone { width: min(300px, 100%); aspect-ratio: 9/17; display: flex; flex-direction: column; }
.device.tablet { width: 100%; display: grid; grid-template-rows: auto 1fr; }
.device .bar { padding: .5rem .9rem; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.device .body { padding: 1rem; overflow: hidden; flex: 1; display: flex; flex-direction: column; gap: .6rem; }
.msg { max-width: 82%; padding: .55em .8em; border-radius: 14px; font-size: .86rem; line-height: 1.4; opacity: 0; transform: translateY(6px); animation: msgin .4s ease forwards; animation-delay: var(--d); }
.msg.in { background: var(--surface-2); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.out { background: var(--accent-soft); border-bottom-right-radius: 4px; align-self: flex-end; }
.msg.btns { background: transparent; padding: 0; display: flex; gap: .4rem; flex-wrap: wrap; max-width: 100%; }
.msg.btns span { border: 1.5px solid var(--accent); color: var(--accent); border-radius: 999px; padding: .25em .7em; font-size: .8rem; font-weight: 600; }
@keyframes msgin { to { opacity: 1; transform: none; } }
.totem-screen { padding: 1.4rem; display: grid; gap: 1rem; align-content: center; text-align: center; }
.totem-screen .q { font-family: var(--font-display); font-size: clamp(1rem, 2.2vw, 1.3rem); font-weight: 600; }
.totem-screen .opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.totem-screen .opts button { border: 2px solid var(--line-strong); background: var(--surface); border-radius: 12px; padding: .9rem .2rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all .2s; }
.totem-screen .opts button:hover, .totem-screen .opts button.sel { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.totem-screen .opts small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .68rem; margin-top: .3rem; opacity: .8; }
.totem-screen .tools { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.totem-screen .tools span { font-family: var(--font-mono); font-size: .72rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: .25em .7em; color: var(--ink-2); }
.wave { display: flex; gap: 3px; align-items: center; height: 36px; justify-content: center; }
.wave i { width: 4px; border-radius: 2px; background: var(--accent); height: 8px; animation: wv 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * .07s); }
@keyframes wv { 0%,100% { height: 6px;} 50% { height: 30px;} }
.call { display: grid; gap: .6rem; }
.call .line { display: grid; grid-template-columns: 62px 1fr; gap: .8rem; font-size: .9rem; opacity: 0; animation: msgin .4s ease forwards; animation-delay: var(--d); }
.call .who { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); padding-top: .2em; }
.call .pessoa { color: var(--accent); font-weight: 600; }

/* ---------- Anonimato: fluxo ---------- */
.flow { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: start; }
.flow-svg { width: 100%; height: auto; border: 1px solid var(--brand-line); border-radius: var(--radius); background: rgba(255,255,255,.03); }
.flow-svg .box { fill: rgba(255,255,255,.04); stroke: var(--brand-line); stroke-width: 1.5; transition: all .35s; }
.flow-svg .box.on { stroke: var(--accent); fill: rgba(53,208,180,.12); }
.flow-svg text { fill: var(--brand-ink); font-family: var(--font-body); font-size: 12.5px; }
.flow-svg .t { font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.flow-svg .m { font-family: var(--font-mono); font-size: 10.5px; fill: var(--brand-ink-2); }
.flow-svg .path { fill: none; stroke: var(--brand-line); stroke-width: 1.5; stroke-dasharray: 4 4; transition: stroke .3s; }
.flow-svg .path.on { stroke: var(--accent); stroke-dasharray: none; }
.flow-svg .token { fill: var(--accent); opacity: 0; transition: opacity .3s; }
.flow-svg .token.go { opacity: 1; }
.flow-svg .nojoin { stroke: var(--f-critico); stroke-width: 3; opacity: 0; transition: opacity .3s; stroke-linecap: round; }
.flow-svg .nojoin.on { opacity: 1; }
.flow-svg .strip { fill: var(--f-critico); opacity: 0; transition: opacity .3s; }
.flow-svg .strip.on { opacity: .9; }
.flow-svg .cyl { fill: rgba(255,255,255,.04); stroke: var(--brand-line); stroke-width: 1.5; transition: all .35s; }
.flow-svg .cyl.on { stroke: var(--accent); fill: rgba(53,208,180,.12); }
.steps { display: grid; gap: .5rem; }
.step { border: 1px solid var(--brand-line); border-radius: var(--r-sm); padding: .8rem 1rem; cursor: pointer; background: transparent; text-align: left; color: var(--brand-ink); display: grid; grid-template-columns: 28px 1fr; gap: .7rem; align-items: start; transition: border-color .2s, background .2s; }
.step .n { font-family: var(--font-mono); color: var(--accent); font-size: .85rem; padding-top: .15em; }
.step .b { font-weight: 600; font-family: var(--font-display); font-size: .95rem; }
.step .d { font-size: .86rem; color: var(--brand-ink-2); margin-top: .2rem; display: none; }
.step[aria-current="step"] { border-color: var(--accent); background: rgba(53,208,180,.08); }
.step[aria-current="step"] .d { display: block; }
.flow-controls { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.dark .btn { background: transparent; color: var(--brand-ink); border-color: var(--brand-line); }
.dark .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dark .btn[aria-pressed="true"] { background: var(--brand-ink); color: var(--brand); border-color: var(--brand-ink); }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; } }

.anon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin-top: 2rem; }
.anon-card { border: 1px solid var(--brand-line); border-radius: var(--r-sm); padding: .9rem; }
.anon-card .t { font-family: var(--font-display); font-weight: 600; font-size: .9rem; }
.anon-card .g { font-family: var(--font-mono); font-size: .74rem; color: var(--brand-ink-2); margin-top: .2rem; }
.anon-card .dots { display: flex; gap: 4px; margin-top: .6rem; }
.anon-card .dots i { width: 14px; height: 6px; border-radius: 3px; background: var(--brand-line); }
.anon-card .dots i.on { background: var(--accent); }

/* ---------- Simuladores ---------- */
.sim { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; display: grid; gap: 1rem; align-content: start; }
.dark .sim { background: rgba(255,255,255,.04); border-color: var(--brand-line); }
.sim-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.sim-head h3 { font-size: 1.1rem; }
.range { display: grid; gap: .3rem; }
.range label { display: flex; justify-content: space-between; font-size: .88rem; gap: 1rem; }
.range output { font-family: var(--font-mono); font-weight: 600; color: var(--accent); white-space: nowrap; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.k-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.k-area { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .7rem .8rem; transition: all .3s; }
.dark .k-area { border-color: var(--brand-line); }
.k-area .n { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600; }
.k-area .a { font-size: .85rem; }
.k-area .st { font-family: var(--font-mono); font-size: .7rem; margin-top: .3rem; color: var(--accent); }
.k-area.hidden-k { opacity: .55; border-style: dashed; }
.k-area.hidden-k .n { color: var(--muted); text-decoration: line-through; }
.k-area.hidden-k .st { color: var(--f-alto); }
.k-summary { font-size: .9rem; }
.gauge { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.gauge .val { font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1; }
.gauge .band { display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-mono); font-size: .8rem; padding: .25em .7em; border-radius: 999px; border: 1px solid currentColor; }
.gauge .band i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.gauge .track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--f-baixo) 0 25%, var(--f-moderado) 25% 50%, var(--f-alto) 50% 75%, var(--f-critico) 75% 100%); position: relative; opacity: .9; }
.gauge .track b { position: absolute; top: -5px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 3px solid var(--ink); transform: translateX(-50%); left: var(--x); transition: left .4s ease; }
.gauge .ticks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .7rem; color: var(--muted); margin-top: .3rem; }

/* ---------- Heatmap ---------- */
.heat-wrap { overflow-x: auto; }
.heat { border-collapse: separate; border-spacing: 3px; font-size: .84rem; min-width: 700px; width: 100%; }
.heat th { font-weight: 500; text-align: left; color: var(--ink-2); font-family: var(--font-mono); font-size: .74rem; padding: .3em .4em; }
.heat thead th { text-align: center; vertical-align: bottom; }
.heat thead th small { display: block; color: var(--muted); font-size: .68rem; }
.heat td { text-align: center; padding: .55em .3em; border-radius: 4px; font-family: var(--font-mono); cursor: default; transition: transform .15s; position: relative; }
.heat td:hover { transform: scale(1.06); outline: 2px solid var(--ink); z-index: 2; }
.heat td.na { background: var(--surface-2); color: var(--muted); font-size: .7rem; }
.legend { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); margin-top: .8rem; }
.legend .ramp { display: flex; gap: 2px; }
.legend .ramp i { width: 26px; height: 12px; border-radius: 2px; }
.tip { position: fixed; z-index: 70; background: var(--ink); color: var(--bg); padding: .5em .7em; border-radius: 6px; font-size: .8rem; pointer-events: none; opacity: 0; transition: opacity .15s; max-width: 260px; }
.tip.on { opacity: 1; }

/* ---------- Gráficos ---------- */
.chart { width: 100%; height: auto; }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .lbl { fill: var(--muted); font-family: var(--font-mono); font-size: 10px; }
.chart .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .ar { fill: var(--accent); opacity: .12; }
.chart .pt { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.chart .pt.end { fill: var(--accent); }
.chart .val { fill: var(--ink); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.dist { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dist .bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; align-items: end; height: 90px; margin-top: .6rem; }
.dist .bars i { display: block; background: var(--accent); border-radius: 4px 4px 0 0; height: var(--h); transition: height .6s ease; }
.dist .lbls { display: grid; grid-template-columns: repeat(5, 1fr); font-family: var(--font-mono); font-size: .66rem; color: var(--muted); text-align: center; margin-top: .3rem; }

/* ---------- Plano de ação ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.plan { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 760px; }
table.plan th, table.plan td { padding: .7em .8em; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.plan th { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; background: var(--surface-2); }
table.plan tr:last-child td { border-bottom: 0; }
.status { display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-mono); font-size: .74rem; padding: .2em .6em; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.status.ok i { background: var(--f-baixo); } .status.run i { background: var(--focus); } .status.late i { background: var(--f-critico); }
.devolutiva { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.devolutiva .card { position: relative; padding-top: 1.6rem; }
.devolutiva .card::before { content: ""; position: absolute; top: 0; left: 1.4rem; right: 1.4rem; height: 4px; border-radius: 0 0 4px 4px; background: var(--accent); }
@media (max-width: 760px) { .devolutiva { grid-template-columns: 1fr; } }

/* ---------- Jornada ---------- */
.journey { position: relative; padding-left: 1.5rem; }
.journey::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line-strong); }
.journey .j { position: relative; padding: 0 0 1.6rem 1.6rem; }
.journey .j::before { content: ""; position: absolute; left: -1.5rem; top: .35rem; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line-strong); transition: all .4s; }
.journey .j.in::before { border-color: var(--accent); background: var(--accent); }
.journey .j .ph { font-family: var(--font-mono); font-size: .74rem; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; }
.journey .j h3 { font-size: 1.1rem; margin: .2rem 0 .3rem; }
.journey .j p { font-size: .95rem; color: var(--ink-2); }
.journey .j .dur { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); margin-left: .6em; }

/* ---------- Portais ---------- */
.portals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.portal { padding: 1.2rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); display: grid; gap: .5rem; align-content: start; }
.portal .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); }
.portal .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal .who { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); }
@media (max-width: 1000px) { .portals { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .portals { grid-template-columns: 1fr; } }

/* ---------- Consultoria ---------- */
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pack { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1.2rem; display: grid; gap: .4rem; align-content: start; }
.pack .n { font-family: var(--font-mono); color: var(--accent); font-size: .78rem; }
.pack.selo { border-color: var(--amber); background: var(--amber-soft); grid-template-columns: 1fr auto; }
.pack.selo .n { color: var(--amber); }
.pack.selo .selo-badge { grid-row: 1 / span 3; align-self: center; }
@media (max-width: 900px) { .packs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .packs { grid-template-columns: 1fr; } }
.selo-badge { width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--amber); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: var(--amber); font-size: .8rem; text-align: center; line-height: 1.1; }
.selo-badge svg { width: 100%; height: 100%; animation: spin 24s linear infinite; }
.selo-badge svg text { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em; fill: var(--amber); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Diagnóstico ---------- */
.diag { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 860px) { .diag { grid-template-columns: 1fr; } .quiz-result { position: static; } }
.quiz { display: grid; gap: .8rem; }
.qitem { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .9rem 1rem; display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; background: var(--surface); }
.qitem .q { font-size: .95rem; }
.qitem .opts { display: flex; gap: .3rem; }
.qitem .opts button { border: 1.5px solid var(--line-strong); background: transparent; border-radius: 999px; padding: .35em .8em; font-size: .8rem; cursor: pointer; font-weight: 600; }
.qitem .opts button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 640px) { .qitem { grid-template-columns: 1fr; } }
.quiz-result { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; background: var(--surface); display: grid; gap: .6rem; position: sticky; top: 80px; }
.quiz-result .lvl { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--accent); }
.quiz-result .meter { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.quiz-result .meter i { display: block; height: 100%; width: var(--w); background: var(--accent); transition: width .5s ease; }

/* ---------- Planejador ---------- */
.planner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5rem; }
.chk { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .7rem .9rem; cursor: pointer; background: var(--surface); }
.chk input { accent-color: var(--accent); width: 18px; height: 18px; }
.chk .t { font-weight: 600; font-size: .92rem; }
.chk .s { font-size: .78rem; color: var(--muted); font-family: var(--font-mono); }
.publics { display: grid; gap: .5rem; }
.pub { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; padding: .6rem .8rem; border-radius: var(--r-sm); border: 1px solid var(--line); font-size: .9rem; background: var(--surface); transition: all .3s; }
.pub .cov { font-family: var(--font-mono); font-size: .74rem; padding: .2em .6em; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pub.ok { border-color: var(--accent); }
.pub.ok .cov { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 860px) { .planner { grid-template-columns: 1fr; } }

/* ---------- Roadmap ---------- */
.roadmap { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.phase { border-top: 4px solid var(--line-strong); padding-top: .8rem; display: grid; gap: .3rem; align-content: start; }
.phase.now { border-top-color: var(--accent); }
.phase .ph { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.phase h3 { font-size: 1rem; }
.phase p { font-size: .85rem; color: var(--ink-2); }
.phase .tag { font-family: var(--font-mono); font-size: .7rem; color: var(--accent); }
@media (max-width: 900px) { .roadmap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .roadmap { grid-template-columns: 1fr; } }

/* ---------- Arquitetura ---------- */
details.tech { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
details.tech summary { cursor: pointer; padding: 1rem 1.4rem; font-family: var(--font-display); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.tech summary::-webkit-details-marker { display: none; }
details.tech summary::after { content: "+"; font-size: 1.4rem; color: var(--accent); }
details.tech[open] summary::after { content: "–"; }
details.tech .inner { padding: 0 1.4rem 1.4rem; overflow-x: auto; }
table.tech { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.tech th, table.tech td { text-align: left; padding: .55em .6em; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tech th { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); font-weight: 500; width: 32%; }

/* ---------- Compromissos ---------- */
.ethics { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.ethics .card { border-left: 4px solid var(--accent); }
.ethics .card.never { border-left-color: var(--f-critico); }

/* ---------- Modelos ---------- */
.models { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.model { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; background: var(--surface); display: grid; gap: .3rem; align-content: start; }
.model .price { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.model .price small { font-family: var(--font-mono); font-weight: 400; font-size: .72rem; color: var(--muted); display: block; }

/* ---------- CTA / rodapé ---------- */
.cta-final { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
@media (max-width: 800px) { .cta-final { grid-template-columns: 1fr; } }
footer { padding: 2.5rem 0 3rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
footer .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- Afordância: o que é clicável ---------- */
.hint { display: inline-flex; align-items: center; gap: .35em; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);} 100% { box-shadow: 0 0 0 10px transparent;} }
.hint-bar { display: flex; gap: .6rem; align-items: center; font-size: .86rem; color: var(--ink-2); margin: -1.2rem 0 1.2rem; }
.dark .hint-bar { color: var(--brand-ink-2); }
.eco-block { position: relative; }
.eco-block .hint { position: absolute; top: .6rem; right: .8rem; }
.eco-block[aria-pressed="true"] .hint { display: none; }
.open-screen { display: inline-flex; align-items: center; gap: .4em; margin-top: 1rem; font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--accent); border-bottom: 1.5px solid currentColor; }
.open-screen::after { content: "\2192"; }

/* ---------- Telas do produto (thumbs) ---------- */
.screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.screen-card { text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .15s, border-color .2s, box-shadow .2s; }
.screen-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }
.screen-card .body { padding: .9rem 1rem 1rem; display: grid; gap: .25rem; align-content: start; }
.screen-card h3 { font-size: 1rem; }
.screen-card .who { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.screen-card .go { font-size: .82rem; color: var(--accent); font-weight: 600; margin-top: .3rem; }
.thumb { height: 130px; background: var(--surface-2); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.thumb .win { position: absolute; inset: 14px 14px 0; background: var(--surface); border-radius: 6px 6px 0 0; border: 1px solid var(--line); display: grid; grid-template-columns: 22% 1fr; overflow: hidden; }
.thumb .win .sb { background: var(--brand); }
.thumb .win .ct { padding: 8px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; align-content: start; }
.thumb .win .ct i { display: block; height: 16px; border-radius: 3px; background: var(--surface-2); }
.thumb .win .ct i.a { background: var(--accent-soft); } .thumb .win .ct i.w { grid-column: 1 / -1; height: 34px; } .thumb .win .ct i.h { background: var(--h3); }
.thumb .ph { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 62px; height: 130px; border-radius: 12px 12px 0 0; background: var(--ink); padding: 5px 5px 0; }
.thumb .ph .sc { background: var(--surface); height: 100%; border-radius: 8px 8px 0 0; padding: 10px 5px; display: grid; gap: 4px; align-content: start; }
.thumb .ph .sc i { display: block; height: 8px; border-radius: 4px; background: var(--surface-2); }
.thumb .ph .sc i.a { background: var(--accent-soft); width: 70%; } .thumb .ph .sc i.b { background: var(--accent); width: 100%; height: 12px; margin-top: 6px; }
.thumb .ph.wa .sc { background: #E5DDD5; } .thumb .ph.wa .sc i { background: #fff; } .thumb .ph.wa .sc i.a { background: #DCF8C6; justify-self: end; }
.thumb .ph.dark .sc { background: #0f1b1e; } .thumb .ph.dark .sc i { background: rgba(255,255,255,.1); } .thumb .ph.dark .sc i.b { background: #35D0B4; }
.thumb .tb { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); width: 170px; height: 130px; border-radius: 10px 10px 0 0; background: var(--ink); padding: 7px 7px 0; }
.thumb .tb .sc { background: var(--surface); height: 100%; border-radius: 6px 6px 0 0; display: grid; place-content: center; gap: 6px; padding: 10px; }
.thumb .tb .sc b { display: block; height: 10px; width: 110px; background: var(--surface-2); border-radius: 3px; }
.thumb .tb .sc span { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: 130px; }
.thumb .tb .sc span i { height: 22px; border: 1.5px solid var(--line-strong); border-radius: 4px; background: var(--surface); }
.thumb .tb .sc span i:nth-child(4) { background: var(--accent); border-color: var(--accent); }

/* ---------- Modo apresentação ---------- */
body.present section.sec, body.present .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
body.present .presenter { display: flex; }
.presenter { display: none; position: fixed; bottom: 1rem; right: 1rem; z-index: 60; gap: .4rem; align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: .35rem .5rem .35rem .9rem; box-shadow: var(--shadow); font-family: var(--font-mono); font-size: .78rem; color: var(--ink); }
.presenter .iconbtn { width: 32px; height: 32px; }