/* ============================================================
   Manual · Mecânica GSD — Escola Total / SEDUC-SP
   Herda a estetica EXATA do deck (mesmos tokens, navbar e footer).
   Chrome escuro (GESP) + corpo claro de documento. ZERO CDN.
   ============================================================ */

:root{
  /* --- Cores institucionais (identicas ao deck) --- */
  --primary:#2c2073; --primary-hover:#3d2d9e; --primary-2:#5640c4; --primary-light:#e8e5f7;
  --accent:#ed2f37; --accent-hover:#ff4d54; --hero-badge:#ff6600;
  --bg:#ffffff; --surface:#f5f5ff; --surface-2:#eeebfb;
  --text:#1a1a1a; --text-secondary:#666666; --text-muted:#6b6b6b; --border:#e0e0e0;
  --footer-bg:#1a1a1a; --cover-bg:#1a1147;
  --done:#2e7d32; --doing:#e65100; --info:#1d4ed8; --warning:#f59e0b; --ok:#2e7d32; --ok-soft:#e7f7ee;
  --accent-soft:#fdebec; --tec:#475569; --tec-soft:#eef2f7;

  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-base:14px; --fs-md:16px;
  --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:36px; --fs-4xl:48px;
  --lh-tight:1.15; --lh-snug:1.35; --lh-base:1.55; --lh-relaxed:1.7;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --tracking-tight:-0.01em; --tracking-wide:0.04em; --tracking-uppercase:0.10em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;

  --shadow-xs:0 1px 2px rgba(44,32,115,.05);
  --shadow-sm:0 1px 3px rgba(44,32,115,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(44,32,115,.10),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:0 12px 28px rgba(44,32,115,.14),0 4px 8px rgba(0,0,0,.06);
  --shadow-xl:0 24px 48px rgba(44,32,115,.18),0 8px 16px rgba(0,0,0,.08);
  --ring-primary:0 0 0 3px rgba(44,32,115,.22); --ring-light:0 0 0 3px rgba(255,255,255,.55);

  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-2xl:28px; --radius-full:9999px;

  --motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms; --motion-reveal:440ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1); --ease-snappy:cubic-bezier(0.34,1.56,0.64,1);

  --gradient-primary:linear-gradient(135deg,#2c2073 0%,#3d2d9e 58%,#5640c4 100%);
  --gradient-accent:linear-gradient(135deg,#ed2f37 0%,#ff4d54 100%);
  --gradient-mesh:
     radial-gradient(at 18% 22%, rgba(86,64,196,.55) 0%, transparent 48%),
     radial-gradient(at 84% 12%, rgba(237,47,55,.18) 0%, transparent 42%),
     radial-gradient(at 72% 86%, rgba(255,102,0,.14) 0%, transparent 46%),
     radial-gradient(at 35% 95%, rgba(44,32,115,.55) 0%, transparent 55%);

  --chrome-h:60px;
  --font-display:'Futura PT','Avenir Next',Verdana,Geneva,sans-serif;
  --font-body:Verdana,Geneva,'Futura PT',sans-serif;
  --font-mono:'JetBrains Mono',Consolas,monospace;
  --ring-light:0 0 0 3px rgba(255,255,255,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-base);color:var(--text);
  background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
em{font-style:normal;color:var(--accent)}
strong{font-weight:var(--fw-bold);color:var(--text)}
.ic{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== NAVBAR (identica ao deck, fixada no topo) ===== */
.topbar{position:sticky;top:0;z-index:50;min-height:var(--chrome-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding-left:max(clamp(12px,3vw,28px),env(safe-area-inset-left));
  padding-right:max(clamp(12px,3vw,28px),env(safe-area-inset-right));
  color:#fff;background:rgba(18,14,42,.92);border-bottom:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.brand{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.brand-logo{display:grid;place-items:center;flex:none}
.brand-logo img{height:calc(var(--chrome-h) * 0.58);width:auto;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand-title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-md);letter-spacing:var(--tracking-tight);white-space:nowrap}
.brand-sub{font-size:var(--fs-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-uppercase);text-transform:uppercase;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.nav-back{display:inline-flex;align-items:center;gap:.5em;flex:none;text-decoration:none;color:#fff;
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-sm);
  padding:9px 16px;border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);
  transition:background var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
.nav-back:hover{background:rgba(255,255,255,.18);transform:translateX(-2px)}
.nav-back svg{width:16px;height:16px}

/* ===== BARRA DE CAPITULOS (menu entre os 4 manuais) ===== */
.chapters{position:sticky;top:var(--chrome-h);z-index:40;display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap;
  padding:10px clamp(14px,4vw,28px);background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--border)}
.chap{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-sm);color:var(--text-secondary);padding:7px 14px;border-radius:var(--radius-full);
  border:1px solid var(--border);background:var(--surface);
  transition:color var(--motion-base) var(--ease-out),background var(--motion-base) var(--ease-out),border-color var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
.chap:hover{color:var(--primary);border-color:var(--primary-light);transform:translateY(-1px)}
.chap .n{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--radius-full);
  background:var(--primary-light);color:var(--primary);font-size:var(--fs-2xs);font-weight:var(--fw-extrabold)}
.chap.is-current{color:#fff;background:var(--primary);border-color:var(--primary)}
.chap.is-current .n{background:rgba(255,255,255,.22);color:#fff}
.chap.is-current:hover{transform:none}
@media (max-width:560px){.chap{font-size:var(--fs-xs);padding:6px 11px}.chap .n{display:none}}

/* ===== LAYOUT ===== */
.doc{max-width:920px;margin:0 auto;padding:0 clamp(18px,5vw,32px) var(--space-20)}

/* ===== HERO (escuro premium — mesmo fundo dos slides) ===== */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--cover-bg);color:#fff;
  padding:var(--space-16) clamp(18px,5vw,32px) var(--space-12)}
.cover-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cover-bg::before{content:"";position:absolute;inset:0;background:var(--gradient-primary)}
.cover-bg::after{content:"";position:absolute;inset:0;background:var(--gradient-mesh);mix-blend-mode:screen}
.cover-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 40%,#000 35%,transparent 80%);
  mask-image:radial-gradient(ellipse 85% 80% at 50% 40%,#000 35%,transparent 80%)}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.orb--1{width:42vw;height:42vw;max-width:520px;max-height:520px;top:-34%;right:-6%;background:radial-gradient(circle,rgba(237,47,55,.5),transparent 68%);animation:heroOrb 17s var(--ease-in-out) infinite}
.orb--2{width:48vw;height:48vw;max-width:580px;max-height:580px;bottom:-72%;left:-12%;background:radial-gradient(circle,rgba(86,64,196,.7),transparent 66%);animation:heroOrb 21s var(--ease-in-out) infinite -4s}
.orb--3{width:24vw;height:24vw;max-width:280px;max-height:280px;top:6%;right:16%;background:radial-gradient(circle,rgba(255,102,0,.32),transparent 70%);animation:heroOrb 13s var(--ease-in-out) infinite -7s}
@keyframes heroOrb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,6%) scale(1.08)}}
.hero-inner{position:relative;z-index:1;max-width:920px;margin:0 auto}
.hero .eyebrow{display:inline-flex;align-items:center;gap:.55em;align-self:flex-start;
  padding:7px 15px;border-radius:var(--radius-full);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);margin-bottom:var(--space-5)}
