/* ============ grant learningX1 — sistema de design v4 ============ */
:root{
  /* superfícies em tons quentes de papel */
  --bg:#F3ECDD; --bg-2:#E9DFCA; --card:#FBF7EE; --card-2:#F2EADA;
  --ink:#1C1813; --ink-2:#4B4134; --ink-soft:#6A5D4B; --line:#DCCDAF; --line-2:#E9DDC3;
  /* tinta de destaque */
  --hi:#E3B74F; --hi-soft:#F6E8C4;
  /* a tinta que vai POR CIMA de uma cor cheia: branco no claro, escura no escuro */
  --sobre-forte:#FFFFFF;
  --c1:#0A6A66; --c2:#8A3A1C; --c3:#3D6B4F; --c4:#A1242F; --c5:#0D736E; --c6:#9B4A2A; --c7:#3F7254;
  --c1-bg:#DDEFEC; --c2-bg:#F4E2D8; --c3-bg:#E3EEE6; --c4-bg:#F6DEDF; --c5-bg:#E2F2F0; --c6-bg:#F5E6DC; --c7-bg:#E6F0E9;
  --radius:16px; --radius-s:10px; --maxw:1080px; --rdr:74ch;
  --sh-s:0 1px 2px rgba(28,24,19,.06),0 2px 6px rgba(28,24,19,.05);
  --sh-m:0 2px 4px rgba(28,24,19,.06),0 10px 28px rgba(28,24,19,.09);
  --sh-l:0 4px 8px rgba(28,24,19,.07),0 20px 48px rgba(28,24,19,.13);
  --fd:"Archivo",system-ui,sans-serif; --fb:"Source Serif 4",Georgia,serif; --fm:"Archivo",system-ui,sans-serif;
}
html[data-theme="dark"]{
  --bg:#0B0F17; --bg-2:#070A10; --card:#121826; --card-2:#18202F;
  --ink:#E9E1CF; --ink-2:#C7BEA9; --ink-soft:#9C937F; --line:#283044; --line-2:#1A2131;
  --hi:#C9A24B; --hi-soft:#2E2510; --sobre-forte:#0B0F17;
  --c1:#3FE0D0; --c2:#D9B35F; --c3:#86D3A8; --c4:#F07A80; --c5:#6FE8DB; --c6:#E4C27A; --c7:#A2DEBC;
  --c1-bg:#0E2A2C; --c2-bg:#2A2213; --c3-bg:#13271E; --c4-bg:#2E1518; --c5-bg:#10302F; --c6-bg:#2D2516; --c7-bg:#172C22;
  --sh-s:0 1px 2px rgba(0,0,0,.4); --sh-m:0 4px 18px rgba(0,0,0,.45); --sh-l:0 10px 40px rgba(0,0,0,.55);
}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]){
  --bg:#0B0F17; --bg-2:#070A10; --card:#121826; --card-2:#18202F;
  --ink:#E9E1CF; --ink-2:#C7BEA9; --ink-soft:#9C937F; --line:#283044; --line-2:#1A2131;
  --hi:#C9A24B; --hi-soft:#2E2510; --sobre-forte:#0B0F17;
  --c1:#3FE0D0; --c2:#D9B35F; --c3:#86D3A8; --c4:#F07A80; --c5:#6FE8DB; --c6:#E4C27A; --c7:#A2DEBC;
  --c1-bg:#0E2A2C; --c2-bg:#2A2213; --c3-bg:#13271E; --c4-bg:#2E1518; --c5-bg:#10302F; --c6-bg:#2D2516; --c7-bg:#172C22;
  --sh-s:0 1px 2px rgba(0,0,0,.4); --sh-m:0 4px 18px rgba(0,0,0,.45); --sh-l:0 10px 40px rgba(0,0,0,.55);
}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
body{background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:clamp(1.02rem,.97rem + .3vw,1.16rem);line-height:1.72;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body,nav,.card,.box,details,.tw,td,th,.tl-i::before,.alegoria,.se-i,.ficha,.quote,.toc a{transition:background-color .3s,border-color .3s,color .3s,box-shadow .3s}
a{color:var(--c1);text-underline-offset:3px;text-decoration-thickness:1px}
::selection{background:var(--hi);color:#1A1013}
p,li,summary,h1,h2,h3,h4{overflow-wrap:break-word}
img{max-width:100%}

/* ====== fundo decorativo sutil (grade de caderno) ====== */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px);background-size:100% 30px;opacity:.45}
html[data-theme="dark"] body::before,html:not([data-theme="light"]) body::before{opacity:.16}

/* ====== NAV ====== */
nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid var(--line)}
@supports not (backdrop-filter:blur(1px)){nav{background:var(--bg)}}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:.6rem max(1rem,env(safe-area-inset-left));display:flex;align-items:center;gap:.5rem;overflow-x:auto;scrollbar-width:none;position:relative}
.nav-in::-webkit-scrollbar{display:none}
.brand{font-family:var(--fd);font-weight:800;font-stretch:88%;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;color:var(--ink);text-decoration:none;margin-right:.3rem;display:flex;align-items:center;gap:.5rem;flex:none}
.brand .mark{width:26px;height:26px;border-radius:8px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:.95rem;font-weight:900;transform:rotate(-4deg);box-shadow:var(--sh-s)}
.brand b{font-weight:800}.brand .x1{color:var(--c5)}
/* A barra de cima rola para o lado no celular. No kamim ela tem 43 abas de
   capítulo, e Tema, Foco e o botão de modo ficavam lá no fim (07/10/2026):
   agora vêm logo depois da logo, antes das abas. A logo fica PARADA no
   começo da barra e sai junto quando se arrasta para o lado. Presa por
   cima (sticky) ela cobria os botões, e o dono reprovou (08/10/2026). */
.nav-in>.brand,.nav-in>.brand-blog{order:-3}
/* "blog" ao lado da marca (dono, 09/10/2026: "no lado do Colossus Brain 3, o
   blog, escrito blog, bonito, mas sem deixar um png"). É TEXTO, na fonte da
   marca, e anda junto com ela: parada no começo da barra, sai quando se
   arrasta para o lado. O traço antes dele separa sem virar botão. */
.brand-blog{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;flex:none;
  margin:0 .35rem 0 -.15rem;padding:0 .35rem 0 0;font-family:var(--fd);font-weight:800;
  font-stretch:88%;font-size:.95rem;letter-spacing:-.01em;white-space:nowrap;
  color:var(--c2);text-decoration:none}
.brand-blog::before{content:"";width:1.5px;height:1.05em;background:var(--line);border-radius:2px}
.brand-blog:hover{color:var(--c1)}
.nav-in>.prog-ring,.nav-in>.streak,.nav-in>.exam-btn,.nav-in>.nav-tool,
.nav-in>.theme-btn{order:-2}
nav a.tab{font-family:var(--fm);font-size:.7rem;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;white-space:nowrap;padding:.4rem .7rem;border-radius:999px;border:1px solid transparent;flex:none}
nav a.tab:hover{border-color:var(--line);background:var(--card);color:var(--ink)}
nav a.tab.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.theme-btn{margin-left:auto;flex:none;background:var(--card);border:1px solid var(--line);color:var(--ink);font-family:var(--fm);font-size:.7rem;font-weight:500;padding:.4rem .65rem;border-radius:999px;cursor:pointer;white-space:nowrap;box-shadow:var(--sh-s)}
.theme-btn:hover{border-color:var(--c1)}
.theme-btn:focus-visible,a:focus-visible,summary:focus-visible,.totop:focus-visible{outline:3px solid var(--c1);outline-offset:2px;border-radius:6px}

/* barra de progresso de leitura */
#bar{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c5));z-index:60;will-change:transform;transition:transform .12s linear}

/* ====== HERO ====== */
header{max-width:var(--maxw);margin:0 auto;padding:clamp(2.5rem,6vw,5.5rem) max(1rem,env(safe-area-inset-left)) clamp(1.5rem,4vw,3rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--fm);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);background:var(--card);border:1px solid var(--line);padding:.4rem .8rem;border-radius:999px;box-shadow:var(--sh-s)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--c3);box-shadow:0 0 0 3px color-mix(in srgb,var(--c3) 25%,transparent)}
h1{font-family:var(--fd);font-weight:900;font-stretch:86%;line-height:1.0;letter-spacing:-.025em;font-size:clamp(2.5rem,1.3rem + 6vw,5rem);margin:1.1rem 0 1.3rem;text-wrap:balance}
.hl{background:linear-gradient(105deg,transparent 1%,var(--hi) 2.5%,var(--hi) 97.5%,transparent 99%);color:#1A1013;padding:0 .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:2px}
.lead{max-width:64ch;font-size:clamp(1.08rem,1rem + .45vw,1.3rem);color:var(--ink-2)}
.hero-tags{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.8rem}
.hero-tags span{font-family:var(--fm);font-size:.7rem;letter-spacing:.03em;text-transform:uppercase;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.45rem .8rem;color:var(--ink-2);box-shadow:var(--sh-s)}
.hero-tags span i{font-style:normal;display:inline-block;width:.6em;height:.6em;border-radius:50%;margin-right:.45em}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-top:2.4rem}
.hero-stats .s{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--sh-s)}
.hero-stats .s b{display:block;font-family:var(--fd);font-weight:900;font-stretch:85%;font-size:1.8rem;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.hero-stats .s span{font-size:.86em;color:var(--ink-soft)}

/* ====== MAIN ====== */
main{max-width:var(--maxw);margin:0 auto;padding:0 max(1rem,env(safe-area-inset-left)) 4rem}
section.cap{margin-top:clamp(3.5rem,8vw,6rem);scroll-margin-top:96px}

/* ===== busca interna ===== */
.search-wrap{max-width:var(--maxw);margin:0 auto;padding:.9rem max(1rem,env(safe-area-inset-left)) 0}
.search-box{position:relative;display:flex;align-items:center}
.search-box svg{position:absolute;left:.9rem;width:17px;height:17px;color:var(--ink-soft);pointer-events:none}
#q{width:100%;font-family:var(--fb);font-size:1rem;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.7rem 2.6rem;box-shadow:var(--sh-s)}
#q::placeholder{color:var(--ink-soft)}
#q:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 22%,transparent)}
.search-clear{position:absolute;right:.6rem;background:none;border:none;color:var(--ink-soft);font-size:1.3rem;cursor:pointer;padding:.2rem .4rem;line-height:1;display:none}
.search-clear:hover{color:var(--ink)}
.search-info{max-width:var(--maxw);margin:.5rem auto 0;padding:0 max(1rem,env(safe-area-inset-left));font-family:var(--fm);font-size:.74rem;color:var(--ink-soft);min-height:1rem}
mark.hit{background:var(--hi);color:#1A1013;border-radius:3px;padding:0 .1em}

/* ===== Modo Véspera de Prova ===== */
#examRoom{display:none;max-width:var(--maxw);margin:0 auto;padding:0 max(1rem,env(safe-area-inset-left)) 4rem}
body.exam-mode #examRoom{display:block}
body.exam-mode main,body.exam-mode header,body.exam-mode .search-wrap,body.exam-mode .search-info,body.exam-mode footer{display:none}
.exam-banner{max-width:var(--maxw);margin:1.2rem auto 1.5rem;padding:1.1rem 1.3rem;background:var(--c4-bg);border:1px solid var(--c4);border-left:5px solid var(--c4);border-radius:var(--radius);color:var(--ink);box-shadow:var(--sh-s)}
.exam-banner b{font-family:var(--fd);font-weight:800;display:block;margin-bottom:.25rem;font-size:1.05rem}
.exam-room-title{font-family:var(--fm);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:1.8rem 0 .4rem;display:block}
.exam-btn{flex:none;background:var(--c4);border:1px solid var(--c4);color:var(--sobre-forte,#FFFFFF);font-family:var(--fm);font-size:.7rem;font-weight:600;padding:.4rem .7rem;border-radius:999px;cursor:pointer;white-space:nowrap;box-shadow:var(--sh-s);text-transform:uppercase;letter-spacing:.04em}
.exam-btn:hover{filter:brightness(1.08)}
.exam-btn.on{background:var(--ink);border-color:var(--ink)}

/* ===== widgets interativos ===== */
.widget{background:var(--card-2);border:1px dashed var(--pc,var(--c1));border-radius:var(--radius);padding:1.1rem 1.2rem;margin:1.2rem 0}
.widget .wt{font-family:var(--fm);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pc,var(--c1));display:block;margin-bottom:.6rem}
.widget button.act{font-family:var(--fd);font-weight:700;font-size:.92rem;background:var(--pc,var(--c1));color:var(--sobre-forte,#FFFFFF);border:none;border-radius:999px;padding:.5rem 1.1rem;cursor:pointer;box-shadow:var(--sh-s)}
.widget button.act:hover{filter:brightness(1.08)}
.widget button.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.major-out{font-family:var(--fm);font-weight:600;font-size:2rem;letter-spacing:.12em;color:var(--ink);margin:.3rem 0;min-height:1.4em;text-align:center}
.major-hint{font-size:.9em;color:var(--ink-2);margin-top:.4rem}
.major-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;justify-content:center}
.fc{perspective:1000px;margin:.4rem auto;max-width:340px}
.fc-inner{position:relative;width:100%;min-height:120px;cursor:pointer;transform-style:preserve-3d;transition:transform .5s}
.fc.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;text-align:center;padding:1.1rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-s)}
.fc-face .lab{position:absolute;top:.55rem;left:.7rem;font-family:var(--fm);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.fc-front{font-family:var(--fd);font-weight:700;font-size:1.15rem;color:var(--ink)}
.fc-back{transform:rotateY(180deg);background:var(--c7-bg);font-size:1rem;color:var(--ink)}
.fc-tip{text-align:center;font-size:.82em;color:var(--ink-soft);margin-top:.5rem;font-family:var(--fm)}
.cap-head{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-bottom:.5rem}
.cap-num{font-family:var(--fm);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;color:#fff;box-shadow:var(--sh-s)}
.cap-rule{height:3px;border-radius:3px;background:var(--pc,var(--c1));margin:.2rem 0 1.3rem;width:64px}
h2{font-family:var(--fd);font-weight:900;font-stretch:86%;letter-spacing:-.02em;line-height:1.06;font-size:clamp(1.85rem,1.3rem + 2.6vw,3rem);text-wrap:balance}
.cap-sub{color:var(--ink-2);max-width:66ch;margin:.6rem 0 1.4rem;font-size:1.04em}
.toc{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 2rem;padding:1rem 1.1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-s)}
.toc b{flex-basis:100%;font-family:var(--fm);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.1rem}
.toc a{font-family:var(--fm);font-size:.74rem;text-decoration:none;color:var(--ink-2);background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:.32rem .7rem}
.toc a:hover{border-color:var(--pc,var(--c1));color:var(--pc,var(--c1))}

h3{font-family:var(--fd);font-weight:800;font-stretch:90%;font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem);letter-spacing:-.015em;margin:2.6rem 0 .8rem;line-height:1.18;display:flex;flex-direction:column}
h3 .step{font-family:var(--fm);font-weight:600;font-size:.72rem;letter-spacing:.08em;color:var(--pc,var(--c1));margin-bottom:.35rem;text-transform:uppercase}
h4{font-family:var(--fd);font-weight:700;font-size:1.05rem;margin:1.5rem 0 .4rem;letter-spacing:-.01em}
p{margin:.75rem 0;max-width:var(--rdr)}
ul,ol{margin:.75rem 0 1rem 1.35rem;max-width:var(--rdr)}
li{margin:.5rem 0}
li::marker{color:var(--pc,var(--c1));font-weight:600}
ul li::marker{color:var(--ink-soft)}
strong{font-weight:700;color:var(--ink)}
.lvl{display:inline-block;font-family:var(--fm);font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);margin-left:.5rem;vertical-align:middle;background:var(--card)}

/* fichas/cards */
.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr));margin:1.4rem 0}
.ficha{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;position:relative;overflow:hidden;box-shadow:var(--sh-s)}
.ficha:hover{box-shadow:var(--sh-m);transform:translateY(-2px)}
.ficha{transition:box-shadow .25s,transform .25s}
.ficha::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--pc,var(--c1))}
.ficha .tag{font-family:var(--fm);font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pc,var(--c1));display:block;margin-bottom:.15rem}
.ficha h4{margin:.1rem 0 .3rem}
.ficha p,.ficha li{font-size:.93em;color:var(--ink-2)}

/* numerais grandes decorativos */

/* caixas */
.box{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--pc,var(--c1));border-radius:var(--radius-s);padding:1.1rem 1.3rem;margin:1.4rem 0;box-shadow:var(--sh-s)}
.box.alert{--pc:var(--c4);background:var(--c4-bg)}
.box.gold{border-left-color:var(--c5);background:var(--hi-soft)}
.box .bt{font-family:var(--fm);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:.4rem;color:var(--ink-soft)}
.box p{max-width:none}

.alegoria{background:var(--card-2);border:1.5px dashed var(--ink-soft);border-radius:var(--radius);padding:1.2rem 1.4rem;margin:1.6rem 0;font-style:italic;color:var(--ink);max-width:var(--rdr)}
.alegoria .bt{font-style:normal;font-family:var(--fm);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pc,var(--c1));display:block;margin-bottom:.3rem}

.quote{border-left:4px solid var(--hi);background:var(--card-2);border-radius:0 var(--radius-s) var(--radius-s) 0;padding:.85rem 1.2rem;margin:1.4rem 0;font-style:italic;font-size:1.04em;max-width:var(--rdr)}
.quote cite{display:block;font-style:normal;font-family:var(--fm);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-top:.45rem}

/* cenários "E SE" */
.se{display:grid;gap:.8rem;margin:1.5rem 0;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.se-i{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem 1.05rem 1.1rem;box-shadow:var(--sh-s);position:relative}
.se-i::before{content:"E SE…";font-family:var(--fm);font-size:.6rem;font-weight:600;letter-spacing:.06em;color:var(--sobre-forte,#FFFFFF);background:var(--pc,var(--c1));padding:.22rem .5rem;border-radius:6px;display:inline-block;margin-bottom:.5rem}
.se-i b{font-family:var(--fd);font-weight:700;display:block;margin-bottom:.2rem;font-size:1rem;letter-spacing:-.01em}
.se-i p{margin:.25rem 0;font-size:.92em;color:var(--ink-2);max-width:none}

/* acordeões */
details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin:.7rem 0;overflow:hidden;box-shadow:var(--sh-s)}
summary{cursor:pointer;list-style:none;padding:.95rem 1.2rem;font-family:var(--fd);font-weight:700;font-size:1rem;display:flex;align-items:center;gap:.7rem;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--pc,var(--c1));position:relative;transition:background .2s}
summary::after{content:"";position:absolute;left:1.2rem;margin-left:5px;width:8px;height:2px;background:var(--pc,var(--c1));box-shadow:0 0 0 0 transparent}
summary{position:relative}
details summary::after{content:"+";background:none;font-family:var(--fm);color:var(--pc,var(--c1));width:auto;height:auto;left:1.38rem;margin-left:0;font-size:.9rem;font-weight:600;line-height:1;top:50%;transform:translateY(-50%)}
details summary::before{border-color:var(--pc,var(--c1))}
details[open] summary::after{content:"–"}
details[open] summary{border-bottom:1px solid var(--line-2)}
.din{padding:.5rem 1.2rem 1.1rem}
.din p,.din li{font-size:.95em}
.din p:first-child{margin-top:.5rem}

/* tabelas */
.tw{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--sh-s);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:.93em;table-layout:auto;overflow-wrap:break-word}
th{font-family:var(--fm);font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:left;background:var(--ink);color:var(--bg);padding:.7rem .9rem}
td{padding:.7rem .9rem;border-top:1px solid var(--line-2);vertical-align:top;color:var(--ink-2)}
td:first-child{font-family:var(--fd);font-weight:700;color:var(--ink)}
tr:nth-child(even) td{background:var(--card-2)}

kbd{font-family:var(--fm);font-size:.82em;background:var(--card-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:.06em .42em}

/* timeline */
.tl{border-left:3px solid var(--pc,var(--c1));margin:1.6rem 0 1.6rem .4rem;padding-left:1.4rem}
.tl-i{position:relative;margin:0 0 1.5rem}
.tl-i:last-child{margin-bottom:0}
.tl-i::before{content:"";position:absolute;left:-1.97rem;top:.4em;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--pc,var(--c1));box-shadow:0 0 0 3px var(--bg)}
.tl-i .tt{font-family:var(--fm);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pc,var(--c1))}
.tl-i h4{margin:.2rem 0 .3rem}
.tl-i p,.tl-i li{font-size:.95em;margin-top:.2rem}

