:root{
  --page-bg:#FFFFFF;
  --surface:#F5F5F3;
  --surface-2:#EFEFEA;
  --navy:#0B2A43;
  --navy-2:#123a5c;
  --ink:#1B2430;
  --ink-soft:#4B5563;
  --teal:#157A6E;
  --teal-dark:#0E5F56;
  --gold:#C08A2E;
  --line:#E4E1D8;
  --line-strong:#CFCABB;
  --radius:14px;
  --shadow: 0 12px 30px -12px rgba(11,42,67,0.18);
  --header-h:64px;

  /* Fontes — ajuste aqui caso a Exametric confirme nomes diferentes */
  --font-display:'Poppins', 'Inter', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--page-bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--navy);
}
.mono{font-family:var(--font-mono); letter-spacing:0.02em;}
a{color:var(--teal-dark);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

@media (prefers-reduced-motion: no-preference){
  .fade-in{animation:fadeIn .3s ease both;}
  .card{transition:transform .18s ease, box-shadow .18s ease;}
  .card:hover{transform:translateY(-2px);}
  .sidebar{transition:transform .25s ease;}
  .backdrop{transition:opacity .2s ease;}
  .tree-row .caret{transition:transform .15s ease;}
  #headerSearchResults{transition:opacity .15s ease, transform .15s ease;}
}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.hidden{display:none !important;}
body.loading-lang{cursor:progress;}

/* ---------- HEADER ---------- */
header.top{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff;
  padding:0 5vw;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:sticky;
  top:0;
  z-index:90;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:#fff;
  cursor:pointer; background:none; border:none; padding:0; flex-shrink:0;
}
.brand .mark{
  width:26px;height:26px;border-radius:7px; background:var(--teal);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-mono);font-size:11px;font-weight:700; flex-shrink:0;
}
.brand small{
  display:block;font-family:var(--font-body);font-weight:500;font-size:0.65rem;
  color:rgba(255,255,255,0.6); letter-spacing:0.04em; text-transform:uppercase;
}
.header-right{display:flex; align-items:center; gap:12px;}

.lang-switch{display:flex; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); border-radius:999px; padding:3px; gap:2px; flex-shrink:0;}
.lang-switch button{border:none;background:transparent;color:rgba(255,255,255,0.65); font-size:0.76rem; font-weight:600; padding:6px 11px; border-radius:999px; display:flex; align-items:center; gap:5px;}
.lang-switch button .dot{width:6px;height:6px;border-radius:50%;border:1.4px solid currentColor; display:inline-block;}
.lang-switch button.active{background:#fff; color:var(--navy);}
.lang-switch button.active .dot{background:var(--teal); border-color:var(--teal);}

.header-search{position:relative; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); border-radius:10px; padding:7px 12px; min-width:210px;}
.header-search input{background:transparent;border:none;color:#fff;font-size:0.85rem;width:100%;}
.header-search input::placeholder{color:rgba(255,255,255,0.45);}
.header-search svg{flex-shrink:0; opacity:0.6;}
#headerSearchResults{
  position:absolute; top:calc(100% + 10px); right:0; width:340px;
  opacity:0; transform:translateY(-4px); pointer-events:none;
}
#headerSearchResults.show{opacity:1; transform:translateY(0); pointer-events:auto;}

.menu-btn{display:none; background:none; border:1px solid var(--line-strong); border-radius:8px; color:var(--navy); padding:7px 9px; align-items:center;}