.hero .eyebrow svg{width:15px;height:15px;color:#ff8086}
.hero h1{font-family:var(--font-display);font-weight:var(--fw-extrabold);color:#fff;
  font-size:clamp(2rem,6vw,3.4rem);line-height:var(--lh-tight);letter-spacing:var(--tracking-tight);margin-bottom:var(--space-4);
  text-shadow:0 8px 32px rgba(0,0,0,.38)}
.hero h1 em{color:#ff5a61}
.hero .lead{font-size:clamp(1.05rem,2.4vw,1.3rem);color:rgba(255,255,255,.87);max-width:42em;line-height:var(--lh-snug)}
.meta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.hero .chip{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-display);font-weight:var(--fw-semibold);
  font-size:var(--fs-sm);color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 15px;border-radius:var(--radius-full);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.hero .chip svg{width:14px;height:14px;color:#ff8086}

/* ===== TL;DR ===== */
.tldr{display:flex;gap:var(--space-4);align-items:flex-start;background:linear-gradient(135deg,#efeaff,#f7f5ff);
  border:1px solid var(--primary-light);border-left:5px solid var(--primary);border-radius:var(--radius-xl);
  padding:var(--space-5);box-shadow:var(--shadow-sm);margin:var(--space-8) 0}
.tldr-ic{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--primary);color:#fff}
.tldr-ic svg{width:22px;height:22px}
.tldr h4,.tldr h2{font-family:var(--font-display);font-weight:var(--fw-extrabold);color:var(--primary);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--tracking-uppercase);margin-bottom:4px}
.tldr p{font-size:var(--fs-md);color:var(--text);line-height:var(--lh-snug)}

/* ===== SECTIONS ===== */
section.block{padding:var(--space-8) 0;border-top:1px solid var(--border)}
section.block:first-of-type{border-top:0}
.sec-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.sec-num{flex:none;width:34px;height:34px;border-radius:var(--radius-md);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);color:#fff;background:var(--accent);font-size:var(--fs-md)}
.sec-num svg{stroke:#fff}
.block h2{font-family:var(--font-display);font-weight:var(--fw-extrabold);color:var(--primary);
  font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:var(--lh-tight);letter-spacing:var(--tracking-tight)}
.block p{color:var(--text-secondary);margin:var(--space-3) 0;max-width:60em;line-height:var(--lh-relaxed)}
.block p strong{color:var(--text)}

/* ===== STEPS ===== */
.steps{list-style:none;display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-5)}
.step{display:flex;gap:var(--space-4);align-items:flex-start;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-5);
  transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
.step:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.step-n{flex:none;width:46px;height:46px;border-radius:var(--radius-md);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-lg);color:var(--primary);background:var(--primary-light)}
.step-ic{flex:none;width:46px;height:46px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--primary)}
.step-ic svg{width:24px;height:24px}
.step-body{flex:1;min-width:0}
.step-body h3{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--text);font-size:var(--fs-lg);margin-bottom:3px}
.step-body p{margin:0;color:var(--text-secondary);font-size:var(--fs-base);line-height:var(--lh-snug)}
.step-body code,.example code{font-family:var(--font-mono);font-size:.86em;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.08em .4em;color:var(--primary)}