/* fluxo caderno→anki (passos horizontais) */
.flow{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));margin:1.5rem 0;counter-reset:fl}
.flow .st{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem 1.2rem;box-shadow:var(--sh-s);position:relative}
.flow .st::before{counter-increment:fl;content:counter(fl);font-family:var(--fd);font-weight:900;font-size:1.5rem;color:var(--sobre-forte,#FFFFFF);background:var(--pc,var(--c1));width:2rem;height:2rem;border-radius:9px;display:grid;place-items:center;margin-bottom:.6rem;box-shadow:var(--sh-s)}
.flow .st h4{margin:0 0 .25rem}
.flow .st p{font-size:.9em;margin:.15rem 0;color:var(--ink-2);max-width:none}

/* cores por capítulo */
#cerebro{--pc:var(--c2)} #cerebro .cap-num{background:var(--c2)}
#idiomas{--pc:var(--c1)} #idiomas .cap-num{background:var(--c1)}
#memoria{--pc:var(--c2)} #memoria .cap-num{background:var(--c2)}
#ferramentas{--pc:var(--c6)} #ferramentas .cap-num{background:var(--c6)}
#ultra{--pc:var(--c3)} #ultra .cap-num{background:var(--c3)}
#xadrez{--pc:var(--c4)} #xadrez .cap-num{background:var(--c4)}
#provas{--pc:var(--c5)} #provas .cap-num{background:var(--c5)}
#anki{--pc:var(--c7)} #anki .cap-num{background:var(--c7)}
#escrita{--pc:var(--c1)} #escrita .cap-num{background:var(--c1)}
#polimata{--pc:var(--c5)} #polimata .cap-num{background:var(--c5)}
#calculo{--pc:var(--c3)} #calculo .cap-num{background:var(--c3)}
#persuasao{--pc:var(--c4)} #persuasao .cap-num{background:var(--c4)}
#objetivos{--pc:var(--c6)} #objetivos .cap-num{background:var(--c6)}
#ler{--pc:var(--c2)} #ler .cap-num{background:var(--c2)}

/* ===== componentes especiais do Capítulo 13 (Ler & Acelerar) ===== */
.ler-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--c2) 12%,var(--card)),color-mix(in srgb,var(--c1) 10%,var(--card)));border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.6rem;margin:1.4rem 0;position:relative;overflow:hidden}
.ler-hero::after{content:"";position:absolute;top:-40%;right:-10%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c2) 22%,transparent),transparent 70%);pointer-events:none}
.ler-hero h4{font-family:var(--fd);font-weight:800;font-size:1.15rem;margin:0 0 .4rem;color:var(--ink)}
.ler-hero p{margin:.3rem 0;position:relative;z-index:1}
/* velocímetro de leitura */
.speedo{display:grid;gap:.7rem;margin:1.4rem 0}
.speedo-row{display:grid;grid-template-columns:5.6rem 1fr;grid-template-areas:"lab bar" ". val";align-items:center;gap:.3rem .8rem}
@media (min-width:760px){.speedo-row{grid-template-columns:6rem 1fr minmax(0,17rem);grid-template-areas:"lab bar val"}}
.speedo-lab{grid-area:lab;font-family:var(--fm);font-size:.78rem;font-weight:600;color:var(--ink)}
.speedo-bar{grid-area:bar;height:22px;border-radius:999px;background:var(--card-2);border:1px solid var(--line);overflow:hidden;position:relative}
.speedo-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--c3),var(--c5))}
.speedo-fill.warn{background:linear-gradient(90deg,var(--c5),var(--c4))}
.speedo-fill.bad{background:linear-gradient(90deg,var(--c4),#8a2a1f)}
.speedo-val{grid-area:val;font-family:var(--fm);font-size:.74rem;color:var(--ink-2);text-align:left}
@media (min-width:760px){.speedo-val{text-align:right}}
/* roadmap cronograma */
.road{position:relative;margin:1.5rem 0;padding-left:0}
.road-step{display:grid;grid-template-columns:auto 1fr;gap:1rem;margin:0 0 1rem;align-items:stretch}
.road-when{font-family:var(--fd);font-weight:900;font-stretch:85%;font-size:.82rem;letter-spacing:-.01em;color:var(--sobre-forte,#FFFFFF);background:var(--pc,var(--c2));border-radius:12px;padding:.7rem .6rem;display:grid;place-items:center;text-align:center;min-width:74px;line-height:1.1}
.road-body{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--pc,var(--c2));border-radius:var(--radius-s);padding:.9rem 1.1rem;box-shadow:var(--sh-s)}
.road-body h4{margin:0 0 .25rem;font-family:var(--fd);font-weight:700;font-size:1.02rem}
.road-body p{margin:.2rem 0;font-size:.93em;color:var(--ink-2);max-width:none}
/* pílulas de nível */
.levels{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0}
.levels .lv-pill{font-family:var(--fm);font-size:.72rem;font-weight:600;padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);display:flex;align-items:center;gap:.4rem}
.levels .lv-pill b{color:var(--pc,var(--c2));font-weight:800}
/* grid de princípios numerados grandes */
.principles{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin:1.4rem 0;counter-reset:pr}
.principle{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem 1.2rem;box-shadow:var(--sh-s);position:relative;overflow:hidden}
.principle::before{counter-increment:pr;content:counter(pr,decimal-leading-zero);position:absolute;top:.4rem;right:.6rem;font-family:var(--fd);font-weight:900;font-stretch:80%;font-size:2.6rem;color:color-mix(in srgb,var(--pc,var(--c2)) 16%,transparent);line-height:1}
.principle h4{margin:.1rem 0 .35rem;font-family:var(--fd);font-weight:700;font-size:1.04rem;position:relative;z-index:1;padding-right:2rem}
.principle p{margin:0;font-size:.92em;color:var(--ink-2)}

footer{border-top:3px solid var(--ink);margin:4rem auto 0;max-width:var(--maxw);padding:2.5rem max(1rem,env(safe-area-inset-left)) 4rem;color:var(--ink-2);font-size:.93em}
footer h3{margin-top:0;flex-direction:row}
footer .bt{font-family:var(--fm);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:block;margin:1.4rem 0 .4rem}
.totop{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));background:var(--ink);color:var(--bg);text-decoration:none;font-family:var(--fm);font-size:.78rem;padding:.6rem .85rem;border-radius:999px;box-shadow:var(--sh-m);opacity:.92;z-index:40}
.totop:hover{opacity:1}

