/* ==========================================================================
   artigo.css — páginas de artigo e condição
   Reusa os tokens de design de index.html (paleta bege quente + verde
   floresta, Playfair Display / Plus Jakarta Sans), incluindo modo escuro.
   ========================================================================== */

:root{
  --bg:#f7f5f0;--surf:#ffffff;--surf2:#f2efe8;--surf3:#faf9f5;
  --brd:#e6e1d5;--brd2:#d6d0c2;
  --txt:#1f1d18;--txt2:#6b665a;--txt3:#736d62;
  --g:#2f6b4f;--g2:#3f8060;--g3:#5f8e72;--gd:#24543f;
  --gp:#eaf3ea;--gl:#d9e8d8;--gf:#f2f8f1;
  --red:#b83232;--redp:#fceaea;
  --amb:#9a5d22;--ambp:#fcf1e4;
  --tc:#b0603f;--tcd:#8a4a2e;--tcp:#f7ebe4;
  --shxs:0 1px 3px rgba(0,0,0,.05);
  --shsm:0 2px 8px rgba(0,0,0,.07);
  --shmd:0 6px 24px rgba(0,0,0,.09);
  --rsm:8px;--rmd:14px;--rlg:20px;--rxl:28px;
  --tr:.2s cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}
body.dark{
  color-scheme:dark !important;
  --bg:#121110;--surf:#1c1b18;--surf2:#24231f;--surf3:#1f1e1b;
  --brd:#2e2c27;--brd2:#3b3931;
  --txt:#f0ede6;--txt2:#9c9789;--txt3:#615d54;
  --gd:#1a3d2c;--gp:#18301f;--gl:#1f3d29;--gf:#132419;
  --amb:#d9924a;--ambp:#2e2113;
  --tc:#d0805e;--tcd:#e8b39a;--tcp:#2c1d16;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg);color:var(--txt);min-height:100dvh;
  transition:background var(--tr),color var(--tr);
  -webkit-font-smoothing:antialiased;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.tb{position:fixed;top:0;left:0;right:0;z-index:200;height:66px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--brd);display:flex;align-items:center;padding:0 24px;gap:12px;
  transition:background var(--tr),border-color var(--tr)}
body.dark .tb{background:rgba(27,28,25,.92)}
.tb-mark{width:40px;height:40px;flex-shrink:0;border-radius:12px;
  background:linear-gradient(135deg,var(--g) 0%,var(--g2) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(45,106,79,.28)}
.tb-mark svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tb-info{min-width:0}
.tb-name{font-family:'Playfair Display',serif;font-size:clamp(12.5px,2vw,15.5px);color:var(--txt);letter-spacing:-.2px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-crm{font-size:10px;font-weight:600;color:var(--g);letter-spacing:1.2px;text-transform:uppercase;margin-top:1px}
.tb-pipe{width:1px;height:26px;background:var(--brd);flex-shrink:0}
.tb-tag{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--g);background:var(--gp);padding:3px 11px;border-radius:99px;flex-shrink:0;border:1px solid rgba(82,183,136,.2)}
.tb-sp{flex:1;min-width:4px}
.tb-mh{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1.5px solid var(--brd);border-radius:99px;
  font-size:12px;font-weight:600;color:var(--txt2);background:var(--surf2);text-decoration:none;
  white-space:nowrap;flex-shrink:0;transition:all var(--tr)}
.tb-mh:hover{border-color:var(--g);color:var(--g);background:var(--gp)}
.tb-mh svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tb-btn{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--brd);background:var(--surf2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt2);transition:all var(--tr);flex-shrink:0}
.tb-btn:hover{border-color:var(--g);color:var(--g)}
.tb-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:820px){.tb{padding:0 14px;gap:8px}.tb-pipe,.tb-tag{display:none}.tb-mh span{display:none}.tb-mh{padding:8px}}

/* ── Layout ─────────────────────────────────────────────────────────── */
.wrap{max-width:720px;margin:0 auto;padding:calc(66px + 40px) 24px 0}
@media(max-width:820px){.wrap{padding:calc(66px + 26px) 18px 0}}

.breadcrumb{font-size:12.5px;color:var(--txt3);margin-bottom:22px;line-height:1.6}
.breadcrumb a{color:var(--txt2);text-decoration:none;border-bottom:1px solid var(--brd2)}
.breadcrumb a:hover{color:var(--g);border-color:var(--g)}

