/* Projeto Sangue Suga — estilo do site (self-contained, sem CDN) */
:root{
  --ink:#1c2024; --muted:#5b6570; --line:#e3e6ea; --bg:#ffffff; --soft:#f6f7f9;
  --accent:#9b1c1c; --accent-dark:#7a1616; --accent-soft:#fbecec;
  --ok:#1a7f4b; --warn:#b26a00; --bad:#9b1c1c;
  --maxw:920px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; font-size:16px;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* Top bar */
.topbar{background:var(--accent-dark); color:#fff; border-bottom:3px solid var(--accent)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:60px; flex-wrap:wrap}
.brand{color:#fff; text-decoration:none; font-size:19px; letter-spacing:.2px}
.brand strong{font-weight:800}
.topbar .tag{color:#f3d7d7; font-size:12.5px; text-transform:uppercase; letter-spacing:.6px}

/* Breadcrumb */
.crumbs{background:var(--soft); border-bottom:1px solid var(--line); font-size:13.5px}
.crumbs .wrap{padding:9px 22px; color:var(--muted)}
.crumbs a{color:var(--accent); text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{margin:0 8px; color:#b7bdc4}

/* Content */
.content{padding:26px 22px 60px}
h1,h2,h3,h4{line-height:1.25; color:#161a1e}
h1{font-size:28px; margin:.2em 0 .5em; padding-bottom:.28em; border-bottom:2px solid var(--accent); font-weight:800}
h2{font-size:21px; margin:1.7em 0 .5em; color:var(--accent-dark)}
h3{font-size:17px; margin:1.4em 0 .4em}
h4{font-size:15px; margin:1.2em 0 .3em; color:var(--muted); text-transform:uppercase; letter-spacing:.5px}
p{margin:.6em 0}
a{color:var(--accent)}
a:hover{color:var(--accent-dark)}
strong{color:#0f1215}
hr{border:0; border-top:1px solid var(--line); margin:2em 0}
code{background:var(--soft); padding:.1em .35em; border-radius:4px; font-size:.92em}

/* Callout (blockquote) */
blockquote{
  margin:1.2em 0; padding:14px 18px; background:var(--accent-soft);
  border-left:4px solid var(--accent); border-radius:0 8px 8px 0; color:#3a2020; font-size:14.5px
}
blockquote p{margin:.35em 0}

/* Tables */
table{border-collapse:collapse; width:100%; margin:1.2em 0; font-size:14px; display:block; overflow-x:auto}
th,td{border:1px solid var(--line); padding:8px 11px; text-align:left; vertical-align:top}
thead th{background:var(--accent); color:#fff; font-weight:600; border-color:var(--accent-dark)}
tbody tr:nth-child(even){background:var(--soft)}
tbody tr:hover{background:#eef1f4}

/* Lists */
ul,ol{margin:.6em 0 .6em 1.2em; padding-left:.8em}
li{margin:.25em 0}

/* Landing page */
.hero{padding:34px 22px 8px}
.hero h1{border:0; font-size:32px; margin-bottom:.15em}
.hero .lead{font-size:17px; color:var(--muted); max-width:70ch}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; margin:22px 0}
.card{display:block; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:12px; padding:18px 18px 16px; background:#fff; transition:.15s box-shadow,.15s transform}
.card:hover{box-shadow:0 6px 22px rgba(20,24,28,.09); transform:translateY(-2px)}
.card .num{font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.5px}
.card h3{margin:.25em 0 .35em; font-size:17px}
.card p{margin:0; font-size:13.5px; color:var(--muted)}
.badge{display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; letter-spacing:.4px; text-transform:uppercase}
.badge.done{background:#e7f4ec; color:var(--ok)}
.badge.soon{background:#f3f4f6; color:#7a828b}

/* Status list */
.status{border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:18px 0}
.status .row{display:flex; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid var(--line); font-size:14px}
.status .row:first-child{border-top:0}
.status .row .s-num{color:var(--accent); font-weight:700; min-width:26px}
.status .row.done{background:#fcfefd}
.status .row .grow{flex:1}

.foot{border-top:1px solid var(--line); background:var(--soft); color:var(--muted); font-size:12.5px}
.foot .wrap{padding:20px 22px}
.foot .disc{margin:.3em 0 0; color:#8a929b}

/* Mapa de posicionamento (SVG) */
figure.posmap-wrap{margin:1.6em 0; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fff; overflow-x:auto}
figure.posmap-wrap svg{width:100%; height:auto; min-width:640px}
figure.posmap-wrap figcaption{margin-top:12px; font-size:12.5px; color:var(--muted); text-align:center; line-height:1.5}

@media (max-width:560px){
  h1{font-size:23px} .hero h1{font-size:26px} body{font-size:15.5px}
}
@media print{
  .topbar,.crumbs,.foot{background:#fff!important; color:#000!important}
  .card:hover{box-shadow:none} a{color:#000; text-decoration:underline}
  thead th{background:#ddd!important; color:#000!important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
}