/* ====== responsivo ====== */
@media (min-width:1280px){:root{--maxw:1140px}body{font-size:1.18rem}}
@media (min-width:1700px){:root{--maxw:1220px}}
@media (min-width:760px) and (max-width:1100px){.grid,.se{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  body{line-height:1.66}
  h3{margin-top:2.1rem}
  table{min-width:440px;font-size:.86em}
  th,td{padding:.55rem .65rem}
  .toc,.box,.alegoria,.din,.se-i,.ficha,.flow .st{padding-left:1rem;padding-right:1rem}
  .tl{padding-left:1.1rem;margin-left:.3rem}
  .tl-i::before{left:-1.72rem;width:12px;height:12px}
  summary{padding:.85rem 1rem;font-size:.95rem;gap:.5rem}
  .din{padding:.4rem 1rem 1rem}
  ul,ol{margin-left:1.2rem}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  footer{padding-bottom:5rem}
}
@media (max-width:380px){
  html{font-size:15px}
  table{min-width:360px;font-size:.8em}
  .hero-tags span{font-size:.62rem;padding:.35rem .55rem}
  .hero-stats{grid-template-columns:1fr}
  summary{font-size:.9rem}
}
@media print{nav,.totop,#bar,.theme-btn{display:none}body{background:#fff}body::before{display:none}.ficha,.box,details,.se-i{box-shadow:none;break-inside:avoid}}
/* callout de defesa dentro das táticas perigosas */
.din .defesa{display:block;margin-top:.7rem;padding:.7rem .9rem;background:color-mix(in srgb,var(--c3) 12%,var(--card));border-left:3px solid var(--c3);border-radius:8px;font-size:.93em}
.din p{margin:.45rem 0}

/* ===== refinamentos estéticos (mais moderno e satisfatório) ===== */
/* nav: indicador ativo mais elegante */
nav a.tab{transition:background .2s,color .2s,border-color .2s,transform .15s}
nav a.tab:active{transform:scale(.96)}
nav a.tab.on{box-shadow:0 2px 8px color-mix(in srgb,var(--ink) 25%,transparent)}
/* hero: leve refino tipográfico */
h1{letter-spacing:-.03em}
/* cap-num: contraste garantido + leve profundidade */
.cap-num{text-shadow:0 1px 2px rgba(0,0,0,.18)}
/* dark: acentos com texto branco precisam de leve sombra para legibilidade */
html[data-theme="dark"] .cap-num,html:not([data-theme="light"]) .cap-num{text-shadow:0 1px 3px rgba(0,0,0,.45)}
/* cards: micro-elevação no hover mais suave e satisfatória */
.ficha,.box,details,.se-i,.principle,.road-body{transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.principle:hover,.road-body:hover{transform:translateY(-2px);box-shadow:var(--sh-m)}
/* details: abertura mais suave */
details[open]{animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:.4}to{opacity:1}}
/* toc: links com leve destaque ao passar */
.toc a{transition:background .2s,color .2s,border-color .2s,transform .15s}
.toc a:hover{transform:translateY(-1px)}
/* scroll suave entre seções já existe; reforço de foco visível para acessibilidade */
:focus-visible{outline:2.5px solid var(--c1);outline-offset:3px;border-radius:6px}
/* seleção de texto na cor do tema */
::selection{background:var(--hi);color:#1A1013}
/* botões do topo e tema: micro-feedback */
.theme-btn,.exam-btn,.totop{transition:transform .15s,filter .2s,border-color .2s,background .2s}
.theme-btn:active,.exam-btn:active,.totop:active{transform:scale(.95)}
/* quote: aspas decorativas modernas */
.quote{position:relative}
.quote::before{content:"\201C";position:absolute;top:-.3rem;left:.4rem;font-family:var(--fd);font-size:2.4rem;font-weight:900;color:color-mix(in srgb,var(--hi) 55%,transparent);line-height:1;pointer-events:none}
.quote{padding-left:1.8rem}
/* alegoria: leve gradiente para profundidade */
.alegoria{background:linear-gradient(135deg,var(--card-2),color-mix(in srgb,var(--pc,var(--c1)) 6%,var(--card-2)))}
/* hr visual entre grandes blocos via cap-rule mais expressiva */
.cap-rule{height:4px;background:linear-gradient(90deg,var(--pc,var(--c1)),color-mix(in srgb,var(--pc,var(--c1)) 30%,transparent))}
/* tabelas: cabeçalho com leve gradiente */
th{background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 88%,#000))}
/* melhora leitura: largura de medida um tico maior em telas grandes */
@media (min-width:1280px){:root{--rdr:76ch}}
/* barra de busca: foco mais vivo */
#q:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 25%,transparent),var(--sh-s)}
/* hero stats: hover sutil */
.hero-stats .s{transition:transform .2s,box-shadow .2s}
.hero-stats .s:hover{transform:translateY(-2px);box-shadow:var(--sh-m)}
/* ===== tracker de progresso + polimentos finais ===== */
/* marcar capítulo como concluído */
.cap-done{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fm);font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem;cursor:pointer;transition:all .2s;white-space:nowrap}
.cap-done:hover{border-color:var(--pc,var(--c1));color:var(--pc,var(--c1))}
.cap-done .chk{width:15px;height:15px;border-radius:5px;border:2px solid var(--ink-soft);display:grid;place-items:center;transition:all .2s;flex:none}
.cap-done[aria-pressed="true"]{background:color-mix(in srgb,var(--c3) 14%,var(--card));border-color:var(--c3);color:var(--c3)}
.cap-done[aria-pressed="true"] .chk{background:var(--c3);border-color:var(--c3)}
.cap-done[aria-pressed="true"] .chk::after{content:"✓";color:#fff;font-size:.7rem;font-weight:900;line-height:1}
section.cap.is-done > .cap-head h2{opacity:.7}
section.cap.is-done > .cap-head::after{content:"✓ concluído";font-family:var(--fm);font-size:.62rem;font-weight:600;color:var(--c3);letter-spacing:.05em;text-transform:uppercase;align-self:center}
/* anel de progresso geral no nav */
.prog-ring{flex:none;display:flex;align-items:center;gap:.5rem;font-family:var(--fm);font-size:.68rem;font-weight:600;color:var(--ink-2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.3rem .5rem .3rem .35rem;cursor:default;box-shadow:var(--sh-s)}
.prog-ring svg{width:26px;height:26px;transform:rotate(-90deg);flex:none}
.prog-ring .ring-bg{fill:none;stroke:var(--line);stroke-width:3}
.prog-ring .ring-fg{fill:none;stroke:var(--c3);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .5s ease}
.prog-ring b{color:var(--c3);font-weight:800}
/* dica de teclado discreta */
/* totop: aparece só ao rolar, com fade */
.totop{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .3s,visibility .3s,filter .2s}
.totop.show{opacity:.92;visibility:visible;transform:translateY(0)}
/* celebração ao completar tudo */
.all-done-banner{display:none;position:fixed;left:50%;bottom:5.5rem;transform:translateX(-50%);z-index:45;background:linear-gradient(135deg,var(--c3),var(--c6));color:var(--sobre-forte,#FFFFFF);font-family:var(--fd);font-weight:700;font-size:.95rem;padding:.8rem 1.4rem;border-radius:999px;box-shadow:var(--sh-l);max-width:90vw;text-align:center}
.all-done-banner.show{display:block;animation:popUp .5s ease}
@keyframes popUp{from{opacity:0;transform:translate(-50%,15px)}to{opacity:1;transform:translate(-50%,0)}}
/* ===== X3: Gerador de Plano de Ultra-Aprendizagem (sessão interativa) ===== */
.forge{background:linear-gradient(150deg,color-mix(in srgb,var(--c2) 13%,var(--card)),color-mix(in srgb,var(--c6) 11%,var(--card)) 60%,color-mix(in srgb,var(--c5) 10%,var(--card)));border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);padding:clamp(1.3rem,3vw,2.2rem);margin:1.6rem 0;position:relative;overflow:hidden;box-shadow:var(--sh-m)}
.forge::before{content:"";position:absolute;top:-30%;right:-8%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c2) 20%,transparent),transparent 70%);pointer-events:none}
.forge::after{content:"";position:absolute;bottom:-25%;left:-10%;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c6) 18%,transparent),transparent 70%);pointer-events:none}
.forge-head{position:relative;z-index:1;margin-bottom:1.3rem}
.forge-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fm);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sobre-forte,#FFFFFF);background:linear-gradient(135deg,var(--c2),var(--c6));padding:.4rem .85rem;border-radius:999px;box-shadow:var(--sh-s)}
.forge h3{margin:.7rem 0 .3rem;flex-direction:column}
.forge-q{position:relative;z-index:1;margin:1.2rem 0}
.forge-q>label{display:block;font-family:var(--fd);font-weight:700;font-size:1rem;margin-bottom:.6rem;color:var(--ink)}
.forge-q .qnum{font-family:var(--fm);font-size:.74rem;color:var(--c2);font-weight:600;margin-right:.4rem}
.opt-row{display:flex;flex-wrap:wrap;gap:.55rem}
.opt{font-family:var(--fb);font-size:.92rem;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:.6rem 1rem;cursor:pointer;transition:all .18s;user-select:none;display:inline-flex;align-items:center;gap:.45rem}
.opt:hover{border-color:var(--c2);transform:translateY(-2px);box-shadow:var(--sh-s)}
.opt.sel{background:color-mix(in srgb,var(--c2) 14%,var(--card));border-color:var(--c2);color:var(--c2);font-weight:600}
.opt.sel::before{content:"✓";font-weight:900;font-size:.85em}
.forge-input{width:100%;font-family:var(--fb);font-size:1.02rem;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:.75rem 1rem;transition:border .2s,box-shadow .2s}
.forge-input::placeholder{color:var(--ink-soft)}
.forge-input:focus{outline:none;border-color:var(--c2);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2) 22%,transparent)}
.forge-go{position:relative;z-index:1;margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.forge-btn{font-family:var(--fd);font-weight:800;font-size:1rem;color:var(--sobre-forte,#FFFFFF);background:linear-gradient(135deg,var(--c2),var(--c6));border:none;border-radius:999px;padding:.8rem 1.6rem;cursor:pointer;box-shadow:var(--sh-m);transition:transform .15s,filter .2s}
.forge-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.forge-btn:active{transform:scale(.97)}
.forge-btn[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}
.forge-reset{font-family:var(--fm);font-size:.8rem;color:var(--ink-soft);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.forge-reset:hover{color:var(--ink)}
/* resultado do plano */
.plan{position:relative;z-index:1;margin-top:1.6rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;box-shadow:var(--sh-m);animation:planIn .45s ease}
@keyframes planIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.plan-title{font-family:var(--fd);font-weight:900;font-stretch:88%;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:.2rem;line-height:1.15}
.plan-sub{font-family:var(--fm);font-size:.76rem;color:var(--ink-soft);margin-bottom:1.1rem;text-transform:uppercase;letter-spacing:.04em}
.plan-phase{display:grid;grid-template-columns:auto 1fr;gap:.9rem;margin:0 0 .9rem;align-items:start}
.plan-phase:last-child{margin-bottom:0}
.plan-dot{font-family:var(--fd);font-weight:900;font-size:.78rem;color:var(--sobre-forte,#FFFFFF);background:var(--c2);width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;margin-top:.1rem}
.plan-phase:nth-child(2) .plan-dot{background:var(--c1)}
.plan-phase:nth-child(3) .plan-dot{background:var(--c6)}
.plan-phase:nth-child(4) .plan-dot{background:var(--c3)}
.plan-phase:nth-child(5) .plan-dot{background:var(--c5)}
.plan-phase:nth-child(6) .plan-dot{background:var(--c4)}
.plan-phase:nth-child(7) .plan-dot{background:var(--c7)}
.plan-phase h4{margin:0 0 .2rem;font-family:var(--fd);font-weight:700;font-size:1.02rem;color:var(--ink)}
.plan-phase p{margin:.15rem 0;font-size:.92em;color:var(--ink-2);max-width:none}
.plan-phase .ref{font-family:var(--fm);font-size:.72rem;color:var(--c2);font-weight:600}
.plan-foot{margin-top:1.2rem;padding-top:1rem;border-top:1px dashed var(--line);font-size:.9em;color:var(--ink-2)}
.plan-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.plan-tools a{font-family:var(--fm);font-size:.74rem;text-decoration:none;color:var(--c2);background:color-mix(in srgb,var(--c2) 10%,var(--card));border:1px solid color-mix(in srgb,var(--c2) 30%,transparent);border-radius:999px;padding:.3rem .7rem;transition:all .18s}
.plan-tools a:hover{background:var(--c2);color:var(--sobre-forte,#FFFFFF)}
.forge-hint{position:relative;z-index:1;font-family:var(--fm);font-size:.74rem;color:var(--ink-soft);margin-top:.6rem;min-height:1rem}
@media (max-width:520px){.plan-phase{grid-template-columns:1fr}.plan-dot{margin-bottom:.2rem}}
/* ===== interativo: quiz, pomodoro, checklists, glossário, backup ===== */
/* botões do nav extras */
.nav-tool{flex:none;background:var(--card);border:1px solid var(--line);color:var(--ink);font-family:var(--fm);font-size:.7rem;font-weight:500;padding:.4rem .6rem;border-radius:999px;cursor:pointer;white-space:nowrap;box-shadow:var(--sh-s);transition:transform .15s,border-color .2s,background .2s}
.nav-tool:hover{border-color:var(--c1)}
.nav-tool:active{transform:scale(.95)}
/* Pomodoro flutuante */
.pomo{position:fixed;right:1rem;bottom:5.2rem;z-index:70;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-l);padding:1rem 1.1rem;width:min(280px,calc(100vw - 2rem));display:none}
.pomo.show{display:block;animation:popUp .3s ease}
.pomo-title{font-family:var(--fm);font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.pomo-x{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:1.1rem;line-height:1;padding:0}
.pomo-btn{font-family:var(--fm);font-size:.78rem;font-weight:600;padding:.5rem .9rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:all .15s}
.pomo-btn.primary{background:var(--c1);border-color:var(--c1);color:var(--sobre-forte,#FFFFFF)}
.pomo-btn:hover{filter:brightness(1.08)}a.pomo-btn{text-decoration:none}
.pomo-btn:active{transform:scale(.95)}
/* Quiz interativo */
.quiz{background:linear-gradient(150deg,color-mix(in srgb,var(--c1) 10%,var(--card)),color-mix(in srgb,var(--c3) 9%,var(--card)));border:1px solid var(--line);border-radius:calc(var(--radius) + 2px);padding:clamp(1.2rem,3vw,1.8rem);margin:1.6rem 0;box-shadow:var(--sh-s)}
.quiz-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.quiz-badge{font-family:var(--fm);font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sobre-forte,#FFFFFF);background:linear-gradient(135deg,var(--c1),var(--c3));padding:.35rem .75rem;border-radius:999px}
.quiz h4{font-family:var(--fd);font-weight:800;font-size:1.08rem;margin:0;color:var(--ink)}
.quiz-sub{font-size:.9em;color:var(--ink-2);margin:.2rem 0 1rem}
.quiz-q{margin:0 0 1.1rem;padding:0 0 1.1rem;border-bottom:1px dashed var(--line)}
.quiz-q:last-of-type{border-bottom:none;margin-bottom:.5rem}
.quiz-q-text{font-family:var(--fd);font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:.6rem;display:block;position:relative;padding-left:1.7rem}.quiz-q-text .qn{position:absolute;left:0;top:0}
.quiz-q-text .qn{color:var(--c1);flex:none}
.quiz-opt{display:block;width:100%;text-align:left;font-family:var(--fb);font-size:.95rem;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:.6rem .85rem;margin:.4rem 0;cursor:pointer;transition:all .15s}
.quiz-opt:hover:not(:disabled){border-color:var(--c1);transform:translateX(2px)}
.quiz-opt:disabled{cursor:default}
.quiz-opt.correct{background:color-mix(in srgb,var(--c3) 18%,var(--card));border-color:var(--c3);color:var(--c3);font-weight:600}
.quiz-opt.wrong{background:color-mix(in srgb,var(--c4) 16%,var(--card));border-color:var(--c4);color:var(--c4)}
.quiz-opt .mk{font-weight:900;margin-right:.4rem}
.quiz-fb{font-size:.9em;margin-top:.5rem;padding:.6rem .8rem;border-radius:8px;background:var(--card-2);color:var(--ink-2);display:none}
.quiz-fb.show{display:block;animation:fadeIn .25s ease}
.quiz-fb b{color:var(--ink)}
.quiz-score{display:none;margin-top:1rem;padding:.9rem 1.1rem;border-radius:12px;background:var(--card);border:1px solid var(--line);font-family:var(--fd);font-weight:700;text-align:center;color:var(--ink)}
.quiz-score.show{display:block;animation:planIn .4s ease}
.quiz-score .big{font-size:1.6rem;color:var(--c1);display:block}
.quiz-reset{font-family:var(--fm);font-size:.78rem;color:var(--ink-soft);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px;margin-top:.6rem}
.quiz-reset:hover{color:var(--ink)}
/* Checklist marcável */
.chklist{list-style:none;margin:1.2rem 0;padding:0;display:grid;gap:.5rem}
.chklist li{display:flex;align-items:flex-start;gap:.6rem;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.6rem .85rem;cursor:pointer;transition:all .15s}
.chklist li:hover{border-color:var(--c3)}
.chklist li .ck{width:20px;height:20px;border-radius:6px;border:2px solid var(--ink-soft);flex:none;margin-top:.05rem;display:grid;place-items:center;transition:all .15s}
.chklist li.done{background:color-mix(in srgb,var(--c3) 8%,var(--card));border-color:var(--c3)}
.chklist li.done .ck{background:var(--c3);border-color:var(--c3)}
.chklist li.done .ck::after{content:"✓";color:#fff;font-size:.8rem;font-weight:900}
.chklist li.done .ck-label{color:var(--ink-soft);text-decoration:line-through}
.chklist .ck-label{font-size:.95em;color:var(--ink)}
/* Glossário */
.gloss{display:grid;gap:.7rem;margin:1.3rem 0}
.gloss-item{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--c2);border-radius:10px;padding:.8rem 1rem}
.gloss-item dt{font-family:var(--fd);font-weight:800;font-size:1rem;color:var(--ink);margin-bottom:.2rem}
.gloss-item dd{margin:0;font-size:.93em;color:var(--ink-2)}
.gloss-search{width:100%;font-family:var(--fb);font-size:1rem;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:.7rem 1rem;margin-bottom:1rem}
.gloss-search:focus{outline:none;border-color:var(--c2);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2) 20%,transparent)}
.gloss-item.hidden{display:none}
/* toast de backup */
.toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%) translateY(20px);z-index:70;background:var(--ink);color:var(--bg);font-family:var(--fm);font-size:.82rem;font-weight:500;padding:.7rem 1.2rem;border-radius:999px;box-shadow:var(--sh-l);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;max-width:90vw;text-align:center}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media print{nav,.totop,.pomo,.tpanel,.resume-chip,.search-wrap,.search-info,.exam-btn,.theme-btn,.nav-tool,.streak,.prog-ring,#examOverlay,.quiz-reset,.forge-go,.gloss-search,.toast{display:none !important}body::before{display:none}.cap,.ficha,.box{break-inside:avoid}}
/* ===== gerador Anki, streak ===== */
/* Gerador de cards Anki */
.anki-gen{background:linear-gradient(150deg,color-mix(in srgb,var(--c5) 11%,var(--card)),color-mix(in srgb,var(--c2) 9%,var(--card)));border:1px solid var(--line);border-radius:calc(var(--radius) + 2px);padding:clamp(1.2rem,3vw,1.8rem);margin:1.6rem 0;box-shadow:var(--sh-s)}
.anki-gen-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem}
.anki-badge{font-family:var(--fm);font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sobre-forte,#FFFFFF);background:linear-gradient(135deg,var(--c5),var(--c2));padding:.35rem .75rem;border-radius:999px}
.anki-gen h4{font-family:var(--fd);font-weight:800;font-size:1.08rem;margin:0;color:var(--ink)}
.anki-gen-sub{font-size:.9em;color:var(--ink-2);margin:.2rem 0 1rem}
.anki-row{display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem;margin-bottom:.5rem;align-items:start}
@media (max-width:560px){.anki-row{grid-template-columns:1fr}}
.anki-in{width:100%;font-family:var(--fb);font-size:.95rem;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:9px;padding:.55rem .75rem;resize:vertical;min-height:42px}
.anki-in:focus{outline:none;border-color:var(--c5);box-shadow:0 0 0 3px color-mix(in srgb,var(--c5) 20%,transparent)}
.anki-del{font-family:var(--fm);font-size:1rem;color:var(--ink-soft);background:var(--card);border:1.5px solid var(--line);border-radius:9px;padding:0 .7rem;cursor:pointer;height:42px;transition:all .15s}
.anki-del:hover{border-color:var(--c4);color:var(--c4)}
.anki-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem;align-items:center}
.anki-btn{font-family:var(--fd);font-weight:700;font-size:.92rem;border:none;border-radius:999px;padding:.6rem 1.2rem;cursor:pointer;transition:transform .15s,filter .2s}
.anki-btn.add{background:var(--card);border:1.5px solid var(--c5);color:var(--c5)}
.anki-btn.export{background:linear-gradient(135deg,var(--c5),var(--c2));color:var(--sobre-forte,#FFFFFF);box-shadow:var(--sh-s)}
.anki-btn:hover{filter:brightness(1.06)}
.anki-btn:active{transform:scale(.96)}
.anki-count{font-family:var(--fm);font-size:.74rem;color:var(--ink-soft)}
.anki-hint{font-family:var(--fm);font-size:.74rem;color:var(--ink-soft);margin-top:.6rem;min-height:1rem}
/* Streak de estudo */
.streak{display:flex;align-items:center;gap:.5rem;flex:none;font-family:var(--fm);font-size:.7rem;font-weight:600;color:var(--ink-2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;cursor:pointer;box-shadow:var(--sh-s);transition:border-color .2s}
.streak:hover{border-color:var(--c5)}
.streak .fire{font-size:.95rem}
.streak b{color:var(--c5);font-weight:800}
/* Sumário global expansível */
.sumario{max-width:var(--maxw);margin:0 auto 2rem;padding:0 var(--pad)}
.sumario details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-s);overflow:hidden}
.sumario summary{cursor:pointer;padding:1rem 1.3rem;font-family:var(--fd);font-weight:800;font-size:1.05rem;color:var(--ink);list-style:none;display:flex;align-items:center;gap:.6rem;user-select:none}
.sumario summary::-webkit-details-marker{display:none}
/* o Sumário geral tem a seta dele, à direita, e não o círculo das outras
   dobras: a regra-base punha o marcador em position:absolute à esquerda,
   dentro do círculo, e ao abrir ele escapava (rodada 12) */
.sumario details>summary::before{display:none}
.sumario details>summary::after,.sumario details[open]>summary::after{content:"▾";position:static;left:auto;top:auto;margin-left:auto;transform:none;transition:transform .25s;color:var(--ink-soft)}
.sumario details[open]>summary::after{transform:rotate(180deg)}
.sumario-badge{font-family:var(--fm);font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sobre-forte,#FFFFFF);background:var(--c1);padding:.25rem .6rem;border-radius:999px}
.sumario-grid{padding:.3rem 1.3rem 1.3rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem}
.sumario-grid a{text-decoration:none;font-size:.9rem;color:var(--ink-2);padding:.5rem .7rem;border-radius:9px;border:1px solid transparent;transition:all .15s;display:flex;gap:.5rem;align-items:baseline}
.sumario-grid a:hover{background:var(--card-2);border-color:var(--line);color:var(--ink)}
.sumario-grid a .cn{font-family:var(--fm);font-size:.7rem;color:var(--c1);font-weight:700;flex:none}
/* ===== S2: interface refinada ===== */
::selection{background:color-mix(in srgb,var(--c1) 26%,transparent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 22%,transparent);border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--c1);outline-offset:2px;border-radius:4px}
h3[id],h4[id]{scroll-margin-top:96px}
kbd{font-family:var(--fm);font-size:.74em;background:var(--card);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:.08em .45em}
.ficha,.principle,.gloss-item{transition:transform .18s,box-shadow .18s,border-color .18s}
.ficha:hover,.principle:hover{transform:translateY(-2px);box-shadow:var(--sh-l)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
/* painel de ferramentas 🛠️ */
.tpanel{width:min(300px,calc(100vw - 2rem))}
.tpanel .pomo-btn{width:100%;justify-content:center;align-items:center;display:flex;gap:.4rem;margin:.3rem 0;min-height:44px;box-sizing:border-box}
.tpanel-hint{font-family:var(--fm);font-size:.66rem;color:var(--ink-soft);margin-top:.7rem;line-height:1.7}
/* chip "continuar de onde parou" */
.resume-chip{position:fixed;left:50%;bottom:4.8rem;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:.55rem;background:var(--ink);color:var(--bg);font-family:var(--fm);font-size:.78rem;font-weight:600;padding:.55rem .5rem .55rem 1rem;border-radius:999px;box-shadow:var(--sh-l);cursor:pointer;border:none;animation:popUp .35s ease;max-width:92vw}
.resume-chip .rx{background:none;border:none;color:var(--bg);opacity:.7;font-size:1rem;cursor:pointer;padding:.1rem .5rem;line-height:1}
.resume-chip .rx:hover{opacity:1}
/* sumário: tempo de leitura + concluído */
.sumario-grid a{position:relative}
.sumario-grid a .rt{margin-left:auto;font-family:var(--fm);font-size:.6rem;color:var(--ink-soft);flex:none}
.sumario-grid a.done{background:color-mix(in srgb,var(--c3) 9%,transparent);border-color:color-mix(in srgb,var(--c3) 35%,var(--line))}
.sumario-grid a.done .cn{color:var(--c3)}
.sumario-grid a.done .rt::after{content:" ✓";color:var(--c3);font-weight:800}
/* Modo Prova: seletor de capítulos */
.exam-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.2rem;align-items:center}
.exam-chips-lbl{font-family:var(--fm);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);width:100%;margin-bottom:.15rem}
.exam-chip{font-family:var(--fm);font-size:.7rem;font-weight:600;padding:.34rem .7rem;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:all .15s}
.exam-chip:hover{border-color:var(--c4)}
.exam-chip.off{opacity:.38;text-decoration:line-through}
.exam-chip.all{border-color:var(--c4);color:var(--c4)}
/* ===== S3: trilhas e anotações ===== */
.sumario-cat{font-family:var(--fm);font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:.95rem 1.3rem .15rem}
.sumario details .sumario-grid{padding-top:.25rem;padding-bottom:.35rem}
.sumario details .sumario-grid:last-of-type{padding-bottom:1.2rem}
.notes-ta{width:100%;min-height:200px;font-family:var(--fb);font-size:.95rem;line-height:1.6;color:var(--ink);background:var(--card-2);border:1.5px solid var(--line);border-radius:12px;padding:.8rem .95rem;resize:vertical;margin:.4rem 0}
.notes-ta:focus{outline:none;border-color:var(--c2);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2) 18%,transparent)}
/* ===== A Estante: estante e leitor ===== */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.9rem;margin:1.4rem 0}
.lib-book{position:relative;text-align:left;background:var(--card);border:1px solid var(--line);border-left:7px solid var(--bk,var(--c1));border-radius:12px;padding:1rem 1rem .9rem;cursor:pointer;box-shadow:var(--sh-s);transition:transform .18s,box-shadow .18s}
.lib-book:hover{transform:translateY(-3px);box-shadow:var(--sh-l)}
.lib-book .lb-serie{font-family:var(--fm);font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.lib-book h4{font-family:var(--fd);font-weight:800;font-size:1rem;line-height:1.25;margin:.3rem 0 .35rem;color:var(--ink)}
.lib-book .lb-desc{font-size:.82rem;color:var(--ink-2);line-height:1.45}
.lib-book .lb-open{display:inline-block;margin-top:.6rem;font-family:var(--fm);font-size:.68rem;font-weight:600;color:var(--bk,var(--c1))}
.reader{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ink) 55%,transparent);backdrop-filter:blur(6px);padding:1rem}
.reader.show{display:flex;animation:fadeIn .25s ease}
.reader-box{width:min(700px,96vw);height:min(82vh,760px);display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-l);overflow:hidden}
.reader-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--line);background:var(--card)}
.reader-title{font-family:var(--fd);font-weight:800;font-size:.95rem;color:var(--ink)}
.reader-acts{display:flex;gap:.4rem;flex:none}
.rd-btn{font-family:var(--fm);font-size:.74rem;font-weight:600;padding:.4rem .75rem;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:all .15s}
.rd-btn:hover:not(:disabled){border-color:var(--c1)}
.rd-btn:disabled{opacity:.35;cursor:default}
.reader-page{flex:1;overflow-y:auto;padding:clamp(1.2rem,4vw,2.2rem);font-family:var(--fb);font-size:1.02rem;line-height:1.75;color:var(--ink)}
.reader-page h4{font-family:var(--fd);font-weight:800;font-size:1.25rem;margin:0 0 .8rem;color:var(--ink)}
.reader-page p{margin:.7rem 0}
.reader-page ul{margin:.7rem 0;padding-left:1.2rem}
.reader-page li{margin:.45rem 0}
.reader-page .rp-tag{font-family:var(--fm);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--bk,var(--c1))}
.reader-foot{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.1rem;border-top:1px solid var(--line);background:var(--card)}
.rd-pos{font-family:var(--fm);font-size:.74rem;color:var(--ink-soft)}
/* ===== S4.1: diagramas, mapas mentais e protocolos ===== */
.dgm{margin:1.7rem 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.2rem .95rem;box-shadow:var(--sh-s)}
.dgm svg{width:100%;height:auto;display:block}
.dgm figcaption{font-family:var(--fm);font-size:.72rem;line-height:1.65;color:var(--ink-soft);margin-top:.85rem;text-align:center}
.dgm .ttl{font-family:var(--fd);font-weight:800;font-size:13.5px;fill:var(--ink)}
.dgm .lbl{font-family:var(--fm);font-size:11px;fill:var(--ink)}
.dgm .lbl-s{font-family:var(--fm);font-size:9.5px;fill:var(--ink-soft)}
.dgm .inv{fill:var(--bg)}
.dgm .ln{fill:none;stroke:var(--line);stroke-width:2}
.dgm .ax{fill:none;stroke:var(--ink-soft);stroke-width:1;opacity:.45}
.dgm .dash{stroke-dasharray:5 5}
.dgm .fc{fill:var(--ink)}
.dgm .b1{fill:color-mix(in srgb,var(--c1) 14%,var(--card));stroke:var(--c1);stroke-width:1.5}
.dgm .b2{fill:color-mix(in srgb,var(--c2) 14%,var(--card));stroke:var(--c2);stroke-width:1.5}
.dgm .b3{fill:color-mix(in srgb,var(--c3) 14%,var(--card));stroke:var(--c3);stroke-width:1.5}
.dgm .b4{fill:color-mix(in srgb,var(--c4) 14%,var(--card));stroke:var(--c4);stroke-width:1.5}
.dgm .b5{fill:color-mix(in srgb,var(--c5) 14%,var(--card));stroke:var(--c5);stroke-width:1.5}
.dgm .b6{fill:color-mix(in srgb,var(--c6) 14%,var(--card));stroke:var(--c6);stroke-width:1.5}
.dgm .bh{fill:color-mix(in srgb,var(--hi) 30%,var(--card));stroke:var(--hi);stroke-width:1.5}
.dgm .s1{fill:none;stroke:var(--c1);stroke-width:2.5}
.dgm .s3{fill:none;stroke:var(--c3);stroke-width:2.5}
.dgm .s4{fill:none;stroke:var(--c4);stroke-width:2.5}
.dgm .p1{fill:var(--c1)}.dgm .p3{fill:var(--c3)}.dgm .p4{fill:var(--c4)}.dgm .p5{fill:var(--c5)}
.dgm .zl{fill:color-mix(in srgb,var(--ink) 5%,transparent)}
.dgm .zm{fill:color-mix(in srgb,var(--c3) 13%,transparent)}
.dgm .zr{fill:color-mix(in srgb,var(--c4) 9%,transparent)}
.howto{background:linear-gradient(150deg,color-mix(in srgb,var(--c6) 10%,var(--card)),var(--card));border:1px solid var(--line);border-left:4px solid var(--c6);border-radius:14px;padding:1.05rem 1.2rem;margin:1rem 0}
.howto .ht-meta{font-family:var(--fm);font-size:.62rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.howto h4{font-family:var(--fd);font-weight:800;font-size:1.05rem;margin:.2rem 0 .1rem;color:var(--ink)}
.howto .ht-when{font-size:.9em;color:var(--ink-2);margin:.15rem 0 .5rem}
.howto ol{margin:.5rem 0;padding-left:1.2rem}
.howto ol li{margin:.32rem 0;font-size:.95em}
.howto .ht-warn{font-size:.88em;color:var(--ink-2);margin-top:.6rem;padding-top:.55rem;border-top:1px dashed var(--line)}
.howto .ht-ok{font-size:.88em;color:var(--c3);margin-top:.25rem;font-weight:600}
/* ===== CB6: selo de evidência, duelo, veredito e folha de sinais ===== */
/* A ORIGEM DO NÚMERO (Bloco 7, 10/10/2026): estudo, estimativa, meta ou
   frase de alguém, logo depois do número. Uma cor só, discreta: quem diz o
   tipo é a palavra, como no selo de evidência. Inline e com a caixa clonada
   na quebra de linha: a etiqueta longa quebra sem vazar em 320 px. E nunca
   abaixo de 11 px: dentro do cartão .vd, que já tem letra menor, 0,7em dava
   10,2 px, e a check_pago.mjs reprovou. */
.orig{font-family:var(--fm);font-size:max(.7em,11px);font-weight:600;letter-spacing:.01em;line-height:1.5;
  padding:.06em .5em;margin:0 .1em;border-radius:99px;border:1px solid var(--line);
  background:var(--card-2);color:var(--ink-2);white-space:normal;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.ev{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .65rem;margin:.75rem 0 0;font-family:var(--fm);font-size:.74rem;font-weight:500;letter-spacing:0;line-height:1.45;color:var(--ink-2)}
.cap > .ev{display:inline-flex;max-width:100%;padding:.5rem .8rem;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-xs)}
.ev-b{display:inline-flex;gap:3px;flex:none}
.ev-b i{display:block;width:13px;height:6px;border-radius:3px;background:var(--line)}
.ev-1 .ev-b i:nth-child(-n+1),.ev-2 .ev-b i:nth-child(-n+2){background:var(--c4)}
.ev-3 .ev-b i:nth-child(-n+3){background:var(--hi)}
.ev-4 .ev-b i:nth-child(-n+4),.ev-5 .ev-b i{background:var(--c3)}
.vs{display:grid;gap:.6rem;margin:1.1rem 0;align-items:stretch}
.vs-lado{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--vs);border-radius:var(--r-sm);padding:1rem 1.15rem}
.vs-a{--vs:var(--c1)}.vs-b{--vs:var(--c6)}
.vs-k{display:block;font-family:var(--fm);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vs)}
.vs-lado h4{font-family:var(--fd);font-weight:800;font-size:1.05rem;margin:.25rem 0 .35rem;color:var(--ink)}
.vs-lado p{margin:0;font-size:.95em}
.vs-lado p.ev{margin-top:.75rem}
.vs-ou{justify-self:center;align-self:center;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--card-2);border:1px solid var(--line);font-family:var(--fd);font-weight:800;font-size:.8rem;color:var(--ink-2)}
@media (min-width:700px){.vs{grid-template-columns:1fr auto 1fr}}
.vered{display:grid;gap:.75rem;margin:1.1rem 0;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.vd{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--vd);border-radius:var(--r-sm);padding:.95rem 1.1rem 1rem}
.vd-sim{--vd:var(--c3);--vd-bg:var(--c3-bg);--vd-ink:var(--c3)}
.vd-talvez{--vd:var(--hi);--vd-bg:var(--hi-soft);--vd-ink:var(--ink)}
.vd-nao{--vd:var(--c4);--vd-bg:var(--c4-bg);--vd-ink:var(--c4)}
.vd-tag{display:inline-block;padding:.2rem .6rem;border-radius:999px;background:var(--vd-bg);color:var(--vd-ink);font-family:var(--fm);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.vd h4{font-family:var(--fd);font-weight:800;font-size:1.02rem;margin:.45rem 0 .3rem;color:var(--ink)}
.vd p{margin:0;font-size:.94em}
.vd p.ev{margin-top:.7rem}
.sinais{margin:1.2rem 0}
.sn-folha{position:relative;background-color:var(--card);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(1.9rem - 1px),var(--line) calc(1.9rem - 1px),var(--line) 1.9rem);background-position:0 .6rem;border:1px solid var(--line);border-radius:var(--r-sm);padding:.6rem 1rem .9rem 2.5rem;font-family:var(--fm);font-size:.8rem;line-height:1.9rem;color:var(--ink)}
.sn-folha::before{content:"";position:absolute;top:0;bottom:0;left:1.6rem;width:2px;background:color-mix(in srgb,var(--c4) 45%,transparent)}
.sn-t{display:block;font-family:var(--fd);font-weight:800;font-size:.92rem}
.sn-l{display:block}
.sn-l b{color:var(--c1);font-weight:700}
.sn-l em{font-style:normal;font-weight:700;color:var(--c4)}
.sinais figcaption{font-family:var(--fm);font-size:.72rem;line-height:1.65;color:var(--ink-soft);margin-top:.7rem;text-align:center}
/* ===== S4.2: tabuleiro, pirâmide, matriz ===== */
.dgm .sqL{fill:color-mix(in srgb,var(--ink) 7%,var(--card))}
.dgm .sqD{fill:color-mix(in srgb,var(--c6) 34%,var(--card))}
.dgm .pc{font-size:25px;text-anchor:middle;fill:var(--ink)}
.dgm .pcW{font-size:25px;text-anchor:middle;fill:var(--c1)}
.dgm .atk{fill:none;stroke:var(--c4);stroke-width:2.5;stroke-dasharray:6 4}
.dgm .brd{fill:none;stroke:var(--ink-soft);stroke-width:1.5}
.dgm .py1{fill:color-mix(in srgb,var(--c1) 30%,var(--card));stroke:var(--c1);stroke-width:1.5}
.dgm .py2{fill:color-mix(in srgb,var(--c1) 22%,var(--card));stroke:var(--c1);stroke-width:1.5}
.dgm .py3{fill:color-mix(in srgb,var(--c1) 14%,var(--card));stroke:var(--c1);stroke-width:1.5}
.dgm .py4{fill:color-mix(in srgb,var(--c1) 7%,var(--card));stroke:var(--c1);stroke-width:1.5}
.dgm .mtx{fill:none;stroke:var(--line);stroke-width:1.5}
/* ===== 4.5: o que não te contamos + explicação extra do diagrama ===== */
.naodito{background:linear-gradient(150deg,color-mix(in srgb,var(--c7) 9%,var(--card)),var(--card));border:1px dashed color-mix(in srgb,var(--c7) 48%,var(--line));border-radius:14px;padding:1rem 1.25rem;margin:1.8rem 0 .4rem}
.naodito .nd-t{font-family:var(--fm);font-size:.63rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--c7);display:block;margin-bottom:.45rem}
.naodito p{margin:0;font-size:.95em;color:var(--ink-2)}
.dgm-mais{margin:-.7rem 0 1.8rem;padding:.9rem 1.15rem;border-left:3px solid var(--c6);background:color-mix(in srgb,var(--c6) 7%,transparent);border-radius:0 12px 12px 0;font-size:.93em;color:var(--ink-2);line-height:1.7}
.dgm-mais b{color:var(--ink)}
.dgm-mais .dm-t{font-family:var(--fm);font-size:.63rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--c6);display:block;margin-bottom:.35rem}
/* ===== 5.0: modos de leitura, animações e responsividade ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes capIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes shelfIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes drawIn{from{stroke-dashoffset:1500}to{stroke-dashoffset:0}}
@keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
body{overflow-x:clip}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.vis{opacity:1;transform:none}
.dgm.vis svg .s1,.dgm.vis svg .s3,.dgm.vis svg .s4{stroke-dasharray:1500;animation:drawIn 1.5s ease forwards}
.cap-head h2,.cap-num{transition:transform .3s}
.tab{transition:background .2s,color .2s,transform .18s}
.tab:active{transform:scale(.95)}
.box,.ficha,.howto,.naodito,.principle,.road-step,.st{transition:transform .2s,box-shadow .2s}
.box:hover,.howto:hover,.naodito:hover{transform:translateY(-2px)}
.quiz-opt{transition:background .18s,border-color .18s,transform .12s}
.quiz-opt:active{transform:scale(.985)}
.cap-done,.nav-tool,.exam-btn,.theme-btn,.rd-btn{transition:transform .15s,border-color .18s,background .18s}
.cap-done:active,.nav-tool:active,.exam-btn:active,.theme-btn:active{transform:scale(.94)}
.streak .fire{display:inline-block;animation:pulseFire 2.4s ease-in-out infinite}
@keyframes pulseFire{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
/* ---- estante (modo kamum) ---- */
#estante{display:none;max-width:var(--maxw);margin:.5rem auto 3.5rem;padding:0 var(--pad)}
body.kamum #estante{display:block;animation:fadeUp .5s}
body.kamum .cap{display:none}
body.kamum .cap.ativo{display:block;animation:capIn .55s cubic-bezier(.22,.61,.36,1)}
body.kamum.lendo #estante,body.kamum.lendo #introWrap{display:none}
.est-h{margin:0 0 1.1rem}
.est-h b{font-family:var(--fd);font-weight:800;font-size:1.35rem;color:var(--ink);display:block}
.est-h span{font-family:var(--fm);font-size:.72rem;color:var(--ink-soft);display:block;margin-top:.25rem;line-height:1.6}
.est-item{display:flex;gap:.9rem;align-items:center;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--kc,var(--c1));border-radius:14px;padding:.85rem 1rem;margin:.5rem 0;cursor:pointer;box-shadow:var(--sh-s);animation:shelfIn .5s backwards}
.est-item:hover{transform:translateX(5px);box-shadow:var(--sh-l);border-color:var(--kc,var(--c1))}
.est-item:active{transform:scale(.99)}
.est-n{font-family:var(--fm);font-size:1.1rem;font-weight:800;color:var(--kc,var(--c1));min-width:2.3rem;flex:none}
.est-b{display:flex;flex-direction:column;min-width:0}
.est-t{font-family:var(--fd);font-weight:800;font-size:1rem;line-height:1.25;color:var(--ink)}
.est-s{font-family:var(--fm);font-size:.66rem;color:var(--ink-soft);margin-top:.2rem}
.est-go{margin-left:auto;color:var(--ink-soft);font-size:1.3rem;flex:none;transition:transform .2s}
.est-item:hover .est-go{transform:translateX(4px)}
.est-item.done{background:color-mix(in srgb,var(--c3) 7%,var(--card))}
.est-item.done .est-s::after{content:" · ✓ concluído";color:var(--c3);font-weight:700}
#capNav{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:70;display:none;gap:.35rem;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.35rem;box-shadow:var(--sh-l)}
body.kamum.lendo #capNav{display:flex;animation:popIn .35s}
#capNav button{font-family:var(--fm);font-size:.72rem;font-weight:600;padding:.45rem .8rem;border-radius:999px;border:none;background:transparent;color:var(--ink);cursor:pointer;transition:background .18s,transform .15s}
#capNav button:hover:not(:disabled){background:color-mix(in srgb,var(--ink) 8%,transparent)}
#capNav button:disabled{opacity:.3;cursor:default}
#capNav .cn-mid{background:var(--ink);color:var(--bg)}
/* ---- responsividade ---- */
.dgm-scroll{width:100%}
.tw{overflow-x:auto}
p,li,td,th,dd{overflow-wrap:break-word}
@media (max-width:640px){
 .dgm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.4rem}
 .dgm-scroll svg{min-width:580px}
 .dgm figcaption::before{content:"↔ arraste o diagrama · "}
 .grid,.lib-grid{grid-template-columns:1fr !important}
 #capNav{bottom:.6rem}
}
@media (max-width:420px){.est-n{font-size:.95rem;min-width:1.9rem}.est-t{font-size:.92rem}}
@media print{body.kamum .cap{display:block !important}.reveal{opacity:1 !important;transform:none !important}#estante,#capNav,#modoBtn{display:none !important}}
#examContent .reveal{opacity:1 !important;transform:none !important}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1 !important;transform:none !important}.est-item,.cap.ativo,#capNav{animation:none !important}}
/* ===== 5.1: organização visual e novos componentes ===== */
.comece{margin:1.1rem 0 1.8rem;padding:.95rem 1.15rem;border:1px solid var(--line);border-left:4px solid var(--c3);border-radius:12px;background:color-mix(in srgb,var(--c3) 6%,var(--card))}
.comece .cm-t{display:block;font-family:var(--fm);font-size:.62rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--c3);margin-bottom:.45rem}
.comece .cm-i{display:block;font-size:.93rem;line-height:1.65;color:var(--ink-2);margin:.2rem 0}
.comece .cm-i b{color:var(--ink)}
.toc{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.toc b{width:100%;font-family:var(--fm);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.15rem}
.toc a{display:inline-block;padding:.32rem .68rem;border:1px solid var(--line);border-radius:999px;font-family:var(--fm);font-size:.72rem;color:var(--ink-2);text-decoration:none;transition:all .18s}
.toc a:hover{border-color:var(--c1);color:var(--c1);transform:translateY(-1px)}
.tw table tr:nth-child(even) td{background:color-mix(in srgb,var(--ink) 3.5%,transparent)}
.tw table th{position:sticky;top:0;background:var(--card);color:var(--ink);z-index:1;box-shadow:inset 0 -1px 0 var(--line)}
.cap h3{margin-top:2.7rem}
.cap .step{display:inline-block;padding:.2rem .55rem;border-radius:6px;background:color-mix(in srgb,var(--c1) 12%,transparent)}
.naodito{position:relative;margin-top:2.4rem}
.naodito::before{content:"";position:absolute;top:-1.25rem;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.dgm{scroll-margin-top:90px}
.dgm figcaption{max-width:62ch;margin-left:auto;margin-right:auto}
.est-item:focus-visible{outline:2px solid var(--c1);outline-offset:3px}
@media (max-width:640px){.cap h3{margin-top:2.1rem}.comece{padding:.85rem .95rem}}
/* ===== 5.2: animação dos diagramas e mapas mentais ===== */
@keyframes nodeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes drawLine{from{stroke-dashoffset:700}to{stroke-dashoffset:0}}
@keyframes textIn{from{opacity:0}to{opacity:1}}
.dgm.vis svg rect:not(.sqL):not(.sqD),.dgm.vis svg circle,.dgm.vis svg ellipse{transform-box:fill-box;transform-origin:center;animation:nodeIn .5s backwards}
.dgm.vis svg rect:nth-of-type(2){animation-delay:.07s}.dgm.vis svg rect:nth-of-type(3){animation-delay:.14s}
.dgm.vis svg rect:nth-of-type(4){animation-delay:.21s}.dgm.vis svg rect:nth-of-type(5){animation-delay:.28s}
.dgm.vis svg rect:nth-of-type(6){animation-delay:.35s}.dgm.vis svg rect:nth-of-type(n+7){animation-delay:.42s}
.dgm.vis svg circle:nth-of-type(2){animation-delay:.07s}.dgm.vis svg circle:nth-of-type(3){animation-delay:.14s}
.dgm.vis svg circle:nth-of-type(4){animation-delay:.21s}.dgm.vis svg circle:nth-of-type(n+5){animation-delay:.28s}
.dgm.vis svg ellipse{animation-delay:.45s;animation-duration:.6s}
.dgm.vis svg .ln{stroke-dasharray:700;animation:drawLine 1.1s .1s ease backwards}
.dgm.vis svg text{animation:textIn .7s .3s backwards}
.dgm.vis svg .sqL,.dgm.vis svg .sqD{animation:textIn .5s backwards}
@media (prefers-reduced-motion:reduce){.dgm.vis svg *{animation:none !important}}
/* ===== Colossus Brain III: modo caminho (3º modo, nada bloqueado) ===== */
#trilha{display:none;max-width:var(--maxw);margin:.5rem auto 2rem;padding:0 var(--pad)}
body.caminho #trilha{display:block;animation:fadeUp .5s}
body.kamum.lendo #trilha{display:none}
.tr-h{margin:0 0 1rem}
.tr-h b{font-family:var(--fd);font-weight:800;font-size:1.35rem;color:var(--ink);display:block}
.tr-h span{font-family:var(--fm);font-size:.72rem;color:var(--ink-soft);display:block;margin-top:.3rem;line-height:1.65}
.tr-step{display:flex;gap:.9rem;align-items:flex-start;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--c3);border-radius:14px;padding:.9rem 1rem;margin:.5rem 0;cursor:pointer;box-shadow:var(--sh-s);animation:shelfIn .5s backwards;transition:transform .18s,box-shadow .18s}
.tr-step:hover{transform:translateX(5px);box-shadow:var(--sh-l)}
.tr-n{flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--c3);color:var(--sobre-forte,#FFFFFF);font-family:var(--fm);font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.tr-b{min-width:0}
.tr-t{font-family:var(--fd);font-weight:800;font-size:1rem;color:var(--ink);display:block}
.tr-d{font-size:.86rem;color:var(--ink-2);line-height:1.55;display:block;margin-top:.2rem}
.tr-c{font-family:var(--fm);font-size:.65rem;color:var(--c3);font-weight:600;display:block;margin-top:.3rem}
.tr-nota{margin-top:1.2rem;padding:.85rem 1.05rem;border:1px dashed var(--line);border-radius:12px;background:color-mix(in srgb,var(--hi) 8%,transparent);font-size:.88rem;color:var(--ink-2);line-height:1.65}
.tr-nota b{color:var(--ink)}
body.caminho #estante .est-h b::after{content:" (nada bloqueado)";font-family:var(--fm);font-size:.68rem;font-weight:600;color:var(--ink-soft)}
@media (max-width:520px){
  .reveal{transition-duration:.42s}
  .est-item,.hub-card,.tr-step{animation-duration:.3s}
  .box:hover,.howto:hover,.naodito:hover{transform:none}
}
/* ===== Colossus Brain III: blindagem de toque e fallback visual ===== */
.est-item,.hub-card,.tr-step,.tab,.cap-done,.quiz-opt,#modoBtn,#capNav button,.rd-btn,.acc-trigger{
  position:relative;z-index:2;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,.06)}
