/* style.css — Partilhado por todas as páginas do Kit RPi */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --bg:#0d1117;--card:#161c26;--card2:#1c2433;--border:#24303f;
  --rpi:#c51a4a;--rpi-h:#e0204f;--rpi-glow:rgba(197,26,74,.3);--rpi-soft:rgba(197,26,74,.08);
  --green:#1db954;--green-soft:rgba(29,185,84,.1);
  --text:#dde4f0;--muted:#7a8ea8;--code:#a8c4ff;
  --mono:'Courier New',monospace;
}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;line-height:1.7}

/* topbar */
.topbar{background:rgba(13,17,23,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:.6rem 1.5rem;display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.72rem;position:sticky;top:0;z-index:99;flex-wrap:wrap}
.topbar .tag{background:var(--rpi-soft);border:1px solid rgba(197,26,74,.25);color:var(--rpi);padding:.15rem .6rem;border-radius:3px;letter-spacing:.06em}
.topbar .sep{color:var(--border)}
.topbar a{color:var(--muted);text-decoration:none}.topbar a:hover{color:var(--text)}
.topbar .ml{margin-left:auto}

/* content */
.content{max-width:760px;margin:0 auto;padding:2.5rem 1.5rem 6rem}
.breadcrumb{font-family:var(--mono);font-size:.65rem;color:var(--muted);margin-bottom:1.5rem}
.breadcrumb a{color:var(--rpi);text-decoration:none}
.eyebrow{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--green);background:var(--green-soft);border:1px solid rgba(29,185,84,.2);padding:.18rem .65rem;border-radius:3px;display:inline-block;margin-bottom:.8rem;text-transform:uppercase}
h1{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;letter-spacing:-.04em;line-height:1.15;margin-bottom:.7rem}
.lead{font-size:.97rem;color:var(--muted);margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}
h2{font-size:1.05rem;font-weight:700;margin:2.2rem 0 .6rem;display:flex;align-items:center;gap:.4rem}
h2::before{content:'#';font-family:var(--mono);color:var(--rpi);font-weight:400;font-size:.9rem}
h3{font-size:.93rem;font-weight:600;margin:1.4rem 0 .4rem}
p{color:#b8c4d8;margin-bottom:.85rem}
ul,ol{padding-left:1.3rem;color:#b8c4d8;margin-bottom:.9rem}
li{margin-bottom:.3rem}
strong{color:var(--text);font-weight:600}
a{color:var(--rpi)}
code{font-family:var(--mono);font-size:.8rem;background:#111827;color:var(--code);padding:.1em .35em;border-radius:3px}

/* code blocks */
.cb{margin:1.1rem 0;background:#080d16;border:1px solid var(--border);border-radius:7px;overflow:hidden}
.cb-head{background:var(--card);border-bottom:1px solid var(--border);padding:.45rem .9rem;display:flex;align-items:center;gap:.4rem}
.cb-dots{display:flex;gap:4px}.cb-dots span{width:9px;height:9px;border-radius:50%}
.cb-dots .d1{background:#ff5f57}.cb-dots .d2{background:#febc2e}.cb-dots .d3{background:#28c840}
.cb-lang{font-family:var(--mono);font-size:.58rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-left:auto}
.cb pre{padding:1.1rem 1.2rem;overflow-x:auto;font-family:var(--mono);font-size:.77rem;line-height:1.85;color:var(--text)}
.kw{color:#ff79c6}.fn{color:#8be9fd}.str{color:#f1fa8c}.num{color:#ffb86c}.cmt{color:#4a5568;font-style:italic}.cls{color:#50fa7b}

/* info/warn boxes */
.box{border-radius:6px;padding:.85rem 1rem;margin:1.1rem 0;font-size:.84rem;line-height:1.6;display:flex;gap:.6rem}
.box-icon{font-size:.95rem;flex-shrink:0;margin-top:.1rem}
.box-info{background:rgba(96,165,250,.07);border:1px solid rgba(96,165,250,.2)}
.box-info strong{color:#93c5fd}
.box-warn{background:rgba(245,166,35,.07);border:1px solid rgba(245,166,35,.2)}
.box-warn strong{color:#f5a623}
.box-ok{background:var(--green-soft);border:1px solid rgba(29,185,84,.25)}
.box-ok strong{color:var(--green)}
.box-err{background:rgba(197,26,74,.07);border:1px solid rgba(197,26,74,.25)}
.box-err strong{color:#ff7b9c}

/* tables */
.tbl{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.82rem}
.tbl th{background:var(--card2);padding:.55rem .8rem;text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;color:var(--muted);border-bottom:1px solid var(--border)}
.tbl td{padding:.5rem .8rem;border-bottom:1px solid var(--border);color:#b8c4d8}
.tbl tr:last-child td{border-bottom:none}
.tbl .hi{color:var(--green);font-weight:600}
.tbl .rpi{color:#ff7b9c;font-weight:600}
.tbl code{font-size:.72rem}

/* circuit diagram */
.circuit{background:var(--card);border:1px solid var(--border);border-radius:7px;padding:1.2rem;font-family:var(--mono);font-size:.73rem;line-height:2;margin:1rem 0;color:var(--muted)}
.circuit .comp{color:var(--text);font-weight:700}
.circuit .gpio{color:var(--green)}
.circuit .arr{color:var(--rpi);margin:0 .2rem}

/* page nav */
.page-nav{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
@media(max-width:480px){.page-nav{grid-template-columns:1fr}}
.pn{background:var(--card);border:1px solid var(--border);border-radius:7px;padding:.9rem 1.1rem;text-decoration:none;color:var(--text);transition:border-color .15s;display:flex;flex-direction:column;gap:.18rem}
.pn:hover{border-color:rgba(197,26,74,.4)}
.pn span{font-family:var(--mono);font-size:.57rem;color:var(--muted);letter-spacing:.1em}
.pn.next{text-align:right;background:var(--rpi);border-color:var(--rpi)}
.pn.next span{color:rgba(255,255,255,.55)}
.pn.next:hover{background:var(--rpi-h)}

@keyframes fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.content{animation:fade-up .4s ease}