/* ---------- SHELL / LAYOUT ---------- */
.shell{display:flex; max-width:1200px; margin:0 auto; align-items:flex-start;}
.sidebar{
  width:270px; flex-shrink:0; position:sticky; top:var(--header-h);
  max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  padding:26px 16px 60px 5vw;
}
.tree, .tree ul{list-style:none;margin:0;padding:0;}
.tree ul{padding-left:16px;}
.tree-row{
  display:flex; align-items:center; gap:7px; width:100%; background:none; border:none;
  text-align:left; padding:7px 8px; border-radius:8px; font-size:0.85rem; color:var(--ink);
}
.tree-row:hover{background:var(--surface);}
.tree-row.active{background:var(--navy); color:#fff;}
.tree-row .caret{width:13px;height:13px;flex-shrink:0; color:var(--ink-soft);}
.tree-row.active .caret{color:rgba(255,255,255,0.7);}
.tree-row.expanded .caret{transform:rotate(90deg);}
.tree-row .leaf-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0;}
.tree-row.active .leaf-dot{background:#fff;}
.tree-row .label{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tree-empty{font-size:0.78rem;color:var(--ink-soft);padding:4px 8px 8px 30px;}

.backdrop{position:fixed;inset:0;background:rgba(11,42,67,0.35);z-index:80;opacity:0;pointer-events:none;}
.backdrop.show{opacity:1;pointer-events:auto;}

.content-pane{flex:1; min-width:0; padding:0 5vw 90px 34px; border-left:1px solid var(--line);}
main.full{max-width:1080px; margin:0 auto; padding:0 6vw 90px;}

/* ---------- HERO / HOME ---------- */
.hero{padding:64px 0 40px; text-align:center;}
.hero .eyebrow{font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.14em; color:var(--teal-dark); text-transform:uppercase; margin-bottom:14px; display:block;}
.hero h1{font-size:2.4rem; margin:0 0 14px; line-height:1.12;}
.hero p.sub{color:var(--ink-soft); font-size:1.02rem; max-width:520px; margin:0 auto 28px;}
.search-hero{max-width:560px; margin:0 auto; display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid var(--line-strong); border-radius:12px; padding:14px 18px; box-shadow: var(--shadow);}
.search-hero input{border:none; outline:none; flex:1; font-size:1rem; font-family:var(--font-body); color:var(--ink); background:transparent;}
.search-hero svg{flex-shrink:0; color:var(--ink-soft);}

.search-results{margin:0 auto; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; max-height:360px; overflow-y:auto;}
#homeSearchResults .search-results{max-width:560px; margin-top:14px;}
.search-results .res-item{display:block; padding:13px 18px; border-bottom:1px solid var(--line); font-size:0.9rem; width:100%; background:#fff; border-left:none; border-right:none; border-top:none; text-align:left;}
.search-results .res-item:hover{background:var(--surface);}
.search-results .res-item:last-child{border-bottom:none;}
.search-results .res-item .path{font-family:var(--font-mono); font-size:0.64rem; color:var(--teal-dark); text-transform:uppercase; letter-spacing:0.04em; display:block; margin-bottom:3px;}
.search-results .res-empty{padding:16px 18px; color:var(--ink-soft); font-size:0.9rem;}

.cat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:18px; margin-top:20px;}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; display:flex; flex-direction:column; gap:10px; text-align:left; box-shadow: 0 1px 0 rgba(11,42,67,0.03); width:100%;}
.card .idx{font-family:var(--font-mono); font-size:0.7rem; color:var(--gold); font-weight:600;}
.card .icon{width:36px;height:36px; border-radius:10px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--teal-dark);}
.card h3{font-size:1.05rem; margin:2px 0 0;}
.card p{color:var(--ink-soft); font-size:0.87rem; margin:0; flex:1;}
.card .count{font-size:0.75rem; color:var(--ink-soft); display:flex; align-items:center; gap:6px; margin-top:4px;}
.card .count .bubble{width:6px;height:6px;border-radius:50%; background:var(--teal); display:inline-block;}
button.card{border:1px solid var(--line);}
button.card:hover{border-color:var(--teal);}

/* ---------- BREADCRUMB / SUBHEADER ---------- */
.subheader{display:flex; align-items:center; gap:12px; padding:20px 0 4px; position:sticky; top:var(--header-h); background:var(--page-bg); z-index:40;}
.crumb{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:0.8rem; color:var(--ink-soft);}
.crumb button{background:none;border:none;color:var(--teal-dark); font-size:0.8rem; font-weight:600; padding:0;}
.crumb span.sep{color:var(--line-strong);}
.crumb .current{color:var(--ink); font-weight:600;}

/* ---------- BRANCH VIEW ---------- */
.branch-header{margin:14px 0 18px;}
.branch-header h1{font-size:1.7rem; margin:0 0 6px;}
.branch-header p{color:var(--ink-soft); margin:0; font-size:0.94rem;}