#estante,#hub,#trilha{position:relative;z-index:2}
.est-item{min-height:64px}
.hub-card{min-height:150px}
@supports not (background:color-mix(in srgb,red 50%,blue)){
  .est-item,.hub-card,.tr-step,.box,.ficha,.howto,.naodito,.comece,.dgm,.cap-import .card,
  .cap-import .callout,.cap-import .analogy,.cap-import .acc-item{background:var(--card) !important}
  .dgm .b1,.dgm .b2,.dgm .b3,.dgm .b4,.dgm .b5,.dgm .b6,.dgm .bh{fill:var(--card) !important}
  .cap-import svg .diagram-node,.cap-import svg .mm-bg-primary,.cap-import svg .mm-bg-accent{fill:var(--card) !important}
}

/* ===== Colossus Brain III: cores dos diagramas importados (restauradas) ===== */
.cap-import svg .diagram-stroke,.cap-import svg .mm-line-primary,.cap-import svg .mm-line-accent,
.cap-import svg .flow-line,.cap-import svg .link,.cap-import svg .edge{fill:none;stroke:var(--line);stroke-width:1.75}
.cap-import svg .mm-line-primary{stroke:var(--c1)}
.cap-import svg .mm-line-accent{stroke:var(--hi)}
.cap-import svg .diagram-node{fill:color-mix(in srgb,var(--c1) 14%,var(--card));stroke:var(--c1);stroke-width:1.5}
.cap-import svg .diagram-node-primary{fill:var(--c1);stroke:none}
.cap-import svg .diagram-node-accent{fill:color-mix(in srgb,var(--hi) 30%,var(--card));stroke:var(--hi);stroke-width:1.5}
.cap-import svg .diagram-node-ghost{fill:var(--card);stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 4}
.cap-import svg .diagram-label{fill:var(--ink);font-family:var(--fm)}
.cap-import svg .diagram-label:not([font-size]){font-size:11px}
.cap-import svg .diagram-node-primary + .diagram-label,.cap-import svg .diagram-label-invert{fill:var(--bg)}
.cap-import svg .diagram-label-dim{fill:var(--ink-soft);font-family:var(--fm)}
.cap-import svg .diagram-label-dim:not([font-size]){font-size:9.5px}
.cap-import svg .mm-bg-primary{fill:color-mix(in srgb,var(--c1) 13%,var(--card));stroke:var(--c1);stroke-width:1.5}
.cap-import svg .mm-bg-accent{fill:color-mix(in srgb,var(--hi) 22%,var(--card));stroke:var(--hi);stroke-width:1.5}
.cap-import svg .mm-title-primary{fill:var(--c1);font-family:var(--fd);font-weight:800}
.cap-import svg .mm-title-accent{fill:var(--ink);font-family:var(--fd);font-weight:800}
.cap-import svg .fill-faint{fill:color-mix(in srgb,var(--ink) 7%,transparent)}
.cap-import svg .packet,.cap-import svg .packet-path{fill:var(--c3)}
.cap-import svg .badge-num{fill:var(--c1)}
.cap-import svg .badge-num.fill-accent{fill:var(--hi)}
.cap-import svg .badge-num.fill-text{fill:var(--ink)}
/* rede de segurança: qualquer forma sem cor definida vira contorno legível, nunca bloco preto */
.cap-import svg circle:not([fill]):not([class]),.cap-import svg rect:not([fill]):not([class]),
.cap-import svg ellipse:not([fill]):not([class]),.cap-import svg polygon:not([fill]):not([class]){
  fill:var(--card);stroke:var(--line);stroke-width:1.5}
.cap-import svg line:not([stroke]),.cap-import svg polyline:not([stroke]):not([class]){stroke:var(--line);stroke-width:1.5;fill:none}
.cap-import svg path:not([fill]):not([class]):not([stroke]){fill:none;stroke:var(--line);stroke-width:1.75}

/* ===== Colossus Brain III: correções de renderização dos módulos ===== */
.cap-import h3{display:block !important}
.cap-import h3 .step,.cap-import .step{display:inline-block !important;width:auto !important;max-width:max-content;
  margin-right:.5rem;vertical-align:middle;padding:.18rem .5rem;border-radius:6px;font-family:var(--fm);font-size:.72rem}
.cap-import a{text-decoration:none;color:var(--c1);border-bottom:1px solid transparent}
.cap-import a:hover{border-bottom-color:var(--c1)}
.cap-import a.card,.cap-import .card a,.cap-import .trilha-card,.cap-import a[class*="card"]{
  display:block;text-decoration:none;color:inherit;border-bottom:0}
.cap-import a.card h3,.cap-import a.card h4,.cap-import .card a h4{color:var(--ink)}
/* SVG: devolver cores que estavam no CSS original dos arquivos */
.cap-import svg text,.cap-import svg tspan{fill:var(--ink);font-family:var(--fm)}
.cap-import svg text:not([font-size]),.cap-import svg tspan:not([font-size]){font-size:12px}
.cap-import svg .fill-primary,.cap-import .fill-primary{fill:var(--c1)}
.cap-import svg .fill-accent,.cap-import .fill-accent{fill:var(--hi)}
.cap-import svg .fill-text,.cap-import .fill-text{fill:var(--ink)}
.cap-import svg .fill-muted{fill:var(--ink-soft)}
.cap-import svg .fill-surface,.cap-import svg .fill-bg{fill:var(--card)}
.cap-import svg .fill-ok{fill:var(--c3)}.cap-import svg .fill-warn{fill:var(--c4)}
.cap-import svg .stroke-primary{stroke:var(--c1)}.cap-import svg .stroke-accent{stroke:var(--hi)}
.cap-import svg .stroke-text{stroke:var(--ink)}.cap-import svg .stroke-border,.cap-import svg .stroke-muted{stroke:var(--line)}
.cap-import svg [class*="badge-num"]{fill:var(--c1)}
.cap-import svg [class*="badge-num"] + text,.cap-import svg .badge-num text{fill:#fff}
/* rolagem horizontal para diagramas largos, como nos diagramas do manual */
.cap-import .svg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0;padding-bottom:.3rem}
.cap-import .svg-scroll svg{min-width:520px;margin:0}
.cap-import table{display:block;overflow-x:auto;white-space:normal}
/* cartões de trilha do módulo de redes */
.cap-import .trilha-card,.cap-import [class*="trilha"] .card{background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:1.1rem;margin:1rem 0;box-shadow:var(--sh-s)}

/* ===== Colossus Brain III: design próprio para os módulos importados ===== */
.cap-import{--primary:var(--c1);--accent:var(--hi);--text:var(--ink);--muted:var(--ink-soft);
  --surface:var(--card);--border:var(--line);--ok:var(--c3);--warn:var(--c4);--danger:var(--c4);
  --bg-soft:color-mix(in srgb,var(--ink) 4%,transparent);--radius:14px}
.cap-import *{max-width:100%;box-sizing:border-box}
.cap-import section,.cap-import .wrap,.cap-import .container,.cap-import main,.cap-import article{display:block;margin:0;padding:0;background:none;border:0;width:auto;max-width:100%;box-shadow:none}
.cap-import section{margin:2rem 0}
.cap-import h3{font-family:var(--fd);font-weight:800;font-size:clamp(1.15rem,4.4vw,1.5rem);line-height:1.25;color:var(--ink);margin:2.2rem 0 .3rem}
.cap-import h4{font-family:var(--fd);font-weight:800;font-size:1.02rem;color:var(--ink);margin:1.5rem 0 .3rem}
.cap-import h5{font-family:var(--fm);font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin:1.1rem 0 .3rem}
.cap-import p,.cap-import li{font-family:var(--fb);font-size:1rem;line-height:1.78;color:var(--ink-2)}
.cap-import p{margin:.85rem 0}
.cap-import ul,.cap-import ol{margin:.85rem 0;padding-left:1.3rem}
.cap-import li{margin:.4rem 0}
.cap-import strong,.cap-import b{color:var(--ink);font-weight:700}
.cap-import a{color:var(--c1)}
.cap-import svg{display:block;width:100%;height:auto;margin:.5rem auto}
/* cartões e blocos */
.cap-import .card,.cap-import .callout,.cap-import .analogy,.cap-import .sheet,.cap-import .mindmap-box,
.cap-import .flow-box,.cap-import .checklist,.cap-import .glossary,.cap-import .note,.cap-import .acc-item{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.15rem;margin:1.1rem 0;box-shadow:var(--sh-s)}
.cap-import .analogy,.cap-import .callout-tip{border-left:4px solid var(--c3);background:color-mix(in srgb,var(--c3) 6%,var(--card))}
.cap-import .callout-warn{border-left:4px solid var(--c4);background:color-mix(in srgb,var(--c4) 6%,var(--card))}
.cap-import .card h4,.cap-import .callout h4{margin-top:0}
.cap-import .grid,.cap-import .card-grid,.cap-import .cards{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.1rem 0}
/* exercícios */
.cap-import details.exercise,.cap-import .exercise{background:color-mix(in srgb,var(--c5) 7%,var(--card));border:1px solid var(--line);border-left:4px solid var(--c5);border-radius:14px;padding:1rem 1.1rem;margin:1rem 0}
.cap-import details.exercise summary{cursor:pointer;font-family:var(--fd);font-weight:700;color:var(--ink);list-style:none}
.cap-import details.exercise summary::-webkit-details-marker{display:none}
.cap-import .answer{margin-top:.8rem;padding-top:.8rem;border-top:1px dashed var(--line)}
/* acordeão */
.cap-import .accordion{margin:1.2rem 0}
.cap-import .acc-item{padding:0;overflow:hidden}
.cap-import .acc-trigger{width:100%;display:flex;align-items:center;gap:.7rem;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--fd);font-weight:700;font-size:1rem;color:var(--ink);padding:1rem 1.1rem;line-height:1.35}
.cap-import .acc-panel{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,.61,.36,1)}
.cap-import .acc-item.open .acc-panel{max-height:4000px}
.cap-import .acc-panel-inner{padding:0 1.1rem 1.2rem}
.cap-import .acc-chevron{margin-left:auto;flex:none;transition:transform .3s}
.cap-import .acc-item.open .acc-chevron{transform:rotate(180deg)}
.cap-import .acc-badge,.cap-import .badge-num{flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:1.7rem;height:1.7rem;border-radius:50%;background:var(--c1);color:var(--sobre-forte,#FFFFFF);font-family:var(--fm);font-size:.72rem;font-weight:800}
/* ABAS: mostrar TODOS os painéis (o JS original não vem junto) */
.cap-import .tab-panel{display:block !important;margin-top:1rem}
.cap-import .tabs,.cap-import .tablist,.cap-import .tab-btn,.cap-import .theme-toggle,.cap-import .menu-btn,
.cap-import .skip-link,.cap-import .site-footer,.cap-import .brand-mark,.cap-import .breadcrumb{display:none !important}
/* etiquetas e utilitários */
.cap-import .label,.cap-import .kicker,.cap-import .badge,.cap-import .sheet-tag,.cap-import .tagline{
  display:inline-block;font-family:var(--fm);font-size:.63rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--c1);background:color-mix(in srgb,var(--c1) 10%,transparent);padding:.25rem .6rem;border-radius:999px;margin-bottom:.5rem}
.cap-import .lede,.cap-import .lead{font-size:1.06rem;color:var(--ink-2);line-height:1.75}
.cap-import .btn,.cap-import .run{display:inline-block;font-family:var(--fm);font-size:.76rem;font-weight:600;padding:.55rem 1rem;
  border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:all .18s;margin:.4rem 0}
.cap-import .btn:hover,.cap-import .run:hover{border-color:var(--c1);transform:translateY(-1px)}
.cap-import .flow-status{font-family:var(--fm);font-size:.76rem;color:var(--ink-soft);margin-left:.6rem}
.cap-import .dot{transition:fill .3s}
.cap-import .dot.on{fill:var(--c3)}
.cap-import code,.cap-import .code,.cap-import kbd{font-family:var(--fm);font-size:.88em;background:color-mix(in srgb,var(--ink) 7%,transparent);padding:.12rem .38rem;border-radius:6px;color:var(--ink)}
.cap-import table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.94rem}
.cap-import th,.cap-import td{border:1px solid var(--line);padding:.6rem .7rem;text-align:left}
.cap-import th{background:var(--card);font-family:var(--fd);font-weight:700;color:var(--ink)}
.cap-import .checklist li{list-style:none;padding-left:1.6rem;position:relative}
.cap-import .checklist li::before{content:"☐";position:absolute;left:0;color:var(--c1);font-size:1.1rem}
@media (min-width:760px){.cap-import .grid,.cap-import .card-grid,.cap-import .cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}