/* ===== DIAGRAM ===== */
.diagram{margin:var(--space-5) 0;padding:var(--space-8) var(--space-5);border-radius:var(--radius-xl);
  background:radial-gradient(120% 140% at 50% 0%,#fbfaff 0%,#f3f1fc 100%);border:1px solid var(--border);box-shadow:var(--shadow-sm);text-align:center;overflow:hidden}
.diagram svg{max-width:100%;height:auto}
.diagram .cap{margin-top:var(--space-4);font-size:var(--fs-sm);color:var(--text-muted);font-style:italic}

/* ===== CALLOUT ===== */
.callout{display:flex;gap:var(--space-3);align-items:flex-start;border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin:var(--space-3) 0}
.callout--warn{background:var(--accent-soft);border:1px solid #f6c9cc;border-left:4px solid var(--accent)}
.callout .c-ic{flex:none;width:26px;height:26px;color:var(--accent)}
.callout .c-ic svg{width:26px;height:26px}
.callout h4,.callout h3{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--text);font-size:var(--fs-md);margin-bottom:2px}
.callout p{margin:0;color:var(--text-secondary);font-size:var(--fs-base)}

/* ===== EXAMPLE (escuro, mesmo roxo do hero do deck) ===== */
.example{background:var(--cover-bg);color:#e9e6fb;border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-md);margin-top:var(--space-5)}
.example .ex-tag{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--tracking-uppercase);color:#a99cff;margin-bottom:var(--space-3)}
.example .ex-tag svg{width:15px;height:15px}
.example p{color:#d6d1f2;font-size:var(--fs-md);line-height:var(--lh-relaxed);max-width:none}
.example p strong,.example strong{color:#fff}
.example code{background:rgba(255,255,255,.10);color:#c9c0ff;border:0}

/* ===== CHECKLIST ===== */
.checklist{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-4)}
.checklist li{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--ok-soft);border:1px solid #bfe6cf;border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.checklist .chk{flex:none;width:22px;height:22px;color:var(--ok)}
.checklist .chk svg{width:22px;height:22px}
.checklist span{font-size:var(--fs-base);color:var(--text)}

/* ===== DOC NAV (cards de fim de capitulo) ===== */
.docnav{display:flex;gap:var(--space-3);justify-content:space-between;align-items:stretch;margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--border);flex-wrap:wrap}
.docnav a{flex:1 1 30%;min-width:160px;text-decoration:none;display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-sm);
  transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out),border-color var(--motion-base) var(--ease-out)}
.docnav a:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--primary-light)}
.docnav .nav-k{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted);font-weight:var(--fw-bold)}
.docnav .nav-v{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--primary);font-size:var(--fs-md)}
.docnav a.center{text-align:center;align-items:center}
.docnav a.next{text-align:right;align-items:flex-end}
.docnav a.disabled{opacity:.4;pointer-events:none}

