/* ============================================================================
   BITCAMERA — Dossiê do produto (versão para impressão / PDF)
   Documento único, claro, otimizado para A4. Sem animações, sem navegação.
   ============================================================================ */
:root{
  --pri:#1A67C0; --pri7:#18569E; --pri-soft:#EEF6FE; --pri-200:#BCD8F8;
  --ink:#181918; --ink2:#475B65; --ink3:#6B7681;
  --bg:#F6F8FA; --surface:#FFFFFF; --line:#DCE1E6;
  --green:#16A34A; --green-bg:#DCFCE7; --green-tx:#15803D;
  --red:#DC2626; --red-bg:#FEE2E2; --red-tx:#B91C1C;
  --amber-tx:#B45309; --amber-bg:#FEF3C7;
  --grad:linear-gradient(135deg,#2D82E4 0%,#18569E 100%);
  --ff:"Inter","Segoe UI",system-ui,Arial,sans-serif;
  --ffm:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ff);color:var(--ink);background:#e9edf1;line-height:1.55;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.18;letter-spacing:-.015em}
a{color:var(--pri7);text-decoration:none}
strong{font-weight:700}

/* documento "folha A4" */
.doc{max-width:210mm;margin:0 auto;background:var(--surface);box-shadow:0 4px 24px rgba(0,0,0,.12)}
.pad{padding:16mm 16mm}

/* barra de ação (só tela) */
.toolbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  gap:16px;background:#0E1116;color:#fff;padding:12px 20px}
.toolbar span{font-size:.9rem;color:#C2C9D1}
.toolbar button{font-family:var(--ff);font-weight:700;font-size:.95rem;cursor:pointer;border:0;
  background:var(--pri);color:#fff;border-radius:999px;padding:.7em 1.5em}
.toolbar button:hover{background:var(--pri7)}

/* ---------- capa ---------- */
.cover{background:var(--grad);color:#fff;padding:30mm 16mm 22mm}
.cover__codifica{display:flex;align-items:center;gap:8px;font-size:.85rem;opacity:.95;margin-bottom:26mm}
.cover__codifica img{height:30px;filter:brightness(0) invert(1)}
.cover__logo{height:46px;margin-bottom:20px}
.cover h1{font-size:30pt;font-weight:800;margin-bottom:10px;max-width:16ch}
.cover p.sub{font-size:13pt;opacity:.95;margin-bottom:4px}
.cover p.by{font-size:10.5pt;opacity:.8;margin-top:18px}
.cover__meta{margin-top:24mm;display:flex;gap:26px;flex-wrap:wrap;font-size:10pt}
.cover__meta b{display:block;font-size:8.5pt;text-transform:uppercase;letter-spacing:.06em;opacity:.7;margin-bottom:2px}

/* ---------- seções ---------- */
.sec{padding:14mm 16mm}
.sec--alt{background:var(--bg)}
.eyebrow{font-size:8.5pt;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pri)}
.sec h2{font-size:21pt;font-weight:800;margin:6px 0 6px}
.sec .lead{font-size:11.5pt;color:var(--ink2);max-width:62ch;margin-bottom:14px}
.sec h3.blk{font-size:12.5pt;margin:14px 0 8px;color:var(--ink)}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.kpi{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface)}
.kpi b{display:block;font-size:18pt;font-weight:800;color:var(--pri);font-family:var(--ffm)}
.kpi span{font-size:8.5pt;color:var(--ink3);text-transform:uppercase;letter-spacing:.03em}

/* engine caps */
.caps{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cap{font-size:9.5pt;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:.35em .8em;background:var(--surface)}

/* lista de valor */
.vlist{list-style:none;display:grid;gap:7px;margin-top:6px}
.vlist li{position:relative;padding-left:20px;font-size:10.5pt;color:var(--ink)}
.vlist li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;background:var(--pri)}
.vlist li b{color:var(--ink)}

/* módulos */
.mods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.mod{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--surface);position:relative}
.mod h4{font-size:12pt;margin-bottom:3px;padding-right:74px}
.mod p{font-size:9.8pt;color:var(--ink2);margin-bottom:6px}
.mod ul{list-style:none;display:grid;gap:4px}
.mod li{font-size:9.3pt;color:var(--ink);padding-left:14px;position:relative}
.mod li::before{content:"✓";position:absolute;left:0;color:var(--pri);font-weight:700;font-size:8.5pt}
.status{position:absolute;top:14px;right:14px;font-size:7.6pt;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:.28em .7em;border-radius:999px}
.status--live{color:var(--green-tx);background:var(--green-bg)}
.status--soon{color:var(--ink2);background:#ECEFF2;border:1px solid var(--line)}

/* passos */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.step{border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--surface)}
.step b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--pri);
  color:#fff;font-family:var(--ffm);font-size:10pt;margin-bottom:8px}
.step h4{font-size:11.5pt;margin-bottom:4px}
.step p{font-size:9.8pt;color:var(--ink2)}