/* (camada antiga) */

.cap-import{font-family:var(--fb)}
.cap-hw,.cap-net{--primary:var(--c1);--accent:var(--hi);--text:var(--ink);--muted:var(--ink-soft);--surface:var(--card);--border:var(--line);--ok:var(--c3);--warn:var(--c4)}
.cap-import h3,.cap-import h4{font-family:var(--fd);color:var(--ink)}
.cap-import p,.cap-import li{font-family:var(--fb);color:var(--ink-2);line-height:1.75}
.cap-import section{margin:1.8rem 0;padding:0;background:transparent;border:0;max-width:100%}
.cap-import .wrap,.cap-import .container{max-width:100%;padding:0;margin:0}
.cap-import svg{max-width:100%;height:auto}
.cap-import .card,.cap-import .callout,.cap-import .analogy,.cap-import .exercise,.cap-import .sheet,.cap-import .mindmap-box,.cap-import .flow-box,.cap-import .checklist,.cap-import .acc-item{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-s)}
.cap-import .callout-tip,.cap-import .analogy{border-left:4px solid var(--c3)}
.cap-import .callout-warn{border-left:4px solid var(--c4)}
.cap-import .grid,.cap-import .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.cap-import .acc-trigger{width:100%;text-align:left;cursor:pointer;background:transparent;border:0;font-family:var(--fd);font-weight:700;color:var(--ink);padding:1rem 1.1rem;display:flex;align-items:center;gap:.7rem}
.cap-import .acc-panel{overflow:hidden;max-height:0;transition:max-height .45s cubic-bezier(.22,.61,.36,1)}
.cap-import .acc-item.open .acc-panel,.cap-import .acc-item.active .acc-panel{max-height:3000px}
.cap-import .acc-panel-inner{padding:0 1.1rem 1.1rem}
.cap-import .acc-chevron{margin-left:auto;transition:transform .3s}
.cap-import .acc-item.open .acc-chevron{transform:rotate(180deg)}
.cap-import .btn,.cap-import .run{font-family:var(--fm);font-size:.76rem;font-weight:600;padding:.5rem .9rem;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:all .18s}
.cap-import .btn:hover,.cap-import .run:hover{border-color:var(--c1);transform:translateY(-1px)}
.cap-import .badge,.cap-import .label,.cap-import .kicker,.cap-import .sheet-tag,.cap-import .badge-num{font-family:var(--fm);font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c1)}
.cap-import table{width:100%;border-collapse:collapse}
.cap-import .lede,.cap-import .lead{font-size:1.05rem;color:var(--ink-2)}
.cap-import .answer{border-top:1px dashed var(--line);margin-top:.7rem;padding-top:.7rem;color:var(--ink-2)}
.cap-import .dot.on{fill:var(--c3);transition:fill .3s}
@media (max-width:640px){.cap-import .grid,.cap-import .card-grid{grid-template-columns:1fr}}

/* ===================== Colossus Brain III · camada de design ===================== */
:root{
  --sh-s:0 1px 2px rgba(28,24,19,.06),0 2px 6px rgba(28,24,19,.05);
  --sh-l:0 4px 8px rgba(28,24,19,.07),0 20px 48px rgba(28,24,19,.13);
  --ring:color-mix(in srgb,var(--c1) 40%,transparent);
}
[data-theme="dark"]{--sh-s:0 1px 2px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.28);
  --sh-l:0 6px 18px rgba(0,0,0,.4),0 20px 50px rgba(0,0,0,.45)}
/* marca */
.brand .mark{background:linear-gradient(140deg,var(--c1),var(--c7) 55%,var(--hi));color:var(--sobre-forte,#0B0F17);
  box-shadow:0 3px 10px color-mix(in srgb,var(--c1) 35%,transparent);letter-spacing:-.02em}
.brand b{letter-spacing:-.015em}
.brand .x1{background:linear-gradient(90deg,var(--hi),var(--c4));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-weight:800}
/* barra de navegação com vidro */
nav{backdrop-filter:saturate(1.5) blur(10px);-webkit-backdrop-filter:saturate(1.5) blur(10px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.tab{border-radius:999px}
.tab:hover{background:color-mix(in srgb,var(--c1) 10%,transparent);color:var(--c1)}
/* cabeçalho de capítulo */
.cap-head h2{letter-spacing:-.022em;line-height:1.14}
.cap-num{display:inline-block;padding:.3rem .75rem;border-radius:999px;
  background:color-mix(in srgb,var(--c1) 11%,transparent);color:var(--c1);font-weight:700}
.cap-rule{height:4px;width:74px;border-radius:99px;background:linear-gradient(90deg,var(--c1),var(--hi));opacity:.95}
.cap-sub{font-size:1.09rem;line-height:1.72;color:var(--ink-2);border-left:3px solid color-mix(in srgb,var(--c1) 30%,transparent);
  padding-left:1rem;margin-left:0}
/* seções */
.cap h3{letter-spacing:-.015em}
.cap .step{background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 16%,transparent),color-mix(in srgb,var(--hi) 14%,transparent));
  color:var(--c1);font-weight:700;border:1px solid color-mix(in srgb,var(--c1) 22%,transparent)}
/* blocos */
.box,.ficha,.howto,.naodito,.comece,.dgm,.alegoria,.quiz,.cap-import .card,.cap-import .callout,.cap-import .acc-item{
  border-radius:18px}
.ficha{background:linear-gradient(165deg,color-mix(in srgb,var(--c1) 4%,var(--card)),var(--card))}
.ficha:hover,.box:hover{box-shadow:var(--sh-l)}
.box.gold{background:linear-gradient(150deg,color-mix(in srgb,var(--hi) 14%,var(--card)),var(--card));
  border-color:color-mix(in srgb,var(--hi) 45%,var(--line))}
.alegoria{border-radius:20px}
/* tabelas */
.tw{border-radius:16px;border:1px solid var(--line);overflow-x:auto;overflow-y:visible;box-shadow:var(--sh-s);-webkit-overflow-scrolling:touch}
.tw table{margin:0}
.tw th{background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 10%,var(--card)),var(--card));
  font-family:var(--fd);font-weight:800;letter-spacing:.01em;border-bottom:2px solid color-mix(in srgb,var(--c1) 25%,var(--line))}
.tw td{border-color:color-mix(in srgb,var(--line) 75%,transparent)}
/* estante */
.est-item{border-radius:18px;background:linear-gradient(120deg,color-mix(in srgb,var(--kc) 7%,var(--card)),var(--card))}
.est-n{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:14px;
  background:color-mix(in srgb,var(--kc) 16%,transparent);color:var(--kc);font-size:.9rem}
.est-t{letter-spacing:-.012em}
/* hub */
.hub-card{border-radius:22px;border-top-width:5px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--hc) 10%,var(--card)),var(--card) 65%)}
.hub-ic{font-size:2.1rem;filter:drop-shadow(0 3px 6px rgba(0,0,0,.12))}
.hub-t{letter-spacing:-.012em}
.hub-card.sel{box-shadow:0 0 0 2px var(--hc), var(--sh-l)}
.hub-h b{letter-spacing:-.02em;background:linear-gradient(90deg,var(--ink),var(--c1));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
/* trilha (modo caminho) */
.tr-step{border-radius:18px}
.tr-n{border-radius:14px;background:linear-gradient(140deg,var(--c3),color-mix(in srgb,var(--c3) 70%,var(--c1)))}
/* comece por aqui */
.comece{background:linear-gradient(150deg,color-mix(in srgb,var(--c3) 9%,var(--card)),var(--card))}
/* barra inferior de navegação de capítulo */
#capNav{border-radius:999px;backdrop-filter:blur(12px);background:color-mix(in srgb,var(--card) 92%,transparent)}
/* foco acessível consistente */
a:focus-visible,button:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:10px}
/* módulos importados: mesma linguagem visual */
.cap-import .label,.cap-import .kicker,.cap-import .badge,.cap-import .sheet-tag,.cap-import .tagline{
  background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 14%,transparent),color-mix(in srgb,var(--hi) 12%,transparent));
  border:1px solid color-mix(in srgb,var(--c1) 20%,transparent)}
.cap-import .acc-trigger:hover{background:color-mix(in srgb,var(--c1) 5%,transparent)}
/* ritmo tipográfico */
.cap p{max-width:68ch}
.cap h3{padding-top:.2rem}
@media (max-width:520px){
  .cap-sub{padding-left:.8rem;font-size:1.02rem}
  .cap-num{font-size:.62rem}
  .est-n{width:2.2rem;height:2.2rem;border-radius:12px}
}
/* ===== Colossus Brain III: hub horizontal de trilhas (restaurado) ===== */
#hub{max-width:var(--maxw);margin:1.2rem auto 2.2rem;padding:0 var(--pad)}
body.kamim #hub,body.lendo #hub{display:none}
.hub-h{margin:0 0 1.1rem;display:block}
.hub-h b{display:block;font-family:var(--fd);font-weight:800;font-size:1.5rem;line-height:1.2;color:var(--ink)}
.hub-h span{display:block;font-family:var(--fm);font-size:.72rem;color:var(--ink-soft);margin-top:.4rem;line-height:1.65}
.hub-row{display:flex;flex-wrap:nowrap;gap:.8rem;overflow-x:auto;overflow-y:hidden;padding:.4rem .15rem 1rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.hub-row::-webkit-scrollbar{height:6px}
.hub-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.hub-card{scroll-snap-align:start;flex:0 0 auto;width:172px;min-height:158px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.28rem;
  text-align:left;padding:1rem .95rem;border-radius:22px;border:1px solid var(--line);border-top:5px solid var(--hc,var(--c1));
  background:linear-gradient(160deg,color-mix(in srgb,var(--hc) 10%,var(--card)),var(--card) 65%);
  cursor:pointer;box-shadow:var(--sh-s);animation:hubIn .55s backwards;
  transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s,border-color .22s}
@keyframes hubIn{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
.hub-card:hover{transform:translateY(-6px);box-shadow:var(--sh-l)}
.hub-card:active{transform:scale(.98)}
.hub-card.sel{box-shadow:0 0 0 2px var(--hc),var(--sh-l)}
.hub-ic{display:block;font-size:2.1rem;line-height:1;margin:0 0 auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.12))}
.hub-t{display:block;font-family:var(--fd);font-weight:800;font-size:.98rem;line-height:1.22;color:var(--ink);letter-spacing:-.012em}
.hub-n{display:block;font-family:var(--fm);font-size:.63rem;color:var(--ink-soft);margin-top:.15rem}
.hub-clear{display:none;margin-top:.3rem;font-family:var(--fm);font-size:.74rem;font-weight:600;color:var(--c1);
  background:none;border:0;cursor:pointer;padding:.4rem 0}
body.filtrado .hub-clear{display:inline-block}
.est-item.oculto{display:none !important}
@media (max-width:640px){.hub-card{width:158px;min-height:146px}}
/* ===================== Colossus Brain III · organização da tela ===================== */
/* --- entrada enxuta: só marca compacta + hub + estante --- */
#heroMini{display:none;max-width:var(--maxw);margin:0 auto;padding:1.6rem var(--pad) .4rem}
body.kamum:not(.lendo) #heroMini{display:block;animation:fadeUp .5s}
body.kamum:not(.lendo) #topo > *:not(#heroMini){display:none}
body.kamum:not(.lendo) #introWrap{display:none}
body.kamum.lendo #topo{display:none}
.hm-t{font-family:var(--fd);font-weight:800;font-size:clamp(1.7rem,7vw,2.4rem);line-height:1.08;letter-spacing:-.025em;color:var(--ink);margin:0}
.hm-t em{font-style:normal;background:linear-gradient(90deg,var(--c1),var(--hi));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hm-s{font-family:var(--fb);font-size:1rem;line-height:1.65;color:var(--ink-2);margin:.6rem 0 0;max-width:44ch}
.hm-stats{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.hm-chip{font-family:var(--fm);font-size:.66rem;font-weight:600;color:var(--ink-2);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:.32rem .7rem}
/* --- topo limpo: sem 42 abas no celular --- */
@media (max-width:900px){body.kamum .tab{display:none}}
nav .nav-in{gap:.4rem}
/* --- barra do capítulo em leitura --- */
#capBar{position:fixed;left:0;right:0;top:0;z-index:75;display:none;align-items:center;gap:.6rem;
  padding:.55rem var(--pad);background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body.kamum.lendo #capBar{display:flex;animation:fadeUp .35s}
body.kamum.lendo nav{display:none}
#capBar .cb-back{flex:none;font-family:var(--fm);font-size:.72rem;font-weight:700;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;cursor:pointer}
#capBar .cb-t{font-family:var(--fd);font-weight:800;font-size:.88rem;line-height:1.2;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#capBar .cb-n{flex:none;font-family:var(--fm);font-size:.68rem;color:var(--c1);font-weight:700}
body.kamum.lendo .cap.ativo{padding-top:3.2rem}
body.kamum.lendo{padding-bottom:4.5rem}
/* --- respiro e ritmo dentro do capítulo --- */
.cap .box,.cap .ficha,.cap .howto,.cap .alegoria,.cap .flow,.cap .grid,.cap .tw,.cap .road,.cap .principles{margin-top:1.4rem;margin-bottom:1.4rem}
.cap .grid{gap:.9rem}
.cap h3{margin-top:3rem;padding-top:1.2rem;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.cap h3:first-of-type{border-top:0;padding-top:0;margin-top:2rem}
.toc{padding:.9rem 1rem;background:var(--card);border:1px solid var(--line);border-radius:16px}
/* --- diagramas: legibilidade e dica de rolagem --- */
.dgm{padding:1rem .85rem .8rem}
.dgm figcaption{font-size:.7rem;line-height:1.6}
.dgm-scroll.tem-scroll,.svg-scroll.tem-scroll{position:relative}
.dgm-scroll.tem-scroll::after,.svg-scroll.tem-scroll::after{content:"↔ arraste";position:sticky;left:100%;bottom:0;
  display:inline-block;font-family:var(--fm);font-size:.6rem;color:var(--ink-soft);background:var(--card);
  border:1px solid var(--line);border-radius:99px;padding:.15rem .45rem;white-space:nowrap}
/* --- animações: sem exageros no toque --- */
@media (hover:none){
  .box:hover,.ficha:hover,.howto:hover,.naodito:hover,.est-item:hover,.hub-card:hover,.tr-step:hover,.lib-book:hover{
    transform:none;box-shadow:var(--sh-s)}
}
/* diagramas animados também no celular — ver camada de movimento */
.reveal{transform:translateY(10px);transition-duration:.42s}
/* --- limpeza de restos dos módulos importados --- */
.cap-import .hero,.cap-import .site-footer,.cap-import nav,.cap-import .progress,.cap-import .toc-fixed,
.cap-import .back-to-top,.cap-import .breadcrumbs{display:none !important}
.cap-import section:empty,.cap p:empty,.cap div:empty:not([class]){display:none}
/* --- Colossus Brain III: ajustes finais --- */
.dgm figcaption::before{content:"" !important}
body.kamum.lendo .to-top,body.kamum.lendo #toTop,body.kamum.lendo .topo-btn,body.kamum.lendo a[href="#topo"].fab{display:none !important}
body.kamum.lendo #capNav{bottom:.8rem}
.dgm-scroll.tem-scroll::after,.svg-scroll.tem-scroll::after{position:absolute;right:.4rem;bottom:.2rem;left:auto;opacity:.85}
.cap-import .svg-scroll{border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:14px;padding:.5rem}
#capBar{padding-top:calc(.55rem + env(safe-area-inset-top,0px))}
/* ===== estante dividida em partes ===== */
.est-parte{display:flex;align-items:center;gap:.7rem;margin:2rem 0 .6rem;padding:0}
.est-parte:first-child{margin-top:.4rem}
.est-parte .ep-t{font-family:var(--fm);font-size:.66rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.est-parte .ep-l{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.est-parte .ep-c{font-family:var(--fm);font-size:.62rem;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:99px;padding:.15rem .5rem;white-space:nowrap}
.est-parte.oculto{display:none}
/* as prateleiras (10/10/2026): o nome do grupo, a linha, a contagem e, embaixo,
   uma frase do que tem nela. O Núcleo ganha cor: é o foco do manual. */
.est-parte{flex-wrap:wrap}
.est-parte .ep-d{flex-basis:100%;font-family:var(--fb);font-size:.86rem;line-height:1.5;
  color:var(--ink-soft);letter-spacing:0;text-transform:none;margin-top:.15rem}
.est-parte.est-g0 .ep-t{color:var(--c1)}
.est-parte.est-g0{padding:.85rem 1rem .8rem;border:1px solid color-mix(in srgb,var(--c1) 30%,var(--line));
  border-radius:16px;background:color-mix(in srgb,var(--c1) 6%,var(--card))}
.est-item.est-comece .est-s::before{content:"Comece por aqui · passo " attr(data-passo) " · ";
  color:var(--c1);font-weight:700}
/* leitura mais calma */
.cap-import .card,.cap-import .callout{margin:1.4rem 0}
.cap-import h3{margin-top:3rem;padding-top:1.2rem;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.cap-import h3:first-of-type{border-top:0;padding-top:0}
/* ===== divisórias de parte (capas) ===== */
.parte-cover{max-width:var(--maxw);margin:4.5rem auto 2.5rem;padding:2.2rem var(--pad);text-align:center;position:relative}
body.kamum:not(.kamim) .parte-cover{display:none}
.parte-cover .pc-rom{display:inline-block;font-family:var(--fm);font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c1);background:color-mix(in srgb,var(--c1) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--c1) 30%,transparent);border-radius:999px;padding:.35rem .9rem}
.parte-cover .pc-t{font-family:var(--fd);font-weight:800;font-size:clamp(1.6rem,6vw,2.3rem);line-height:1.12;
  letter-spacing:-.025em;margin:.9rem 0 .4rem;color:var(--ink)}
.parte-cover .pc-d{font-family:var(--fb);font-size:1rem;color:var(--ink-2);max-width:46ch;margin:0 auto}
.parte-cover .pc-l{display:block;width:120px;height:4px;border-radius:99px;margin:1.4rem auto 0;
  background:linear-gradient(90deg,var(--c1),var(--hi))}
/* botão de modo sempre legível */
#modoBtn{font-weight:700}
/* aviso de modo corrido, para nunca ficar perdido */
#voltarCap{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:78;
  font-family:var(--fm);font-size:.74rem;font-weight:700;color:var(--bg);background:var(--ink);
  border:0;border-radius:999px;padding:.6rem 1.1rem;box-shadow:var(--sh-l);cursor:pointer}
body.kamim #voltarCap{display:block;animation:fadeUp .4s}
/* ============================================================
   Colossus Brain III · DESIGN SYSTEM v2 — acabamento profissional
   ============================================================ */
:root{
  --r-xs:10px;--r-sm:14px;--r-md:18px;--r-lg:24px;--r-xl:30px;
  --e1:0 1px 2px rgba(15,23,42,.05),0 2px 6px rgba(15,23,42,.04);
  --e2:0 2px 8px rgba(15,23,42,.06),0 10px 28px rgba(15,23,42,.08);
  --e3:0 10px 30px rgba(22,20,16,.09),0 30px 70px rgba(22,20,16,.11);
  --ez:cubic-bezier(.22,.61,.36,1);--ez-out:cubic-bezier(.16,1,.3,1);
  --sh-s:var(--e1);--sh-l:var(--e2);
}
[data-theme="dark"]{
  --e1:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.3);
  --e2:0 4px 14px rgba(0,0,0,.42),0 14px 36px rgba(0,0,0,.4);
  --e3:0 12px 34px rgba(0,0,0,.5),0 34px 80px rgba(0,0,0,.55);
}
::selection{background:color-mix(in srgb,var(--c1) 25%,transparent);color:var(--ink)}
*::-webkit-scrollbar{width:9px;height:7px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 16%,transparent);border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 28%,transparent)}
/* textura sutil de papel — dá profundidade sem ruído visual */
#grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme="dark"] #grain{opacity:.045}
/* entrada da página */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .5s var(--ez-out)}
/* ---------- tipografia ---------- */
.cap-head h2{font-size:clamp(1.7rem,6.2vw,2.6rem);letter-spacing:-.028em;line-height:1.1}
.cap h3{font-size:clamp(1.18rem,4.6vw,1.6rem);letter-spacing:-.018em}
.cap h4{letter-spacing:-.01em}
.cap p{line-height:1.78}
.cap-sub{font-size:clamp(1rem,3.6vw,1.12rem)}
/* meta do capítulo */
.cap-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 1.2rem}
.cap-meta span{font-family:var(--fm);font-size:.64rem;font-weight:600;letter-spacing:.05em;color:var(--ink-soft);
  background:color-mix(in srgb,var(--ink) 4%,var(--card));border:1px solid var(--line);border-radius:999px;padding:.3rem .68rem}