/* ===== FOOTER (botbar identica ao deck) ===== */
.botbar{min-height:var(--chrome-h);display:flex;align-items:center;justify-content:center;gap:var(--space-4);
  padding:var(--space-5) max(clamp(12px,3vw,28px),env(safe-area-inset-left));
  background:var(--footer-bg);color:#cfcfd6;border-top:1px solid rgba(255,255,255,.08);
  font-size:var(--fs-sm);text-align:center}
.botbar b{color:#fff}
.botbar .sep{opacity:.45}

/* ===== REVEAL ===== */
.reveal-up{opacity:0;transform:translateY(18px);transition:opacity var(--motion-reveal) var(--ease-out),transform var(--motion-reveal) var(--ease-out)}
.reveal-up.in{opacity:1;transform:none}

@media (max-width:600px){
  .step{flex-wrap:wrap}
  .docnav a{flex:1 1 100%}
  .brand-sub{display:none}
  .nav-back span{display:none}
  .nav-back{padding:9px 11px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal-up{opacity:1;transform:none;transition:none}
  .orb{animation:none}
  .step:hover,.docnav a:hover,.nav-back:hover{transform:none}
}

/* ===================================================================
   MODO FLUIDO — o manual escala proporcionalmente com a tela
   (mesma regua do deck: baseline 1280px = tamanhos originais,
   crescimento linear ate 1,5x em ~2560px; clamp preserva telas menores)
   =================================================================== */
:root{
  --fs-2xs:clamp(10px,.39vw + 5px,15px);
  --fs-xs:clamp(11px,.43vw + 5.5px,16.5px);
  --fs-sm:clamp(12px,.47vw + 6px,18px);
  --fs-base:clamp(14px,.55vw + 7px,21px);
  --fs-md:clamp(16px,.63vw + 8px,24px);
  --fs-lg:clamp(18px,.7vw + 9px,27px);
  --fs-xl:clamp(22px,.86vw + 11px,33px);
  --fs-2xl:clamp(28px,1.09vw + 14px,42px);
  --fs-3xl:clamp(36px,1.41vw + 18px,54px);
  --fs-4xl:clamp(48px,1.88vw + 24px,72px);
  --space-1:clamp(4px,.16vw + 2px,6px);
  --space-2:clamp(8px,.31vw + 4px,12px);
  --space-3:clamp(12px,.47vw + 6px,18px);
  --space-4:clamp(16px,.63vw + 8px,24px);
  --space-5:clamp(20px,.78vw + 10px,30px);
  --space-6:clamp(24px,.94vw + 12px,36px);
  --space-8:clamp(32px,1.25vw + 16px,48px);
  --space-10:clamp(40px,1.56vw + 20px,60px);
  --space-12:clamp(48px,1.88vw + 24px,72px);
  --space-16:clamp(64px,2.5vw + 32px,96px);
  --space-20:clamp(80px,3.13vw + 40px,120px);
}
/* container acompanha a fonte: nº de caracteres por linha fica estavel */
.doc,.hero-inner{max-width:clamp(920px,72vw,1380px)}
/* titulos do hero e dos blocos ganham teto mais alto em telas grandes */
.hero h1{font-size:clamp(2rem,2.6vw + 14px,4.2rem)}
.hero .lead{font-size:clamp(1.05rem,.75vw + 8px,1.7rem)}
.block h2{font-size:clamp(1.4rem,1.2vw + 8px,2.4rem)}
/* caixas e icones fixos escalam junto */
.tldr-ic{width:clamp(40px,1.56vw + 20px,60px);height:clamp(40px,1.56vw + 20px,60px)}
.tldr-ic svg{width:clamp(22px,.86vw + 11px,33px);height:clamp(22px,.86vw + 11px,33px)}
.sec-num{width:clamp(34px,1.33vw + 17px,51px);height:clamp(34px,1.33vw + 17px,51px)}
.step-n,.step-ic{width:clamp(46px,1.8vw + 23px,69px);height:clamp(46px,1.8vw + 23px,69px)}
.step-ic svg{width:clamp(24px,.94vw + 12px,36px);height:clamp(24px,.94vw + 12px,36px)}
.callout .c-ic,.callout .c-ic svg{width:clamp(26px,1.02vw + 13px,39px);height:clamp(26px,1.02vw + 13px,39px)}
/* ===== LINKS INTERNOS DE TERMOS (wiki) — gerados por script de conteudo ===== */
a.tlink{color:var(--primary);font-weight:var(--fw-semibold);text-decoration:underline dotted;text-decoration-thickness:1.5px;
  text-decoration-color:rgba(44,32,115,.45);text-underline-offset:3px;
  transition:color var(--motion-fast) var(--ease-out),text-decoration-color var(--motion-fast) var(--ease-out)}
a.tlink:hover{color:var(--accent);text-decoration-color:var(--accent);text-decoration-style:solid}
a.tlink:focus-visible{outline:none;box-shadow:0 0 0 2px var(--primary-light);border-radius:3px}
.example a.tlink{color:#fff;text-decoration-color:rgba(255,255,255,.55)}
.example a.tlink:hover{color:#fff;text-decoration-color:#fff}

/* diagramas de fluxo vertical (definidos no <style> da pagina) */
.doc .flow{max-width:clamp(440px,34.4vw,660px)}
.doc .farrow svg{width:clamp(18px,.7vw + 9px,27px);height:clamp(18px,.7vw + 9px,27px)}
.doc .tb th,.doc .tb td{padding:clamp(10px,.39vw + 5px,15px) clamp(14px,.55vw + 7px,21px)}
/* ===== ALTERNADOR DE PÁGINAS (Metodologia | Nota Técnica) ===== */
.pageswitch{display:inline-flex;gap:4px;flex:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-full);padding:4px}
.pageswitch a{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:rgba(255,255,255,.82);
  text-decoration:none;padding:7px 15px;border-radius:var(--radius-full);white-space:nowrap;
  transition:color var(--motion-base) var(--ease-out),background var(--motion-base) var(--ease-out)}
.pageswitch a:hover{color:#fff;background:rgba(255,255,255,.12)}
.pageswitch a.is-current{background:#fff;color:var(--primary)}
@media (max-width:560px){.pageswitch a{padding:6px 11px;font-size:var(--fs-xs)}}