/* grid genérico de cartões (recursos/análises/integrações/bem-estar) */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:8px}
.card{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface)}
.card h4{font-size:10.8pt;margin-bottom:3px}
.card p{font-size:9.5pt;color:var(--ink2)}
.cards--3{grid-template-columns:repeat(3,1fr)}

/* privacidade */
.priv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.pcol{border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--surface)}
.pbadge{display:inline-block;font-size:8pt;font-weight:700;border-radius:999px;padding:.3em .7em;margin-bottom:8px}
.pbadge.g{color:var(--green-tx);background:var(--green-bg)}
.pbadge.b{color:var(--pri7);background:var(--pri-soft)}
.pbadge.a{color:var(--amber-tx);background:var(--amber-bg)}
.pcol h4{font-size:11pt;margin-bottom:4px}.pcol p{font-size:9.5pt;color:var(--ink2)}

/* codifica/bitchat */
.maker{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:center;margin-top:6px}
.maker img.clogo{height:42px;margin-top:10px}
.case{border:1px solid var(--pri-200);border-radius:12px;padding:16px;background:var(--pri-soft)}
.case .tag{font-size:8pt;font-weight:700;text-transform:uppercase;color:var(--pri7)}
.case h4{font-size:14pt;margin:4px 0 6px}.case p{font-size:9.8pt;color:var(--ink2)}

/* gráfico de linha (estático) */
.chartbox{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px 16px;margin-top:8px}
.chartbox .top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8px}
.chartbox .big{font-size:18pt;font-weight:800}
.chartbox .small{font-size:8.5pt;color:var(--ink3);text-transform:uppercase;letter-spacing:.03em}
.delta{font-size:9pt;font-weight:700;color:var(--green-tx);background:var(--green-bg);border-radius:999px;padding:.3em .7em}
.chartbox svg{width:100%;height:auto;display:block}
.pchart__grid{stroke:var(--line);stroke-width:1}
.pchart__line{fill:none;stroke:var(--pri);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pchart__area{fill:url(#pg)}
.pchart__dot{fill:#fff;stroke:var(--pri);stroke-width:3}
.chart__x{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--ffm);font-size:8pt;color:var(--ink3)}

/* painel: donut + barras (estático) */
.panel{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:center;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);padding:14px 16px;margin-top:8px}
.donut{position:relative;width:150px;height:150px}
.donut svg{transform:rotate(-90deg)}
.donut__seg{fill:none;stroke-width:16;stroke-linecap:butt}
.donut__c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut__c b{font-size:16pt;font-weight:800}.donut__c span{font-size:7.5pt;color:var(--ink3);text-transform:uppercase}
.legend{display:grid;gap:6px}
.legend div{display:flex;align-items:center;gap:8px;font-size:9.5pt;color:var(--ink2)}
.legend i{width:10px;height:10px;border-radius:3px}.legend b{margin-left:auto;color:var(--ink)}

/* antes & depois */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.ccol{border:1px solid var(--line);border-radius:12px;padding:16px}
.ccol--a{background:var(--surface);border-color:var(--pri-200)}
.ccol .ctag{display:inline-block;font-size:8pt;font-weight:700;text-transform:uppercase;border-radius:999px;
  padding:.3em .7em;margin-bottom:10px}
.ccol--b .ctag{color:var(--ink2);background:#ECEFF2}.ccol--a .ctag{color:var(--pri7);background:var(--pri-soft)}
.ccol ul{list-style:none;display:grid;gap:8px}
.ccol li{display:flex;gap:9px;font-size:9.8pt;align-items:flex-start}
.ccol .ic{flex:0 0 auto;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:8pt;font-weight:700;margin-top:1px}
.ccol--b .ic{background:var(--red-bg);color:var(--red-tx)}.ccol--b li{color:var(--ink2)}
.ccol--a .ic{background:var(--green-bg);color:var(--green-tx)}
.ostats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.ostat{border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;background:var(--surface)}
.ostat b{display:block;font-size:11pt;color:var(--pri);margin-bottom:3px}.ostat span{font-size:9pt;color:var(--ink2)}
.note{font-size:8.5pt;color:var(--ink3);margin-top:8px;text-align:center}

/* contato / rodapé */
.contact{background:var(--grad);color:#fff;padding:14mm 16mm}
.contact h2{font-size:18pt;margin-bottom:6px}
.contact p{font-size:11pt;opacity:.95;margin-bottom:12px}
.contact .row{display:flex;gap:26px;flex-wrap:wrap;font-size:10.5pt}
.contact .row b{display:block;font-size:8.5pt;text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.foot{font-size:8.5pt;color:var(--ink3);text-align:center;padding:8mm 16mm}

/* ---------- impressão ---------- */
@page{ size:A4; margin:0; }
@media print{
  body{background:#fff}
  .toolbar{display:none}
  .doc{max-width:none;box-shadow:none;margin:0}
  html,body,.doc{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:inherit}
  .page-break{break-before:page}
  .avoid,.mod,.card,.step,.pcol,.ccol,.chartbox,.panel,.kpi{break-inside:avoid}
  .sec h2,.sec h3{break-after:avoid}
}