.cap-meta span.cm-parte{color:var(--c1);border-color:color-mix(in srgb,var(--c1) 28%,var(--line));
  background:color-mix(in srgb,var(--c1) 8%,transparent)}
/* ---------- componentes ---------- */
.box,.ficha,.howto,.naodito,.comece,.dgm,.alegoria,.quiz,.tw,.toc,.est-item,.tr-step,.cap-import .card,.cap-import .callout,.cap-import .acc-item{
  border-radius:var(--r-md);box-shadow:var(--e1);transition:box-shadow .3s var(--ez),transform .3s var(--ez),border-color .3s var(--ez)}
.hub-card{border-radius:var(--r-lg);box-shadow:var(--e1)}
@media (hover:hover){
  .box:hover,.ficha:hover,.howto:hover,.dgm:hover,.est-item:hover,.hub-card:hover,.tr-step:hover{box-shadow:var(--e2)}
}
.tw table tbody tr{transition:background .2s}
@media (hover:hover){.tw table tbody tr:hover td{background:color-mix(in srgb,var(--c1) 5%,transparent)}}
/* citações e destaques */
.cap blockquote,.quote{border-left:3px solid var(--hi);padding-left:1.1rem;font-style:italic;color:var(--ink-2)}
.cap strong{font-weight:700}
.cap em{font-style:italic}
/* botões: estado de pressão consistente */
button,.tab,.est-item,.hub-card,.tr-step{-webkit-tap-highlight-color:transparent}
.ripple{position:relative;overflow:hidden}
.ripple > .rp{position:absolute;border-radius:50%;transform:scale(0);opacity:.35;
  background:currentColor;pointer-events:none;animation:rp .6s var(--ez-out) forwards}
@keyframes rp{to{transform:scale(1);opacity:0}}
/* ---------- barra de leitura com progresso ---------- */
#capBar{box-shadow:var(--e1)}
#capBar .cb-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--c1),var(--hi));transition:transform .18s linear}
/* ---------- índice com seção ativa ---------- */
.toc a.ativo{background:color-mix(in srgb,var(--c1) 13%,transparent);border-color:var(--c1);color:var(--c1);font-weight:700}
/* ---------- estante ---------- */
.est-item{padding:1rem 1.05rem}
.est-n{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kc) 30%,transparent)}
.est-go{opacity:.5}
@media (hover:hover){.est-item:hover .est-go{opacity:1}}
.est-parte{margin-top:2.6rem}
.est-parte .ep-t{color:var(--ink);font-weight:800}
/* ---------- capas de parte ---------- */
.parte-cover{position:relative;overflow:hidden;padding:3rem var(--pad) 2.6rem}
.parte-cover::before{content:attr(data-rom);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--fd);font-weight:800;font-size:min(28vw,220px);line-height:1;color:var(--ink);
  opacity:.045;letter-spacing:-.05em;pointer-events:none;z-index:0}
.parte-cover > *{position:relative;z-index:1}
/* ---------- hub ---------- */
.hub-ic{width:2.8rem;height:2.8rem;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:color-mix(in srgb,var(--hc) 16%,transparent);font-size:1.5rem;filter:none;margin-bottom:auto}
.hub-card{padding:.95rem}
/* ---------- diagramas ---------- */
.dgm{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 2%,var(--card)),var(--card))}
.dgm figcaption{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);padding-top:.7rem}
/* ---------- rodapé e navegação ---------- */
footer{border-top:1px solid var(--line);margin-top:4rem;padding-top:2rem}
#capNav{box-shadow:var(--e3)}
/* ---------- foco premium ---------- */
:focus-visible{outline:2px solid var(--c1);outline-offset:3px;border-radius:8px}
/* ---------- redução de movimento ---------- */
@media (prefers-reduced-motion:reduce){body{animation:none}.ripple>.rp{display:none}}
/* botão concluído integrado à linha de meta */
.cap-meta{align-items:center}
.cap-meta .cap-done{margin-left:auto;font-family:var(--fm);font-size:.64rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;padding:.32rem .7rem .32rem .55rem;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-soft);display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}
.cap-meta .cap-done[aria-pressed="true"]{color:var(--c3);border-color:color-mix(in srgb,var(--c3) 45%,var(--line));
  background:color-mix(in srgb,var(--c3) 10%,transparent)}
.cap-head .cap-done{display:none}

/* ==========================================================================
   Colossus Brain III — camada de movimento e profundidade
   Regra da casa: só `transform` e `opacity` animam. Nada que force layout.
   Tudo aqui é aditivo — nenhuma regra anterior foi removida.
   ========================================================================== */
:root{
  --ab-spring:cubic-bezier(.34,1.56,.64,1);
  --ab-out:cubic-bezier(.16,1,.3,1);
  --ab-in-out:cubic-bezier(.65,0,.35,1);
  --ab-t-fast:.22s; --ab-t:.42s; --ab-t-slow:.68s;
  --ab-lift:0 1px 2px rgba(15,23,42,.05), 0 6px 16px rgba(15,23,42,.07), 0 18px 44px rgba(15,23,42,.08);
  --ab-lift-hi:0 2px 4px rgba(24,22,18,.06), 0 12px 28px rgba(24,22,18,.10), 0 34px 78px rgba(24,22,18,.12);
}
html[data-theme="dark"]{
  --ab-lift:0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.42), 0 20px 48px rgba(0,0,0,.4);
  --ab-lift-hi:0 3px 6px rgba(0,0,0,.55), 0 14px 34px rgba(0,0,0,.5), 0 38px 88px rgba(0,0,0,.55);
}

/* --------------------------------------------------------------------------
   1. MOTOR DE REVEAL (substitui o antigo .reveal por scroll-polling)
   -------------------------------------------------------------------------- */
.rv{opacity:0;transform:translate3d(0,20px,0);
    transition:opacity var(--ab-t) var(--ab-out) var(--rvd,0ms),
               transform var(--ab-t) var(--ab-out) var(--rvd,0ms)}
.rv[data-rv="left"]  {transform:translate3d(-26px,0,0)}
.rv[data-rv="right"] {transform:translate3d(26px,0,0)}
.rv[data-rv="scale"] {transform:scale(.93)}
.rv[data-rv="rise"]  {transform:translate3d(0,34px,0) scale(.985)}
.rv[data-rv="blur"]  {transform:translate3d(0,14px,0)}
.rv.on{opacity:1;transform:none}
.rv-busy{will-change:transform,opacity}
/* compatibilidade: o .reveal antigo continua existindo em conteúdo importado */
.reveal{opacity:0;transform:translate3d(0,16px,0);
        transition:opacity var(--ab-t) var(--ab-out),transform var(--ab-t) var(--ab-out)}
.reveal.vis{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   2. ENTRADA DE CAPÍTULO — cascata em vez de um bloco só
   -------------------------------------------------------------------------- */
@keyframes abCapIn{
  from{opacity:0;transform:translate3d(0,26px,0) scale(.994)}
  to  {opacity:1;transform:none}
}
@keyframes abHeadIn{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to  {opacity:1;transform:none}
}
@keyframes abRuleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
body.kamum .cap.ativo{animation:abCapIn .5s var(--ab-out) both}
body.kamum .cap.ativo > .cap-head{animation:abHeadIn .5s .04s var(--ab-out) both}
body.kamum .cap.ativo > .cap-rule{transform-origin:0 50%;animation:abRuleIn .7s .16s var(--ab-out) both}
body.kamum .cap.ativo > .cap-meta{animation:abHeadIn .5s .13s var(--ab-out) both}
body.kamum .cap.ativo > .cap-sub{animation:abHeadIn .5s .09s var(--ab-out) both}
body.kamum .cap.ativo > .toc{animation:abHeadIn .5s .2s var(--ab-out) both}
/* saída suave ao trocar de capítulo */
@keyframes abCapOut{to{opacity:0;transform:translate3d(0,-14px,0)}}
body.kamum .cap.saindo{animation:abCapOut .2s var(--ab-in-out) both}

/* --------------------------------------------------------------------------
   3. NAVEGAÇÃO — compacta ao rolar, com vidro fosco
   -------------------------------------------------------------------------- */
nav{transition:padding var(--ab-t-fast) var(--ab-out),
                background-color var(--ab-t-fast) linear,
                box-shadow var(--ab-t-fast) linear,
                backdrop-filter var(--ab-t-fast) linear}
body.ab-scrolled nav{
  box-shadow:0 1px 0 color-mix(in srgb,var(--line) 70%,transparent), 0 8px 24px rgba(20,18,14,.06);
  backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  background:color-mix(in srgb,var(--bg) 82%,transparent)}
html[data-theme="dark"] body.ab-scrolled nav{background:color-mix(in srgb,var(--bg) 76%,transparent)}
nav a.tab, .nav-tool, .theme-btn, .exam-btn{transition:transform .16s var(--ab-spring),background .2s,color .2s,border-color .2s,opacity .2s}
nav a.tab:active,.nav-tool:active,.theme-btn:active,.exam-btn:active{transform:scale(.93)}
nav a.tab.on{position:relative}
nav a.tab.on::after{content:"";position:absolute;left:12%;right:12%;bottom:2px;height:2px;border-radius:2px;
  background:currentColor;transform:scaleX(0);transform-origin:50%;animation:abRuleIn .3s var(--ab-out) forwards}

/* --------------------------------------------------------------------------
   4. ESTANTE / HUB / TRILHA — cascata de entrada + toque tátil
   -------------------------------------------------------------------------- */
@keyframes abShelfIn{
  from{opacity:0;transform:translate3d(0,22px,0) scale(.985)}
  to  {opacity:1;transform:none}
}
.est-item,.tr-step{animation:abShelfIn .46s var(--ab-out) backwards}
.est-item{transition:transform .2s var(--ab-out),box-shadow .25s var(--ab-out),border-color .25s,background-color .25s}
.est-item:active,.tr-step:active,.hub-card:active{transform:scale(.977)}
@media (hover:hover){
  .est-item:hover{transform:translate3d(6px,0,0);box-shadow:var(--ab-lift)}
  .tr-step:hover{transform:translate3d(6px,0,0);box-shadow:var(--ab-lift)}
}
.est-go{transition:transform .24s var(--ab-spring),opacity .2s}
.est-item:active .est-go{transform:translate3d(6px,0,0)}
.est-n{transition:transform .24s var(--ab-spring)}
.est-item:active .est-n{transform:scale(1.12)}
.est-item.oculto{display:none}
.est-parte.oculto{display:none}
.est-parte{opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .4s var(--ab-out),transform .4s var(--ab-out)}
.est-parte.on,.est-parte:not(.oculto){opacity:1;transform:none}

/* hub: rolagem horizontal com encaixe e sombras de borda */
.hub-row{scroll-snap-type:x proximity;scroll-padding-left:var(--pad);
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.hub-card{scroll-snap-align:start;
  transition:transform .22s var(--ab-out),box-shadow .28s var(--ab-out),border-color .22s}
@media (hover:hover){.hub-card:hover{transform:translate3d(0,-5px,0);box-shadow:var(--ab-lift-hi)}}
.hub-card.sel{box-shadow:var(--ab-lift-hi)}
.hub-card .hub-ic{transition:transform .3s var(--ab-spring)}
.hub-card.sel .hub-ic,.hub-card:active .hub-ic{transform:scale(1.14) rotate(-6deg)}
.hub-wrap{position:relative}
.hub-wrap::before,.hub-wrap::after{content:"";position:absolute;top:0;bottom:12px;width:34px;z-index:3;
  pointer-events:none;opacity:0;transition:opacity .25s}
.hub-wrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.hub-wrap::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.hub-wrap.ab-l::before{opacity:1}
.hub-wrap.ab-r::after{opacity:1}

/* --------------------------------------------------------------------------
   5. CARTÕES E CAIXAS — profundidade real (elevação em camadas)
   -------------------------------------------------------------------------- */
.box,.ficha,.howto,.naodito,.comece,.dgm,.alegoria,.quiz,.widget,.lib-book,.principle{
  transition:transform .26s var(--ab-out),box-shadow .3s var(--ab-out),border-color .26s}
@media (hover:hover){
  .box:hover,.ficha:hover,.howto:hover,.naodito:hover,.dgm:hover,.widget:hover,.principle:hover{
    transform:translate3d(0,-3px,0);box-shadow:var(--ab-lift)}
  .lib-book:hover{transform:translate3d(0,-5px,0) rotate(-.35deg);box-shadow:var(--ab-lift-hi)}
}
.box:active,.ficha:active{transform:translate3d(0,-1px,0)}
/* faixa de cor que "acende" ao revelar */
.box.alert,.box.gold{position:relative;overflow:hidden}
.box.alert::after,.box.gold::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:currentColor;opacity:.5;transform:scaleY(0);transform-origin:50% 0;
  transition:transform .6s var(--ab-out) .1s}
.box.alert.on::after,.box.gold.on::after,.rv.on.box.alert::after,.rv.on.box.gold::after{transform:scaleY(1)}

/* --------------------------------------------------------------------------
   6. DETALHES (accordion) — abertura e fechamento suaves
   -------------------------------------------------------------------------- */
@keyframes abDetailIn{
  from{opacity:0;transform:translate3d(0,-8px,0)}
  to  {opacity:1;transform:none}
}
details[open] > .din,
details[open] > div:not(.din),
details[open] > p,
details[open] > ol,
details[open] > ul{animation:abDetailIn .32s var(--ab-out) both}
details.ab-closing > *:not(summary){animation:abDetailIn .18s var(--ab-in-out) reverse both}
summary{transition:color .2s,background-color .2s}
summary::after{transition:transform .3s var(--ab-spring)}
/* aberto, o "+" gira e vira "×" (rodada 12: o "–" que entrava aqui girava
   junto e virava uma barra inclinada) */
details[open] > summary::after{content:"+";transform:translateY(-50%) rotate(45deg)}
summary:active{transform:none}

/* --------------------------------------------------------------------------
   7. DIAGRAMAS SVG — desenho progressivo (agora TAMBÉM no celular)
   -------------------------------------------------------------------------- */
@keyframes abDraw{from{stroke-dashoffset:var(--abLen,900)}to{stroke-dashoffset:0}}
@keyframes abNode{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes abText{from{opacity:0;transform:translate3d(0,4px,0)}to{opacity:1;transform:none}}
.dgm svg [data-ab-line]{stroke-dasharray:var(--abLen,900);stroke-dashoffset:var(--abLen,900)}
.dgm.on svg [data-ab-line]{animation:abDraw .9s var(--ab-out) var(--abD,0ms) forwards}
.dgm svg [data-ab-node]{opacity:0;transform-box:fill-box;transform-origin:center}
.dgm.on svg [data-ab-node]{animation:abNode .44s var(--ab-spring) var(--abD,0ms) forwards}
.dgm svg [data-ab-text]{opacity:0}
.dgm.on svg [data-ab-text]{animation:abText .4s var(--ab-out) var(--abD,0ms) forwards}
/* figura respira ao entrar */
.dgm figcaption{transition:opacity .4s var(--ab-out) .35s;opacity:.55}
.dgm.on figcaption{opacity:1}

/* --------------------------------------------------------------------------
   8. CAPAS DE PARTE — parallax do numeral romano + vinheta
   -------------------------------------------------------------------------- */
.parte-cover::before{
  transform:translate3d(-50%,calc(-50% + var(--abPx,0px)),0) rotate(var(--abPr,0deg));
  transition:opacity .6s var(--ab-out);will-change:transform}
.parte-cover::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,transparent 40%,color-mix(in srgb,var(--ink) 4%,transparent) 100%)}
.parte-cover .pc-rom,.parte-cover .pc-t,.parte-cover .pc-d,.parte-cover .pc-l{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .55s var(--ab-out) var(--rvd,0ms),transform .55s var(--ab-out) var(--rvd,0ms)}
.parte-cover.on .pc-rom{--rvd:0ms}
.parte-cover.on .pc-t{--rvd:90ms}
.parte-cover.on .pc-d{--rvd:170ms}
.parte-cover.on .pc-l{--rvd:250ms}
.parte-cover.on .pc-rom,.parte-cover.on .pc-t,.parte-cover.on .pc-d,.parte-cover.on .pc-l{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   9. QUIZ — resposta com resposta física
   -------------------------------------------------------------------------- */
@keyframes abShake{
  0%,100%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-6px,0,0)}
  40%{transform:translate3d(5px,0,0)}
  60%{transform:translate3d(-3px,0,0)}
  80%{transform:translate3d(2px,0,0)}
}
@keyframes abPop{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}}
.quiz-opt{transition:transform .16s var(--ab-out),background-color .2s,border-color .2s,opacity .2s}
.quiz-opt.correct{animation:abPop .42s var(--ab-spring)}
.quiz-opt.wrong{animation:abShake .42s var(--ab-in-out)}
.quiz-opt .mk{display:inline-block;transition:transform .3s var(--ab-spring)}
.quiz-opt.correct .mk,.quiz-opt.wrong .mk{transform:scale(1.25)}
.quiz-opt:disabled:not(.correct):not(.wrong){opacity:.5}
.quiz-fb{transform-origin:50% 0}
.quiz-fb.show{animation:abDetailIn .3s var(--ab-out) both}
.quiz-score.show{animation:abPop .5s var(--ab-spring), abDetailIn .4s var(--ab-out) both}
.quiz-prog{height:3px;border-radius:99px;background:color-mix(in srgb,var(--ink) 10%,transparent);
  margin:.2rem 0 .9rem;overflow:hidden}
.quiz-prog i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;border-radius:99px;
  background:linear-gradient(90deg,var(--c1),var(--c3));transition:transform .5s var(--ab-out)}

/* --------------------------------------------------------------------------
   10. FLASHCARD — 3D de verdade
   -------------------------------------------------------------------------- */
.fc{perspective:1200px}
.fc-inner{transition:transform .62s var(--ab-out);will-change:transform}
.fc:active .fc-inner{transform:scale(.985)}
.fc.flipped:active .fc-inner{transform:rotateY(180deg) scale(.985)}
.fc-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* --------------------------------------------------------------------------
   11. PAINÉIS FLUTUANTES — mola em vez de corte seco
   -------------------------------------------------------------------------- */
@keyframes abPanelIn{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.97)}
  to  {opacity:1;transform:none}
}
.pomo.show,#tools.show,#notes.show{animation:abPanelIn .34s var(--ab-spring) both}
.toast{transition:opacity .28s var(--ab-out),transform .38s var(--ab-spring),visibility .3s}
.toast.show{transform:translateX(-50%) translateY(0) scale(1)}
.toast:not(.show){transform:translateX(-50%) translateY(22px) scale(.94)}
.reader{transition:opacity .28s var(--ab-out)}
.reader.show{animation:none;opacity:1}
.reader.show .reader-box{animation:abPanelIn .4s var(--ab-spring) both}
.reader-page{transition:opacity .22s var(--ab-out),transform .22s var(--ab-out)}
.reader-page.ab-turn{opacity:0;transform:translate3d(14px,0,0)}
.reader-page.ab-turn-back{opacity:0;transform:translate3d(-14px,0,0)}
#capNav{transition:transform .32s var(--ab-spring),opacity .25s}
body.ab-navdown #capNav{transform:translateX(-50%) translateY(120%);opacity:0}
#capNav button{transition:transform .16s var(--ab-spring),background .2s,opacity .2s}
#capNav button:active:not(:disabled){transform:scale(.93)}
#capBar{transition:transform .3s var(--ab-out),opacity .25s}
.totop{transition:opacity .3s var(--ab-out),transform .34s var(--ab-spring),visibility .3s}
.totop.show{transform:translateY(0) scale(1)}
.totop:not(.show){transform:translateY(14px) scale(.9)}

/* barra do capítulo: ferramentas essenciais continuam ao alcance ao ler */
/* o título do capítulo ficava por baixo da barra fixa — agora respira */
body.kamum.lendo .cap.ativo{padding-top:calc(var(--abCbH,52px) + 1.5rem)}
html{scroll-padding-top:calc(var(--abCbH,52px) + 1.5rem)}
section.cap h3[id]{scroll-margin-top:calc(var(--abCbH,52px) + 1.2rem)}
#capBar{flex-wrap:nowrap}
#capBar .cb-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cb-tools{margin-left:auto;display:flex;gap:.22rem;flex:none;align-items:center}
.cb-tools button{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:.9rem;line-height:1;cursor:pointer;
  transition:transform .16s var(--ab-spring),background .2s,border-color .2s}
.cb-tools button:active{transform:scale(.88)}
.cb-tools button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (max-width:400px){.cb-tools button{width:29px;height:29px;font-size:.82rem}#capBar .cb-t{font-size:.72rem}}
body.lendo.ab-buscando .search-wrap{position:fixed;left:0;right:0;top:var(--abCbH,46px);z-index:74;margin:0;
  max-width:none;padding:.5rem var(--pad) .55rem;background:color-mix(in srgb,var(--bg) 96%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);box-shadow:0 8px 22px rgba(20,18,14,.08);
  animation:abDetailIn .26s var(--ab-out) both}
body.lendo:not(.ab-buscando) .search-wrap{display:none}
body.lendo.ab-buscando .search-info{position:fixed;left:0;right:0;top:calc(var(--abCbH,46px) + 52px);z-index:73;
  margin:0;padding:.2rem var(--pad);text-align:center}

/* --------------------------------------------------------------------------
   12. PROGRESSO — anel e números com vida
   -------------------------------------------------------------------------- */
.prog-ring .ring-fg{transition:stroke-dashoffset .9s var(--ab-out)}
.prog-ring{transition:transform .3s var(--ab-spring)}
.prog-ring.ab-bump{transform:scale(1.16)}
.streak.ab-bump{animation:abPop .5s var(--ab-spring)}
.cap-done .chk{transition:transform .3s var(--ab-spring),background-color .22s,border-color .22s}
.cap-done[aria-pressed="true"] .chk{transform:scale(1.1) rotate(-6deg)}
.cap-done{transition:transform .16s var(--ab-spring),background-color .22s,border-color .22s,color .22s}
.cap-done:active{transform:scale(.94)}

/* confete leve — só transform/opacity, 14 partículas, some sozinho */
.ab-confete{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden}
.ab-confete i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:0;
  animation:abFall var(--abT,2.2s) var(--ab-in-out) var(--abD,0ms) forwards}