.node-list{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:2px;}
.node-list li{border-bottom:1px solid var(--line);}
.node-list button{width:100%; background:none; border:none; text-align:left; padding:13px 6px; display:flex; align-items:center; gap:12px; font-size:0.95rem; color:var(--ink); border-radius:8px;}
.node-list button:hover{background:var(--surface);}
.node-list .marker{width:16px;height:16px;flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.node-list .marker.leaf-marker{border-radius:50%; border:1.6px solid var(--teal);}
.node-list .marker.branch-marker{color:var(--teal-dark);}
.node-list .badge{margin-left:auto; font-family:var(--font-mono); font-size:0.68rem; color:var(--ink-soft); background:var(--surface); padding:2px 8px; border-radius:999px;}
.node-list .chev{color:var(--ink-soft); opacity:0.6; margin-left:6px;}

.empty-state{padding:22px 18px; border:1.5px dashed var(--line-strong); border-radius:12px; color:var(--ink-soft); font-size:0.9rem; background:var(--surface); margin-top:16px;}

/* ---------- ARTICLE ---------- */
.article-wrap{max-width:700px;}
.article-wrap h1{font-size:1.8rem; margin:14px 0 6px; line-height:1.2;}
.article-meta{font-family:var(--font-mono); font-size:0.7rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:22px; display:block;}
.article-body p{margin:0 0 16px; font-size:1rem; color:var(--ink);}
.article-body ul, .article-body ol{margin:0 0 16px; padding-left:22px;}
.article-body li{margin-bottom:8px;}
.article-body strong{color:var(--navy);}
.article-body .callout{background:var(--surface); border-left:3px solid var(--gold); padding:14px 16px; border-radius:8px; font-size:0.92rem; color:var(--ink-soft); margin:20px 0;}
.fallback-note{background:#FBF3E4; border:1px solid #EBD9AF; color:#7A5A16; padding:10px 14px; border-radius:8px; font-size:0.82rem; margin-bottom:22px;}
.article-nav{display:flex; justify-content:space-between; margin-top:40px; padding-top:20px; border-top:1px solid var(--line);}
.article-nav button{background:none;border:1px solid var(--line); border-radius:8px; padding:9px 16px; font-size:0.85rem; color:var(--navy); font-weight:600;}
.article-nav button:hover{border-color:var(--teal); color:var(--teal-dark);}

/* ---------- FOOTER ---------- */
footer.site{
  background:#0A0A0A; color:rgba(255,255,255,0.65);
  padding:44px 6vw 30px; margin-top:50px;
}
.footer-inner{max-width:1080px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,0.12);}
.footer-brand{display:flex; align-items:center; gap:10px; color:#fff; font-family:var(--font-display); font-weight:600;}
.footer-brand .mark{width:24px;height:24px;border-radius:6px;background:var(--teal);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:700;}
.footer-tagline{font-size:0.82rem; color:rgba(255,255,255,0.5); margin-top:2px;}
.footer-links{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.footer-links a{color:rgba(255,255,255,0.75); font-size:0.85rem; display:flex; align-items:center; gap:7px;}
.footer-links a:hover{color:#fff; text-decoration:none;}
.footer-social{display:flex; gap:10px;}
.footer-social a{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.75);
}
.footer-social a:hover{border-color:var(--teal); color:#fff;}
.footer-copy{max-width:1080px; margin:20px auto 0; font-size:0.75rem; color:rgba(255,255,255,0.4); text-align:center;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .header-search{display:none;}
  .menu-btn{display:flex;}
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; width:82vw; max-width:320px;
    background:var(--page-bg); z-index:85; transform:translateX(-100%);
    padding:calc(var(--header-h) + 20px) 18px 40px;
    box-shadow:var(--shadow); border-right:1px solid var(--line);
  }
  .sidebar.open{transform:translateX(0);}
  .content-pane{padding:0 5vw 70px; border-left:none;}
  .subheader{top:var(--header-h);}
  .footer-inner{flex-direction:column; align-items:flex-start;}
}
@media (max-width:640px){
  .hero{padding:44px 0 28px;}
  .hero h1{font-size:1.8rem;}
  .brand small{display:none;}
}