/* ── Tipografia do artigo ───────────────────────────────────────────── */
article h1,.wrap>h1{font-family:'Playfair Display',serif;font-weight:400;
  font-size:clamp(28px,5vw,42px);line-height:1.14;letter-spacing:-.5px;
  color:var(--txt);margin-bottom:22px}
article h2{font-family:'Playfair Display',serif;font-weight:600;
  font-size:clamp(20px,3vw,26px);line-height:1.25;letter-spacing:-.2px;
  color:var(--txt);margin:44px 0 14px;padding-top:8px}
article h3{font-size:16.5px;font-weight:600;color:var(--txt);margin:28px 0 8px}
article p{font-size:16.5px;line-height:1.72;color:var(--txt2);margin-bottom:17px}
article p strong,article li strong{color:var(--txt);font-weight:600}
article a{color:var(--g);text-decoration:none;border-bottom:1px solid var(--gl);transition:all var(--tr)}
article a:hover{border-color:var(--g);background:var(--gf)}
article ul,article ol{margin:0 0 20px 20px}
article li{font-size:16.5px;line-height:1.7;color:var(--txt2);margin-bottom:9px}
article ul li::marker{color:var(--g3)}
article em{font-style:italic}
article hr{border:0;border-top:1px solid var(--brd);margin:40px 0 22px}

/* Tabelas */
article table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14.5px;
  background:var(--surf);border:1px solid var(--brd);border-radius:var(--rmd);overflow:hidden}
article th{background:var(--surf2);color:var(--txt);font-weight:600;text-align:left;padding:11px 14px;border-bottom:1px solid var(--brd)}
article td{padding:11px 14px;border-bottom:1px solid var(--brd);color:var(--txt2);vertical-align:top}
article tr:last-child td{border-bottom:0}

/* Bloco de alerta / emergência */
article blockquote{background:var(--ambp);border-left:3px solid var(--amb);
  border-radius:0 var(--rmd) var(--rmd) 0;padding:16px 20px;margin:28px 0}
article blockquote p{color:var(--txt);margin:0;font-size:15.5px}
article blockquote p+p{margin-top:10px}

/* Rodapé de autoria */
.meta-autoria{margin-top:8px;padding:20px 22px;background:var(--surf2);
  border:1px solid var(--brd);border-radius:var(--rmd)}
.meta-autoria p{font-size:13.5px;line-height:1.65;color:var(--txt3);margin-bottom:9px}
.meta-autoria p:last-child{margin-bottom:0}
.meta-autoria strong{color:var(--txt2)}
.meta-autoria a{color:var(--g)}
.meta-autoria ol{margin:6px 0 0 18px}
.meta-autoria li{font-size:12.5px;line-height:1.6;color:var(--txt3);margin-bottom:5px}

/* ── Hubs (/artigos/ e /condicoes/) ─────────────────────────────────── */
.hub-lead{font-size:16.5px;line-height:1.7;color:var(--txt2);margin-bottom:8px}
h2.cat{font-family:'Plus Jakarta Sans',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--g);
  background:none;margin:40px 0 4px;padding:0 0 10px;border-bottom:1px solid var(--brd)}
.lista{list-style:none;padding:0;margin:0}
.lista li{border-bottom:1px solid var(--brd);padding:20px 0}
.lista li:last-child{border-bottom:0}
.lista h3{font-family:'Playfair Display',serif;font-weight:600;font-size:19px;
  line-height:1.28;margin:0 0 7px;letter-spacing:-.2px}
.lista h3 a{color:var(--txt);text-decoration:none;border:0;transition:color var(--tr)}
.lista h3 a:hover{color:var(--g)}
.lista p{margin:0 0 8px;color:var(--txt2);font-size:14.5px;line-height:1.62}

/* ── Rodapé ─────────────────────────────────────────────────────────── */
.art-footer{margin-top:56px;border-top:1px solid var(--brd);padding:30px 0 44px;
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:13px}
.art-footer a{color:var(--txt2);text-decoration:none;border-bottom:1px solid transparent;transition:all var(--tr)}
.art-footer a:hover{color:var(--g);border-color:var(--g)}
.art-cta{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;border-radius:99px;
  background:var(--g);color:#fff !important;font-size:13.5px;font-weight:600;
  text-decoration:none;border:0 !important;box-shadow:0 4px 14px rgba(45,106,79,.22);transition:all var(--tr)}
.art-cta:hover{background:var(--gd);transform:translateY(-1px)}
.art-warn{width:100%;font-size:12px;line-height:1.6;color:var(--txt3);
  background:var(--ambp);border-radius:var(--rsm);padding:12px 15px;margin-top:6px}
.art-warn b{color:var(--amb)}