@keyframes abFall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg)}
  10%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--abX,0px),102vh,0) rotate(var(--abR,540deg))}
}

/* --------------------------------------------------------------------------
   13. DESTAQUES DE TEXTO — traço que se pinta ao entrar em cena
   -------------------------------------------------------------------------- */
/* O traço era um ::before absoluto, e num destaque que quebra de linha ele
   cobria só um pedaço: "como um estrategista" ficava com o amarelo atrás
   de "ategista" e o resto em tinta escura sobre o fundo escuro, invisível
   no tema escuro (achado pelo dono, 07/10/2026). Agora é FUNDO, que com
   box-decoration-break:clone se pinta linha a linha; e a tinta só escurece
   quando o amarelo está atrás dela. */
.hl{background:linear-gradient(var(--hi),var(--hi)) no-repeat 0 0/0% 100%;color:inherit;
  padding:0 .06em;border-radius:.12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  transition:background-size .7s var(--ab-out) var(--rvd,.15s),color .25s var(--rvd,.15s)}
.hl.on,.on .hl,h1 .hl{background-size:100% 100%;color:#1A1013}
mark.hit{background:var(--hi);color:#1A1013;border-radius:3px;padding:0 .12em;
  animation:abPop .35s var(--ab-spring)}

/* --------------------------------------------------------------------------
   14. TABELAS E LISTAS — entrada escalonada
   -------------------------------------------------------------------------- */
.tw.on table tbody tr{animation:abDetailIn .34s var(--ab-out) both}
.tw.on table tbody tr:nth-child(1){animation-delay:.02s}
.tw.on table tbody tr:nth-child(2){animation-delay:.05s}
.tw.on table tbody tr:nth-child(3){animation-delay:.08s}
.tw.on table tbody tr:nth-child(4){animation-delay:.11s}
.tw.on table tbody tr:nth-child(5){animation-delay:.14s}
.tw.on table tbody tr:nth-child(n+6){animation-delay:.17s}
.chklist li{transition:transform .18s var(--ab-out),background-color .22s,border-color .22s,opacity .22s}
.chklist li:active{transform:scale(.985)}
.chklist li .ck{transition:transform .3s var(--ab-spring),background-color .2s,border-color .2s}
.chklist li.done .ck{transform:scale(1.12) rotate(-8deg)}
.chklist li.done{opacity:.68}

/* --------------------------------------------------------------------------
   15. WIDGETS NOVOS (Colossus Brain III)
   -------------------------------------------------------------------------- */
.ab-w{margin:1.5rem 0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.15rem 1.2rem;box-shadow:var(--ab-lift);position:relative;overflow:hidden}
.ab-w::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--abC,var(--c1)),color-mix(in srgb,var(--abC,var(--c1)) 25%,transparent))}
.ab-w-t{font-family:var(--fm);font-size:.66rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--abC,var(--c1));display:block;margin-bottom:.5rem}
.ab-w-s{font-size:.9rem;color:var(--ink-2);line-height:1.6;margin:0 0 .9rem}
.ab-btn{font-family:var(--fm);font-size:.76rem;font-weight:600;padding:.5rem .95rem;border-radius:999px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;
  transition:transform .15s var(--ab-spring),background .2s,border-color .2s,color .2s}
.ab-btn:active{transform:scale(.94)}
.ab-btn.pri{background:var(--abC,var(--c1));border-color:var(--abC,var(--c1));color:var(--sobre-forte,#FFFFFF)}
.ab-btn:disabled{opacity:.4;cursor:default}
.ab-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.7rem}
.ab-note{font-family:var(--fm);font-size:.72rem;color:var(--ink-soft);line-height:1.6;margin-top:.6rem;min-height:1.2em}

/* curva do esquecimento */
.ab-curve{width:100%;height:auto;display:block;margin:.4rem 0 .2rem;overflow:visible}
.ab-curve .cv-line{fill:none;stroke-width:2.5;stroke-linecap:round;
  transition:d .7s var(--ab-out),opacity .4s}
.ab-curve .cv-area{transition:opacity .5s var(--ab-out)}
.ab-curve .cv-mark{transition:transform .5s var(--ab-spring),opacity .4s}
.ab-curve text{font-family:var(--fm);font-size:9px;fill:var(--ink-soft)}
.ab-slider{width:100%;accent-color:var(--abC,var(--c1));margin:.5rem 0 0}

/* treinador de memorização */
.ab-drill-stage{min-height:104px;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--ink) 3%,var(--card));border:1px dashed var(--line);
  border-radius:12px;padding:.9rem;margin:.3rem 0 .2rem;text-align:center}
.ab-chip{font-family:var(--fm);font-size:.88rem;font-weight:600;padding:.36rem .7rem;border-radius:8px;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  animation:abNodeChip .34s var(--ab-spring) backwards}
@keyframes abNodeChip{from{opacity:0;transform:scale(.8) translate3d(0,8px,0)}to{opacity:1;transform:none}}
.ab-chip.ok{border-color:var(--c3);color:var(--c3);background:color-mix(in srgb,var(--c3) 10%,transparent)}
.ab-chip.miss{border-color:var(--c4);color:var(--c4);background:color-mix(in srgb,var(--c4) 10%,transparent);text-decoration:line-through}
.ab-big{font-family:var(--fm);font-weight:800;font-size:2.2rem;letter-spacing:.06em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.ab-timer{height:4px;border-radius:99px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden;margin:.5rem 0 0}
.ab-timer i{display:block;height:100%;width:100%;transform-origin:0 50%;border-radius:99px;
  background:linear-gradient(90deg,var(--abC,var(--c1)),var(--c4))}
.ab-input{width:100%;font-family:var(--fm);font-size:.95rem;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:10px;padding:.6rem .8rem;transition:border-color .2s,box-shadow .2s}
.ab-input:focus{outline:none;border-color:var(--abC,var(--c1));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--abC,var(--c1)) 16%,transparent)}

/* tabela Major 00-99 */
.ab-major{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.4rem;margin-top:.7rem}
.ab-major b{display:flex;flex-direction:column;gap:.05rem;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:.42rem .55rem;font-weight:400;
  animation:abNodeChip .3s var(--ab-out) backwards}
.ab-major b i{font-family:var(--fm);font-size:.66rem;font-style:normal;font-weight:700;color:var(--abC,var(--c2));letter-spacing:.06em}
.ab-major b span{font-family:var(--fd);font-size:.9rem;font-weight:700;color:var(--ink);line-height:1.2}
.ab-major b em{font-family:var(--fm);font-size:.6rem;font-style:normal;color:var(--ink-soft)}

/* --------------------------------------------------------------------------
   16. TEXTURA E PROFUNDIDADE DE FUNDO
   -------------------------------------------------------------------------- */
#grain{opacity:.022}
html[data-theme="dark"] #grain{opacity:.038}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(90% 60% at 50% -10%, color-mix(in srgb,var(--c1) 5%,transparent), transparent 70%)}
.cap{position:relative}
.cap-import,.cap{contain:layout style}

/* --------------------------------------------------------------------------
   17. FOCO E ACESSIBILIDADE
   -------------------------------------------------------------------------- */
:focus-visible{outline:2.5px solid var(--c1);outline-offset:3px;border-radius:8px;
  transition:outline-offset .15s var(--ab-out)}

/* --------------------------------------------------------------------------
   18. RESPEITO A "REDUZIR MOVIMENTO" E IMPRESSÃO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .rv,.reveal{opacity:1!important;transform:none!important}
  .dgm svg [data-ab-line]{stroke-dashoffset:0!important}
  .dgm svg [data-ab-node],.dgm svg [data-ab-text]{opacity:1!important}
  .parte-cover .pc-rom,.parte-cover .pc-t,.parte-cover .pc-d,.parte-cover .pc-l{opacity:1!important;transform:none!important}
  .hl{background-size:100% 100%!important;color:#1A1013!important}
  .ab-confete{display:none}
}
@media print{
  .rv,.reveal{opacity:1!important;transform:none!important}
  .dgm svg [data-ab-line]{stroke-dashoffset:0!important}
  .dgm svg [data-ab-node],.dgm svg [data-ab-text]{opacity:1!important}
  .parte-cover .pc-rom,.parte-cover .pc-t,.parte-cover .pc-d,.parte-cover .pc-l{opacity:1!important;transform:none!important}
  .ab-w,.ab-confete,#capNav,#capBar,.totop{display:none!important}
}
/* modo prova e busca nunca escondem conteúdo por animação */
body.exam-mode .rv,body.search-on .rv,#examContent .rv{opacity:1!important;transform:none!important}
body.search-on .dgm svg [data-ab-node],body.search-on .dgm svg [data-ab-text]{opacity:1!important}
body.search-on .dgm svg [data-ab-line]{stroke-dashoffset:0!important}


/* ==========================================================================
   COLOSSUS BRAIN II — camada de publicação
   Marca · CTAs · slots de anúncio · consentimento · afiliados · rodapé
   Aditiva: nenhuma regra anterior foi removida.
   ========================================================================== */
html{overflow-x:clip}
:root{
  --cb-gold:#7A5810; --cb-deep:#0B0F17; --cb-ink:var(--ink);
  --cb-glow:0 0 0 1px color-mix(in srgb,var(--c1) 22%,transparent), 0 10px 40px color-mix(in srgb,var(--c1) 14%,transparent);
  --cb-pad:clamp(1rem,4vw,2rem);
}

/* ---------- acessibilidade: pular para o conteúdo ---------- */
.cb-skip{position:fixed;left:50%;top:-100px;transform:translateX(-50%);z-index:200;
  background:var(--ink);color:var(--bg);font-family:var(--fm);font-size:.82rem;font-weight:600;
  padding:.7rem 1.2rem;border-radius:0 0 12px 12px;text-decoration:none;
  transition:top .25s var(--ab-out)}
.cb-skip:focus{top:0;outline:2px solid var(--c1);outline-offset:2px}

/* ---------- identidade ---------- */
.brand .mark{background:linear-gradient(145deg,var(--c1),var(--c2) 55%,var(--c7));color:var(--sobre-forte,#FFFFFF);
  box-shadow:0 2px 8px color-mix(in srgb,var(--c2) 40%,transparent);transform:rotate(-3deg);
  transition:transform .35s var(--ab-spring),box-shadow .35s}
.brand:hover .mark{transform:rotate(3deg) scale(1.06)}
.brand .x1{background:linear-gradient(90deg,var(--cb-gold),var(--c5));-webkit-background-clip:text;
  background-clip:text;color:transparent;font-weight:900;letter-spacing:.02em}

#heroMini .hm-t{letter-spacing:-.03em}
#heroMini .hm-t em{font-style:normal;background:linear-gradient(90deg,var(--cb-gold),var(--c5) 60%,var(--c4));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- CTAs ---------- */
.cb-cta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1.3rem 0 .4rem}
.cb-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fd);font-weight:800;
  font-size:.95rem;line-height:1;padding:.85rem 1.4rem;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;position:relative;overflow:hidden;
  transition:transform .18s var(--ab-spring),box-shadow .28s var(--ab-out),filter .2s,background .2s,color .2s}
.cb-btn-pri{background:linear-gradient(135deg,var(--c1),var(--c2));color:var(--sobre-forte,#FFFFFF);
  box-shadow:0 2px 6px color-mix(in srgb,var(--c1) 28%,transparent),0 12px 34px color-mix(in srgb,var(--c2) 22%,transparent)}
.cb-btn-pri:hover{filter:brightness(1.07);transform:translateY(-2px)}
.cb-btn-sec{background:var(--card);color:var(--ink);border-color:var(--line)}
.cb-btn-sec:hover{border-color:var(--c1);color:var(--c1);transform:translateY(-2px)}
.cb-btn:active{transform:scale(.96)}
.cb-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:radial-gradient(120% 120% at 50% 0%,rgba(255,255,255,.35),transparent 60%);transition:opacity .3s}
.cb-btn-pri:hover::after{opacity:1}
.cb-cta-nota{font-family:var(--fm);font-size:.7rem;color:var(--ink-soft);flex-basis:100%;margin-top:.1rem}

/* CTA de fim de capítulo */
.cb-fim{margin:3rem 0 1rem;padding:1.5rem var(--cb-pad);border-radius:var(--radius);
  border:1px solid var(--line);position:relative;overflow:hidden;
  background:linear-gradient(140deg,color-mix(in srgb,var(--c1) 7%,var(--card)),var(--card) 60%)}
.cb-fim::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 130% at 100% 0%,color-mix(in srgb,var(--c2) 12%,transparent),transparent 60%)}
.cb-fim > *{position:relative}
.cb-fim-t{display:block;font-family:var(--fm);font-size:.64rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c1);margin-bottom:.5rem}
.cb-fim h4{font-family:var(--fd);font-weight:800;font-size:clamp(1.05rem,3.6vw,1.3rem);
  line-height:1.25;margin:0 0 .45rem;letter-spacing:-.015em}
.cb-fim p{font-size:.93rem;color:var(--ink-2);line-height:1.6;margin:0}
.cb-prox{display:flex;align-items:center;gap:.7rem;margin-top:1rem;padding:.75rem .95rem;
  border-radius:12px;border:1px solid var(--line);background:var(--card);text-decoration:none;color:inherit;
  transition:transform .2s var(--ab-out),box-shadow .25s,border-color .25s}
.cb-prox:hover{transform:translateX(5px);border-color:var(--c1);box-shadow:var(--ab-lift)}
.cb-prox .p-l{font-family:var(--fm);font-size:.6rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);display:block}
.cb-prox .p-t{font-family:var(--fd);font-weight:800;font-size:.97rem;color:var(--ink);line-height:1.25;display:block}
.cb-prox .p-a{margin-left:auto;font-size:1.3rem;color:var(--c1);flex:none;transition:transform .25s var(--ab-spring)}
.cb-prox:hover .p-a{transform:translateX(4px)}
                                   /* só aparece quando configurado + consentido */









/* ---------- afiliados ---------- */
.cb-af{margin:1.8rem 0;border:1px solid var(--line);border-left:5px solid var(--cb-gold);
  border-radius:var(--radius);background:var(--card);box-shadow:var(--ab-lift);overflow:hidden}
.cb-af-h{display:flex;align-items:center;gap:.55rem;padding:.6rem 1rem;
  background:color-mix(in srgb,var(--cb-gold) 10%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--cb-gold) 22%,var(--line))}
.cb-af-h b{font-family:var(--fm);font-size:.62rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--c5)}
.cb-af-h span{font-family:var(--fm);font-size:.6rem;color:var(--ink-soft);margin-left:auto}
.cb-af-body{padding:1rem 1.1rem}
.cb-af-body h4{font-family:var(--fd);font-weight:800;font-size:1.02rem;margin:0 0 .3rem;letter-spacing:-.01em}
.cb-af-body p{font-size:.92rem;color:var(--ink-2);line-height:1.6;margin:0 0 .8rem}
.cb-af-link{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--fd);font-weight:800;
  font-size:.9rem;padding:.6rem 1.1rem;border-radius:999px;text-decoration:none;color:#1c1b19;
  background:linear-gradient(135deg,var(--cb-gold),var(--c5));
  box-shadow:0 2px 10px color-mix(in srgb,var(--cb-gold) 35%,transparent);
  transition:transform .18s var(--ab-spring),filter .2s}
.cb-af-link:hover{filter:brightness(1.06);transform:translateY(-2px)}
.cb-af-link:active{transform:scale(.96)}
.cb-af-nota{font-family:var(--fm);font-size:.66rem;color:var(--ink-soft);line-height:1.55;margin:.7rem 0 0}
.cb-af-nota a{color:var(--ink-soft);text-decoration:underline}

/* aviso global de divulgação */
.cb-disc{max-width:var(--maxw);margin:0 auto 1.2rem;padding:.6rem var(--pad);
  font-family:var(--fm);font-size:.68rem;line-height:1.6;color:var(--ink-soft);text-align:center}
.cb-disc a{color:var(--c1)}










/* ---------- rodapé institucional ---------- */
.cb-foot{margin-top:3rem;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--ink) 3%,transparent))}
.cb-foot-in{max-width:var(--maxw);margin:0 auto;padding:2.6rem var(--pad) 1.4rem;
  display:grid;gap:2rem;grid-template-columns:1.4fr 1fr 1fr}
@media (max-width:720px){.cb-foot-in{grid-template-columns:1fr;gap:1.6rem}}
.cb-foot-marca{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.cb-foot-marca i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-style:normal;
  font-family:var(--fd);font-weight:900;font-size:1rem;color:var(--sobre-forte,#FFFFFF);
  background:linear-gradient(145deg,var(--c1),var(--c2) 55%,var(--c7));
  box-shadow:0 2px 10px color-mix(in srgb,var(--c2) 35%,transparent)}
.cb-foot-marca b{font-family:var(--fd);font-weight:900;font-size:1.06rem;letter-spacing:-.02em}
.cb-foot-marca b em{font-style:normal;background:linear-gradient(90deg,var(--cb-gold),var(--c5));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cb-foot p{font-size:.88rem;line-height:1.65;color:var(--ink-2);margin:0 0 .6rem;max-width:44ch}
.cb-foot h5{font-family:var(--fm);font-size:.62rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 .6rem}
.cb-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.cb-foot ul a{font-size:.9rem;color:var(--ink-2);text-decoration:none;
  transition:color .2s,transform .2s var(--ab-out);display:inline-block}
.cb-foot ul a:hover{color:var(--c1);transform:translateX(3px)}
.cb-foot-base{max-width:var(--maxw);margin:0 auto;padding:1rem var(--pad) 2.4rem;
  border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:space-between}
.cb-foot-base small{font-family:var(--fm);font-size:.68rem;color:var(--ink-soft);line-height:1.6}
.cb-foot-base .cb-mini{display:flex;gap:.45rem;flex-wrap:wrap}
.cb-mini button{font-family:var(--fm);font-size:.66rem;padding:.32rem .7rem;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft);cursor:pointer;
  transition:border-color .2s,color .2s,transform .16s var(--ab-spring)}
.cb-mini button:hover{border-color:var(--c1);color:var(--c1)}
.cb-mini button:active{transform:scale(.94)}
body.lendo .cb-foot{display:none}

/* ---------- refinamentos visuais gerais ---------- */
.cap-num{background:linear-gradient(135deg,var(--pc,var(--c1)),color-mix(in srgb,var(--pc,var(--c1)) 62%,var(--c2)));
  color:var(--sobre-forte,#FFFFFF);text-shadow:0 1px 2px rgba(0,0,0,.28)}
.parte-cover .pc-t{background:linear-gradient(92deg,var(--ink),color-mix(in srgb,var(--ink) 62%,var(--c1)));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cap-rule{background:linear-gradient(90deg,var(--pc,var(--c1)),color-mix(in srgb,var(--pc,var(--c1)) 20%,transparent))}
blockquote,.quote{position:relative}
.quote::before{content:"\201C";position:absolute;left:-.1em;top:-.35em;font-family:var(--fd);font-weight:900;
  font-size:3.4rem;line-height:1;color:var(--hi);opacity:.5;pointer-events:none}

/* barra de leitura mais viva */
#bar{height:3px;background:linear-gradient(90deg,var(--c1),var(--c2) 35%,var(--c7) 65%,var(--c5))}

/* selo de "atualizado em" */
.cb-atual{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fm);font-size:.63rem;
  font-weight:600;letter-spacing:.05em;color:var(--ink-soft);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem}
.cb-atual i{width:6px;height:6px;border-radius:50%;background:var(--c3);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c3) 22%,transparent)}

/* aviso de versão desktop */
.cb-desk{max-width:var(--maxw);margin:1.4rem auto;padding:0 var(--pad)}
.cb-desk-in{display:flex;gap:.9rem;align-items:center;padding:.9rem 1.1rem;border-radius:14px;
  border:1px solid var(--line);background:linear-gradient(120deg,color-mix(in srgb,var(--c2) 8%,var(--card)),var(--card));
  text-decoration:none;color:inherit;transition:transform .22s var(--ab-out),box-shadow .28s,border-color .22s}
.cb-desk-in:hover{transform:translateY(-3px);box-shadow:var(--ab-lift-hi);border-color:var(--c2)}
.cb-desk-ic{font-size:1.5rem;flex:none}
.cb-desk-t{font-family:var(--fd);font-weight:800;font-size:.98rem;display:block;line-height:1.25}
.cb-desk-s{font-family:var(--fm);font-size:.7rem;color:var(--ink-soft);display:block;margin-top:.15rem;line-height:1.5}
.cb-desk-a{margin-left:auto;color:var(--c2);font-size:1.2rem;flex:none}
/* o convite agora é para ATIVAR o layout editorial — só faz sentido em tela larga */
.cb-desk{display:none}
@media (min-width:1000px){body:not(.cbd) .cb-desk{display:block}}
.cb-desk-in{width:100%;text-align:left;font:inherit;cursor:pointer}


/* ==========================================================================
   COLOSSUS BRAIN II — páginas institucionais embutidas (rotas por hash)
   ========================================================================== */
.cb-docs{position:fixed;inset:0;z-index:150;display:none;background:var(--bg);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.cb-doc-on .cb-docs{display:block}
body.cb-doc-on{overflow:hidden}
/* --pad nunca existiu no manual (só nas páginas do site, de onde esta regra
   veio): sem valor, a declaração inteira caía e o painel ficava sem margem
   nenhuma, com o texto encostado na borda do celular (07/10/2026) */
.cb-doc{display:none;max-width:760px;margin:0 auto;padding:1.4rem var(--pad,1.2rem) 4rem}
.cb-doc.on{display:block;animation:abDetailIn .38s var(--ab-out) both}
/* rede de segurança sem JavaScript: :target sozinho já abre o documento */
.cb-docs:has(.cb-doc:target){display:block}
.cb-doc:target{display:block}
.cb-docs:has(.cb-doc:target) .cb-doc[data-doc="__topo"]{display:block}
.cb-doc-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:.7rem;
  margin:0 -1px 1.6rem;padding:.75rem 0;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);
  border-bottom:1px solid var(--line)}
.cb-doc-top .m{display:flex;align-items:center;gap:.5rem;font-family:var(--fd);font-weight:900;
  font-size:.98rem;letter-spacing:-.02em}
.cb-doc-top .m i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-style:normal;
  font-size:.9rem;color:var(--sobre-forte,#FFFFFF);background:linear-gradient(145deg,var(--c1),var(--c2) 55%,var(--c7))}
.cb-doc-top .m em{font-style:normal;background:linear-gradient(90deg,var(--cb-gold),var(--c5));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cb-doc-x{margin-left:auto;font-family:var(--fm);font-size:.72rem;font-weight:600;
  border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;
  padding:.45rem .9rem;cursor:pointer;
  transition:border-color .2s,color .2s,transform .16s var(--ab-spring)}
.cb-doc-x:hover{border-color:var(--c1);color:var(--c1)}
.cb-doc-x:active{transform:scale(.94)}
.cb-doc-nav{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.6rem}
.cb-doc-nav a{font-family:var(--fm);font-size:.7rem;text-decoration:none;color:var(--ink-2);
  border:1px solid var(--line);background:var(--card);border-radius:999px;padding:.33rem .75rem;
  transition:all .18s var(--ab-out)}
.cb-doc-nav a:hover{border-color:var(--c1);color:var(--c1);transform:translateY(-1px)}
.cb-doc-nav a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cb-doc h1,.cb-doc .cb-doc-t{font-family:var(--fd);font-weight:900;font-size:clamp(1.8rem,6vw,2.5rem);line-height:1.12;
  letter-spacing:-.03em;margin-bottom:.5rem}.cb-doc .cb-doc-t{margin-top:1.1rem}
.cb-doc .sub{color:var(--ink-2);font-size:1.05rem;line-height:1.65;margin-bottom:.9rem}
.cb-doc .data{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fm);font-size:.64rem;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;
  background:var(--card);margin-bottom:2rem}
.cb-doc .data i{width:6px;height:6px;border-radius:50%;background:var(--c3);flex:none}
.cb-doc h2{font-family:var(--fd);font-weight:800;font-size:clamp(1.15rem,4.4vw,1.5rem);letter-spacing:-.02em;
  margin:2.3rem 0 .6rem;line-height:1.25}
.cb-doc h3{font-family:var(--fd);font-weight:800;font-size:1.02rem;margin:1.5rem 0 .4rem}
.cb-doc p{margin-bottom:1rem;color:var(--ink-2);line-height:1.75}
.cb-doc p strong,.cb-doc li strong{color:var(--ink)}
.cb-doc ul,.cb-doc ol{margin:0 0 1.1rem 1.3rem;color:var(--ink-2)}
.cb-doc li{margin-bottom:.45rem;line-height:1.7}
.cb-doc .card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1.05rem 1.2rem;margin:1.3rem 0;box-shadow:var(--ab-lift)}
.cb-doc .card.gold{border-left:4px solid var(--cb-gold);background:color-mix(in srgb,var(--cb-gold) 6%,var(--card))}
.cb-doc .card.blue{border-left:4px solid var(--c1);background:color-mix(in srgb,var(--c1) 5%,var(--card))}
.cb-doc .card .t{display:block;font-family:var(--fm);font-size:.61rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--c1);margin-bottom:.5rem}
.cb-doc .card.gold .t{color:var(--c5)}
.cb-doc .card p:last-child{margin-bottom:0}
.cb-doc table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem}
.cb-doc th{font-family:var(--fm);font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  text-align:left;background:var(--ink);color:var(--bg);padding:.6rem .75rem}
.cb-doc td{padding:.6rem .75rem;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.cb-doc tr:nth-child(even) td{background:color-mix(in srgb,var(--ink) 3%,transparent)}
/* As tabelas dos capítulos têm largura mínima (440px, 360px em tela
   pequena) porque moram numa moldura .tw que rola para o lado. As dos
   painéis não têm moldura, e no celular quem rolava para o lado era o
   painel inteiro (07/10/2026). Aqui elas cabem: palavra inteira e, abaixo
   de 560px, a de três colunas vira um cartão por linha, como na página. */
.cb-doc table{min-width:0}
.cb-doc td,.cb-doc th{word-break:normal;overflow-wrap:break-word;hyphens:auto}
@media (max-width:560px){
  .cb-doc table.empilha,.cb-doc table.empilha tbody,.cb-doc table.empilha tr,
  .cb-doc table.empilha td{display:block;width:auto}
  .cb-doc table.empilha tr:first-child{display:none}
  .cb-doc table.empilha tr{border-bottom:1px solid var(--line);padding:.5rem 0}
  .cb-doc table.empilha td{border:0;padding:.22rem .75rem}
  .cb-doc table.empilha td:first-child{color:var(--ink);font-weight:600}
  .cb-doc table.empilha td[data-r]::before{content:attr(data-r);display:block;margin-bottom:.1rem;
    font-family:var(--fm);font-size:.62rem;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-soft)}
}
.cb-doc code{font-family:var(--fm);font-size:.88em;background:color-mix(in srgb,var(--ink) 6%,transparent);
  padding:.1em .35em;border-radius:5px}
@media print{.cb-docs{position:static;display:block!important}.cb-doc{display:block!important}
  .cb-doc-top,.cb-doc-nav{display:none}}

/* ==========================================================================
   COLOSSUS BRAIN II — seletor de layout e avisos
   ========================================================================== */
.cb-lay{display:block;margin:1rem 0 .2rem}
.cb-lay-t{display:block;font-family:var(--fm);font-size:.58rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
.cb-lay-g{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.cb-lay-g button{font-family:var(--fm);font-size:.72rem;font-weight:600;padding:.5rem .4rem;
  border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink-2);
  cursor:pointer;white-space:nowrap;
  transition:border-color .2s,color .2s,background .2s,transform .16s var(--ab-spring)}
.cb-lay-g button:hover:not(:disabled){border-color:var(--c1);color:var(--c1)}
.cb-lay-g button:active:not(:disabled){transform:scale(.95)}
.cb-lay-g button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cb-lay-g button:disabled{opacity:.38;cursor:not-allowed}
.cb-lay-s{display:block;font-family:var(--fm);font-size:.63rem;line-height:1.55;color:var(--ink-soft);
  margin-top:.4rem}
.cb-foot-base .cb-lay{flex-basis:100%;max-width:280px;margin:0 0 .6rem}

/* convite de layout */
.cb-lay-toast{position:fixed;right:1.2rem;bottom:1.2rem;z-index:110;max-width:400px;
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:.9rem 1rem;border-radius:16px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--card) 97%,transparent);
  backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:var(--ab-lift-hi);
  transform:translateY(140%) scale(.96);opacity:0;visibility:hidden;
  transition:transform .5s var(--ab-spring),opacity .4s,visibility .5s}
.cb-lay-toast.on{transform:none;opacity:1;visibility:visible}
.cb-lay-toast .ic{font-size:1.5rem;flex:none}
.cb-lay-toast .tx{flex:1 1 200px;font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.cb-lay-toast .tx b{color:var(--ink)}
.cb-lay-toast .cb-btn{font-size:.8rem;padding:.5rem .9rem}
.cb-lay-toast .x{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink-soft);cursor:pointer;font-size:.72rem;line-height:1;
  transition:border-color .2s,color .2s}
.cb-lay-toast .x:hover{border-color:var(--c4);color:var(--c4)}
body.cbd .cb-lay-toast{right:calc(var(--d-right,268px) + 1.2rem)}
@media (max-width:640px){.cb-lay-toast{display:none}}
@media print{.cb-lay-toast,.cb-lay{display:none}}

/* ==========================================================================
   COLOSSUS BRAIN II — EDIÇÃO DESKTOP
   Layout editorial de três colunas. Só carrega acima de 1100px.
   ========================================================================== */
:root{
  --d-left:308px; --d-right:268px; --d-gap:2.2rem;
  --d-measure:74ch;
}

/* o layout editorial é escolhido pelo leitor (ver .cb-lay); abaixo do piso
   o seletor desabilita a opção, então não existe estado quebrado a cobrir */
@media (max-width:999px){ body.cbd{padding-left:0;padding-right:0} .d-rail{display:none} }

/* ---------- estrutura ---------- */
@media (min-width:1000px){
  body.cbd{padding-left:var(--d-left);padding-right:var(--d-right);
    font-size:clamp(1.08rem,.72vw + .95rem,1.22rem)}
  body.cbd{--maxw:820px;--rdr:74ch}
  body.cbd nav{display:none !important}
  body.cbd #capBar{left:var(--d-left);right:var(--d-right)}
  /* o trilho esquerdo já navega: a barra flutuante vira ruído no desktop */
  body.cbd #capNav{display:none !important}
  /* as ferramentas moram no trilho; na barra do capítulo elas duplicavam */
  body.cbd #capBar .cb-tools{display:none}
  body.cbd #capBar{padding-right:1.2rem}
  body.cbd #capBar .cb-t{font-size:.92rem}

  body.cbd .totop{right:calc(var(--d-right) + 1.4rem)}
  body.cbd #voltarCap{right:calc(var(--d-right) + 1.4rem)}

  /* trilhos */
  .d-rail{position:fixed;top:0;bottom:0;z-index:60;overflow-y:auto;overscroll-behavior:contain;
    background:color-mix(in srgb,var(--bg) 97%,var(--ink));border-color:var(--line);
    scrollbar-width:thin}
  .d-rail::-webkit-scrollbar{width:7px}
  .d-rail::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 14%,transparent);border-radius:99px}
  .d-l{left:0;width:var(--d-left);border-right:1px solid var(--line);padding:1.5rem 1.15rem 3rem;
    contain:layout paint style}
  .d-r{right:0;width:var(--d-right);border-left:1px solid var(--line);padding:1.5rem 1.05rem 3rem;
    contain:layout paint style}

  /* tipografia editorial */
  body.cbd .cap > p{max-width:var(--d-measure)}
  body.cbd .cap-head h2{font-size:clamp(2.3rem,3.1vw,3.4rem);line-height:1.06;letter-spacing:-.035em}
  body.cbd .cap h3{font-size:clamp(1.45rem,1.7vw,1.95rem);letter-spacing:-.022em;margin-top:3.4rem}
  body.cbd .cap-sub{font-size:1.2rem;line-height:1.65;max-width:64ch}
  body.cbd .cap p{line-height:1.82}
  /* capitular no primeiro parágrafo de corpo do capítulo */
  body.cbd .cap.ativo p.d-drop::first-letter{
    float:left;font-family:var(--fd);font-weight:900;font-size:3.9em;line-height:.82;
    padding:.06em .12em 0 0;margin-top:.04em;
    background:linear-gradient(150deg,var(--pc,var(--c1)),var(--c2));
    -webkit-background-clip:text;background-clip:text;color:transparent}

  /* capas de parte em tela cheia */
  body.cbd .parte-cover{min-height:74vh;display:flex;flex-direction:column;align-items:center;
    justify-content:center;margin:5rem auto;max-width:none;padding:4rem 2rem}
  body.cbd .parte-cover::before{font-size:min(34vw,420px);opacity:.05}
  body.cbd .parte-cover .pc-t{font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:1.02}
  body.cbd .parte-cover .pc-d{font-size:1.18rem;max-width:52ch}

  /* cartões respiram mais */
  body.cbd .box,body.cbd .ficha,body.cbd .howto,body.cbd .naodito,body.cbd .comece,
  body.cbd .dgm,body.cbd .alegoria,body.cbd .quiz,body.cbd .ab-w{padding:1.5rem 1.7rem}
  body.cbd .dgm svg{max-height:none}
  body.cbd .grid{gap:1.2rem}
  /* o hub era um carrossel de dedo; no desktop vira grade */
  body.cbd .hub-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
    gap:.9rem;overflow:visible;scroll-snap-type:none}
  body.cbd .hub-wrap::before,body.cbd .hub-wrap::after{display:none}
  body.cbd .hub-card{min-height:0;padding:1.1rem}
  /* a estante ganha duas colunas quando sobra largura */
  @media (min-width:1440px){
    body.cbd #estante > div:last-child{display:grid;grid-template-columns:1fr 1fr;
      gap:0 1rem;align-items:start}
    body.cbd .est-parte{grid-column:1/-1}
  }
  body.cbd .cb-fim{padding:2rem 2.2rem}
}

/* ---------- trilho esquerdo ---------- */
.d-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
/* a marca e o "blog" ao lado dela, também no computador (09/10/2026): texto
   na fonte da marca, separado por um traço, como na barra do celular */
/* a coluna tem 270px e a marca ocupa 222: o "blog" cabe em 45, medido */
.d-marca{display:flex;align-items:center;gap:0;margin-bottom:1.1rem}
.d-brand-blog{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;min-width:44px;
  padding:0 .1rem 0 .2rem;flex:none;
  font-family:var(--fd);font-weight:900;font-size:.95rem;letter-spacing:-.025em;
  color:var(--c2);text-decoration:none;white-space:nowrap}
.d-brand-blog::before{content:"";width:1.5px;height:1.05em;background:var(--line);border-radius:2px}
.d-brand-blog:hover{color:var(--c1)}
.d-brand i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-style:normal;
  font-family:var(--fd);font-weight:900;font-size:1.1rem;color:var(--sobre-forte,#FFFFFF);flex:none;
  background:linear-gradient(145deg,var(--c1),var(--c2) 55%,var(--c7));
  box-shadow:0 3px 14px color-mix(in srgb,var(--c2) 40%,transparent);
  transform:rotate(-3deg);transition:transform .4s var(--ab-spring)}
.d-brand:hover i{transform:rotate(4deg) scale(1.08)}
.d-brand b{font-family:var(--fd);font-weight:900;font-size:1.06rem;letter-spacing:-.025em;line-height:1.1}
.d-brand b em{font-style:normal;background:linear-gradient(90deg,var(--cb-gold),var(--c5));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.d-brand span{display:block;font-family:var(--fm);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:.1rem}

.d-tools{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;margin-bottom:1rem}
.d-tools button{width:100%;height:34px;display:grid;place-items:center;border-radius:10px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:.9rem;cursor:pointer;
  transition:transform .16s var(--ab-spring),border-color .2s,background .2s}
.d-tools button:hover{border-color:var(--c1);transform:translateY(-2px)}
.d-tools button:active{transform:scale(.9)}

.d-search{position:relative;margin-bottom:1.1rem}
.d-search input{width:100%;font-family:var(--fm);font-size:.82rem;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:11px;padding:.55rem .7rem .55rem 2rem;
  transition:border-color .2s,box-shadow .2s}
.d-search input:focus{outline:none;border-color:var(--c1);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 15%,transparent)}
.d-search::before{content:"🔍";position:absolute;left:.6rem;top:50%;transform:translateY(-50%);
  font-size:.78rem;opacity:.6;pointer-events:none}

.d-prog{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;border-radius:12px;
  border:1px solid var(--line);background:var(--card);margin-bottom:1.3rem}
.d-prog svg{width:38px;height:38px;transform:rotate(-90deg);flex:none}
.d-prog .rb{fill:none;stroke:color-mix(in srgb,var(--ink) 11%,transparent);stroke-width:3.4}
.d-prog .rf{fill:none;stroke:var(--c3);stroke-width:3.4;stroke-linecap:round;
  transition:stroke-dashoffset .9s var(--ab-out)}
.d-prog b{font-family:var(--fd);font-weight:900;font-size:1.02rem;display:block;line-height:1.1}
.d-prog span{font-family:var(--fm);font-size:.6rem;color:var(--ink-soft);display:block;letter-spacing:.05em}

.d-h{font-family:var(--fm);font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:1.5rem 0 .5rem;padding-left:.2rem}
.d-h:first-of-type{margin-top:0}
.d-parte{font-family:var(--fm);font-size:.55rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--c1);margin:1.15rem 0 .35rem;padding:.25rem .45rem;border-radius:6px;
  background:color-mix(in srgb,var(--c1) 9%,transparent);display:inline-block}
.d-cap{display:flex;align-items:baseline;gap:.5rem;width:100%;text-align:left;padding:.4rem .5rem;
  border-radius:9px;border:1px solid transparent;background:none;color:var(--ink-2);cursor:pointer;
  font-family:var(--fb);font-size:.85rem;line-height:1.35;
  transition:background .18s,color .18s,transform .18s var(--ab-out),border-color .18s}
.d-cap:hover{background:color-mix(in srgb,var(--c1) 7%,transparent);color:var(--ink);transform:translateX(3px)}
.d-cap .n{font-family:var(--fm);font-size:.63rem;font-weight:700;color:var(--ink-soft);flex:none;min-width:1.5rem}
.d-cap.on{background:color-mix(in srgb,var(--c1) 13%,transparent);color:var(--c1);font-weight:600;
  border-color:color-mix(in srgb,var(--c1) 30%,transparent)}
.d-cap.on .n{color:var(--c1)}
.d-cap.feito .n::after{content:"✓";color:var(--c3);margin-left:.15rem;font-weight:900}
.d-cap.feito{opacity:.62}
.d-cap.oculto{display:none}

/* ---------- trilho direito ---------- */
.d-r-t{font-family:var(--fm);font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.7rem}
.d-mini{display:grid;gap:.1rem;margin-bottom:1.6rem;position:relative;padding-left:.8rem}
.d-mini::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;width:2px;border-radius:2px;
  background:color-mix(in srgb,var(--ink) 10%,transparent)}
.d-mini i{position:absolute;left:0;width:2px;border-radius:2px;background:var(--c1);
  transition:top .3s var(--ab-out),height .3s var(--ab-out)}
.d-mini a{font-size:.78rem;line-height:1.4;color:var(--ink-soft);text-decoration:none;padding:.24rem 0;
  transition:color .2s,transform .2s var(--ab-out);display:block}
.d-mini a:hover{color:var(--ink);transform:translateX(2px)}
.d-mini a.on{color:var(--c1);font-weight:600}
.d-empty{font-family:var(--fm);font-size:.7rem;color:var(--ink-soft);line-height:1.6;
  padding:.8rem;border:1px dashed var(--line);border-radius:10px}

.d-acts{display:grid;gap:.4rem;margin-bottom:1.5rem}
.d-acts button{font-family:var(--fm);font-size:.72rem;font-weight:600;text-align:left;
  padding:.5rem .7rem;border-radius:9px;border:1px solid var(--line);background:var(--card);
  color:var(--ink-2);cursor:pointer;display:flex;align-items:center;gap:.45rem;
  transition:border-color .2s,color .2s,transform .16s var(--ab-out)}
.d-acts button:hover{border-color:var(--c1);color:var(--c1);transform:translateX(3px)}

.d-quote{font-family:var(--fb);font-style:italic;font-size:.86rem;line-height:1.65;color:var(--ink-soft);
  border-left:2px solid var(--hi);padding-left:.8rem;margin-top:1.6rem}

/* ---------- animações exclusivas do desktop ---------- */
@media (min-width:1000px){
  @keyframes dIn{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
  body.cbd .d-rail{animation:dFade .7s var(--ab-out) both}
  @keyframes dFade{from{opacity:0}to{opacity:1}}
  body.cbd .d-cap{animation:dIn .4s var(--ab-out) backwards}
  body.cbd .cap.ativo{animation:dIn .55s var(--ab-out) both}
  /* brilho que segue o cursor nos cartões */
  body.cbd .box,body.cbd .ficha,body.cbd .howto,body.cbd .ab-w,body.cbd .quiz{position:relative}
  body.cbd .box::after,body.cbd .ficha::after,body.cbd .howto::after,
  body.cbd .ab-w::after,body.cbd .quiz::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
      color-mix(in srgb,var(--c1) 13%,transparent),transparent 62%);
    transition:opacity .35s}
  body.cbd .box:hover::after,body.cbd .ficha:hover::after,body.cbd .howto:hover::after,
  body.cbd .ab-w:hover::after,body.cbd .quiz:hover::after{opacity:1}
  /* linha do tempo lateral do capítulo
     usa scaleY (composição pura) — animar `height` num elemento fixo
     custava layout + paint de tela cheia a cada quadro de rolagem */
  .d-lido{position:fixed;left:calc(var(--d-left) - 1px);top:0;width:2px;height:100vh;z-index:61;
    background:linear-gradient(180deg,var(--c1),var(--c7));
    transform:scaleY(var(--d-lido,0));transform-origin:0 0;will-change:transform;
    pointer-events:none;display:none}
  body.cbd.lendo .d-lido{display:block}
}
@media (prefers-reduced-motion:reduce){
  .d-small .ic{animation:none}
  body.cbd .d-cap,body.cbd .cap.ativo,body.cbd .d-rail{animation:none !important}
}


/* endereço de e-mail: clicável, copiável e sempre dentro da tela */
.cb-email{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 .8rem}
.cb-email a{font-family:var(--fm);font-weight:600;font-size:clamp(.92rem,4vw,1.22rem);
  color:var(--ink);text-decoration:none;overflow-wrap:anywhere;
  border-bottom:2px solid color-mix(in srgb,var(--c1) 40%,transparent);transition:all .22s}
.cb-email a:hover{color:var(--c1);border-bottom-color:var(--c1)}
.cb-copiar{flex:none;font-family:var(--fm);font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--line);background:var(--card);
  color:var(--ink-soft);border-radius:999px;padding:.3rem .68rem;cursor:pointer;
  transition:all .22s}
.cb-copiar:hover{border-color:var(--c1);color:var(--c1)}
.cb-copiar:active{transform:scale(.94)}
.cb-copiar.feito{border-color:var(--c3);color:var(--c3)}