/* ==========================================================================
   apostila-layout.css  —  casca de layout partilhada dos playbooks
   --------------------------------------------------------------------------
   Templates A e B: ajustes de largura herdados pelas apostilas existentes.
   Template C: layout completo com índice lateral, leitura por capítulos e
   scrollytelling. Todas as regras novas estão limitadas a body.template-c.

   Para reutilizar o C: <meta name="template" content="C">,
   <body class="template-c"> e <link rel="stylesheet"
   href="apostila-layout.css">. Usa as classes do bloco abaixo; troca apenas
   conteúdo, cores nos tokens --c-*, media no .story-media e JS da narrativa.

   Os templates A e B continuam com os seus próprios estilos internos.
   ========================================================================== */

:root{
  --apostila-maxw:   1040px;  /* Template A — largura do bloco de leitura */
  --apostila-maxw-b:  860px;  /* Template B — largura da coluna de capítulo */
}

/* ═══════════════ TEMPLATE A — painel lateral ═══════════════
   Encosta na sidebar até haver folga; a partir daí centraliza no espaço
   à direita da sidebar (margens iguais dos dois lados).
   Só acima do breakpoint — abaixo, as regras mobile inline de cada
   ficheiro continuam a mandar. */
@media (min-width: 961px){
  .main{
    /* aceita --side-w, --sidebar-w ou o default 290px */
    --_sw: var(--side-w, var(--sidebar-w, 290px));
    margin-left:  calc(var(--_sw) + max(0px, (100% - var(--_sw) - var(--apostila-maxw)) / 2));
    margin-right: auto;
    max-width:    var(--apostila-maxw);
    padding:      56px 76px 120px;
  }
}

/* ═══════════════ TEMPLATE B — scrollytelling ═══════════════
   Já vinha centrado (margin:0 auto); aqui só passamos a largura para o
   token partilhado. Valor atual = 860px, idêntico ao --maxw local. */
section.cap{
  max-width:     var(--apostila-maxw-b);
  margin-inline: auto;
}

/* ═══════════════ TEMPLATE C — apostila narrativa ═══════════════
   Escopo: só body.template-c. A/B mantêm o comportamento anterior.
   Estrutura: #progress, .wrap > .toc + main > .content, .hero,
   .story (.story-visual + .story-steps), section.mod e .chapter-nav.
   A media interativa usa .story-media; pode ser 3D, vídeo, SVG ou imagem.
   Personalização: --c-paper, --c-card, --c-ink, --c-muted, --c-line,
   --c-accent, --c-accent-soft, --c-code, --c-side, --c-content e --c-lv1..4.
   Os ids dos capítulos e o comportamento de scroll ficam no HTML/JS.
   ========================================================================== */
body.template-c{
  --c-paper:#f7f8f5;
  --c-card:#fff;
  --c-ink:#172320;
  --c-muted:#53645e;
  --c-line:#dce5de;
  --c-accent:#0a6c59;
  --c-accent-soft:#e5f4ee;
  --c-code:#14221e;
  --c-side:284px;
  --c-content:860px;
  --c-lv1:#157f67;
  --c-lv2:#087c99;
  --c-lv3:#6956aa;
  --c-lv4:#a64b37;
  margin:0;
  background:var(--c-paper);
  color:var(--c-ink);
  font:17px/1.68 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body.template-c,
body.template-c *,
body.template-c *::before,
body.template-c *::after{box-sizing:border-box}
body.template-c a{color:var(--c-accent)}
body.template-c a:hover{text-decoration-thickness:2px}
body.template-c button,
body.template-c select{font:inherit}
body.template-c button{cursor:pointer}
body.template-c button:disabled{cursor:not-allowed;opacity:.55}
body.template-c :focus-visible{outline:3px solid #cc6e25;outline-offset:3px}
body.template-c p{margin:.75rem 0 1rem}
body.template-c ul,
body.template-c ol{padding-left:1.5rem}
body.template-c li{margin:.35rem 0}
body.template-c h1,
body.template-c h2,
body.template-c h3{line-height:1.2;letter-spacing:-.025em}
body.template-c h3{margin:2rem 0 .6rem}
body.template-c code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
body.template-c p code,
body.template-c li code,
body.template-c td code{
  font-size:.87em;background:#e9f0ea;padding:.1em .35em;
  border-radius:4px;overflow-wrap:anywhere;
}

/* Leitura e navegação */
body.template-c #progress{
  position:fixed;top:0;left:0;z-index:70;width:0;height:4px;
  background:linear-gradient(90deg,var(--c-lv1),var(--c-lv2),var(--c-lv3),var(--c-lv4));
}
body.template-c .wrap{display:flex;min-height:100vh}
body.template-c .toc{
  width:var(--c-side);flex:none;position:sticky;top:0;height:100vh;
  overflow-y:auto;background:var(--c-card);border-right:1px solid var(--c-line);
  padding:1.5rem 1rem 2rem;
}
body.template-c .toc .brand{
  font-weight:800;font-size:1rem;line-height:1.25;
  padding:.2rem .5rem 1rem;border-bottom:1px solid var(--c-line);
}
body.template-c .toc .brand small{
  display:block;color:var(--c-muted);font-size:.74rem;
  font-weight:500;margin-top:.45rem;
}
body.template-c .toc-part{
  color:var(--c-muted);font-size:.69rem;text-transform:uppercase;
  letter-spacing:.12em;font-weight:750;margin:1.3rem .5rem .4rem;
}
body.template-c .toc a{
  display:flex;align-items:baseline;gap:.55rem;padding:.43rem .5rem;
  color:var(--c-ink);font-size:.83rem;font-weight:550;line-height:1.35;
  text-decoration:none;border-radius:7px;
}
body.template-c .toc a:hover,
body.template-c .toc a.active{background:var(--c-accent-soft);color:var(--c-accent)}
body.template-c .toc a.active{font-weight:750}
body.template-c .dot{width:9px;height:9px;border-radius:50%;flex:none;transform:translateY(-1px)}
body.template-c .l1{background:var(--c-lv1)}
body.template-c .l2{background:var(--c-lv2)}
body.template-c .l3{background:var(--c-lv3)}
body.template-c .l4{background:var(--c-lv4)}
body.template-c .toc-back{display:block;margin-top:1.6rem!important;border-top:1px solid var(--c-line);padding-top:.8rem!important}
body.template-c #menu-btn{display:none}
body.template-c main{min-width:0;flex:1}
body.template-c .content{max-width:var(--c-content);margin:0 auto;padding:0 2.2rem 6rem}

/* Abertura e capítulos */
body.template-c .hero{padding:4.3rem 0 2.6rem;border-bottom:1px solid var(--c-line);margin-bottom:3rem}
body.template-c .eyebrow,
body.template-c .mod-eyebrow{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;
  font-weight:800;color:var(--c-accent);
}
body.template-c .hero h1{font-size:clamp(2.3rem,5vw,3.9rem);margin:.8rem 0 1rem}
body.template-c .hero h1 span{color:var(--c-accent)}
body.template-c .lead{font-size:1.18rem;max-width:65ch;color:#30433c}
body.template-c .meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.5rem}
body.template-c .meta span,
body.template-c .badge{
  display:inline-block;background:var(--c-accent-soft);color:var(--c-accent);
  border:1px solid #bcdccf;border-radius:99px;padding:.23rem .75rem;
  font-size:.73rem;font-weight:800;
}
body.template-c .meta .model{background:#efeafa;color:#5b458e;border-color:#d9ccf1}
body.template-c .mod{padding-top:1rem;margin-top:2rem}
body.template-c .mod+.mod{border-top:1px solid var(--c-line);margin-top:3.5rem;padding-top:3rem}
body.template-c .mod h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:.5rem 0 1rem}
body.template-c .intro{font-size:1.1rem;color:#30433c}
body.template-c .callout{
  background:var(--c-card);border:1px solid var(--c-line);
  border-left:4px solid var(--c-accent);border-radius:10px;
  padding:1rem 1.2rem;margin:1.4rem 0;
}
body.template-c .callout.warn{border-left-color:#bd6a27}
body.template-c .callout strong:first-child{display:block;margin-bottom:.2rem}
body.template-c .tablewrap{overflow-x:auto;border:1px solid var(--c-line);border-radius:12px;margin:1.4rem 0}
body.template-c table{border-collapse:collapse;width:100%;background:var(--c-card);font-size:.91rem}
body.template-c th,
body.template-c td{text-align:left;vertical-align:top;padding:.7rem .8rem;border-bottom:1px solid var(--c-line)}
body.template-c th{background:#eaf1eb;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em}
body.template-c tr:last-child td{border-bottom:0}
body.template-c .codebox{border-radius:12px;overflow:hidden;margin:1.4rem 0;border:1px solid #20362e}
body.template-c .codebar{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:#21382f;color:#e0efe5;padding:.45rem .8rem;
  font-size:.73rem;font-weight:750;letter-spacing:.04em;
}
body.template-c .copy{border:1px solid #9db3a4;color:#fff;background:transparent;border-radius:6px;padding:.2rem .65rem;font-size:.75rem}
body.template-c .copy:hover{background:#375948}
body.template-c pre{margin:0;padding:1rem 1.15rem;background:var(--c-code);color:#e9f6ee;overflow-x:auto;font-size:.82rem;line-height:1.65}
body.template-c pre code{white-space:pre}
body.template-c .exercise{background:#eff6f0;border:1px solid #bfdcc7;border-radius:12px;padding:1rem 1.25rem;margin:1.6rem 0}
body.template-c .exercise h3{margin:.1rem 0 .5rem}
body.template-c .chapter-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;padding-top:1rem;border-top:1px dashed var(--c-line);font-size:.87rem;font-weight:700}
body.template-c .chapter-nav a{text-decoration:none}
body.template-c .chapter-nav a:hover{text-decoration:underline}
body.template-c .checklist{list-style:none;padding-left:0}
body.template-c .checklist li{padding-left:1.8rem;position:relative}
body.template-c .checklist li::before{content:"□";position:absolute;left:0;top:-.1rem;font-size:1.4rem;color:var(--c-accent)}
body.template-c .sources{font-size:.9rem}
body.template-c .foot{border-top:1px solid var(--c-line);margin-top:4rem;padding:1.5rem 0;color:var(--c-muted);font-size:.82rem}

/* Narrativa por scroll: o conteúdo visual é substituível. */
body.template-c .story{padding:1rem 0 2rem;border-bottom:1px solid var(--c-line)}
body.template-c .story-head{margin-bottom:1.6rem}
body.template-c .story-head h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:.4rem 0}
body.template-c .story-head p{color:var(--c-muted);max-width:62ch}
body.template-c .story-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:1.2rem;align-items:start}
body.template-c .story-visual{position:sticky;top:1.2rem}
body.template-c .story-visual-inner{background:var(--c-card);border:1px solid var(--c-line);border-radius:16px;padding:.85rem;box-shadow:0 12px 28px #153e2710}
body.template-c .story-kicker,
body.template-c .step-no{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-accent)}
body.template-c .story-kicker{display:block;padding:.3rem .35rem .6rem}
body.template-c .demo-model-picker{display:grid;gap:.4rem;margin:.1rem .3rem .7rem}
body.template-c .demo-model-picker>span{font-size:.82rem;font-weight:750}
body.template-c .demo-model-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
body.template-c .demo-model-options button{min-width:0;text-align:left;background:#fff;border:1px solid #9bb8a8;border-radius:8px;padding:.48rem .65rem;color:var(--c-ink);font:inherit;cursor:pointer}
body.template-c .demo-model-options button strong,body.template-c .demo-model-options button small{display:block;line-height:1.25}
body.template-c .demo-model-options button strong{font-size:.83rem}
body.template-c .demo-model-options button small{font-size:.69rem;color:var(--c-muted);margin-top:.14rem}
body.template-c .demo-model-options button[aria-pressed="true"]{border-color:var(--c-accent);background:var(--c-accent-soft);box-shadow:inset 0 0 0 1px var(--c-accent)}
body.template-c .demo-model-options button:hover,body.template-c .demo-controls button:hover:enabled{background:var(--c-accent-soft)}
body.template-c .demo-model-options button:focus-visible,body.template-c .demo-controls button:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}
body.template-c .demo-viewer-frame{position:relative;border-radius:10px;background:linear-gradient(135deg,#e8f2ec,#f5f1e8)}
body.template-c .story-media{display:block;width:100%;height:310px;object-fit:contain;border-radius:10px;background:transparent}
body.template-c .story-media.is-loading{opacity:0}
body.template-c .demo-loading{position:absolute;inset:0;display:grid;place-items:center;padding:1rem;text-align:center;color:var(--c-accent);font-size:.88rem;font-weight:700;pointer-events:none}
body.template-c .demo-loading[hidden]{display:none}
body.template-c .story-caption{min-height:2.3em;font-size:.86rem;font-weight:650;margin:.7rem .3rem .35rem}
body.template-c .demo-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.4rem .3rem}
body.template-c .demo-controls>span{font-size:.85rem;font-weight:700}
body.template-c .demo-controls button{background:#fff;border:1px solid #9bb8a8;border-radius:8px;padding:.48rem .7rem;color:var(--c-ink);font:inherit;cursor:pointer}
body.template-c .demo-controls button:disabled{cursor:not-allowed;opacity:.55}
body.template-c .demo-animation-picker{display:flex;align-items:center;gap:.25rem;max-width:100%}
body.template-c .demo-animation-picker button{min-width:2.3rem;padding:.4rem .55rem}
body.template-c .demo-animation-picker output{display:block;min-width:0;max-width:11rem;overflow-wrap:anywhere;text-align:center;font-size:.78rem;line-height:1.25}
body.template-c .demo-status{font-size:.83rem;color:var(--c-muted);margin:.7rem .3rem .2rem}
body.template-c .demo-status.is-error{color:#8f2d1c;font-weight:700}
body.template-c .demo-credit{font-size:.72rem;color:var(--c-muted);margin:.35rem .3rem .2rem;line-height:1.45}
body.template-c .story-steps{display:flex;flex-direction:column;gap:1.2rem}
body.template-c .story-step{
  min-height:60vh;background:var(--c-card);border:1px solid var(--c-line);
  border-left:4px solid #c0d6c8;border-radius:12px;padding:1.4rem;
  display:flex;flex-direction:column;justify-content:center;
  transition:border-color .2s,box-shadow .2s;
}
body.template-c .story-step.is-current{border-left-color:var(--c-accent);box-shadow:0 10px 28px #153e2714}
body.template-c .story-step h3{font-size:1.4rem;margin:.7rem 0 .3rem}
body.template-c .story-step p{margin:.4rem 0}
body.template-c .story-step a{font-weight:750;font-size:.86rem;margin-top:1rem}

@media(max-width:960px){
  body.template-c .toc{
    position:fixed;left:0;top:0;z-index:50;transform:translateX(-105%);
    transition:transform .25s;box-shadow:8px 0 30px #0002;
  }
  body.template-c .toc.open{transform:translateX(0)}
  body.template-c #menu-btn{
    display:block;position:fixed;bottom:1rem;right:1rem;z-index:55;
    background:var(--c-ink);color:#fff;border:0;border-radius:99px;
    padding:.7rem 1rem;font-weight:800;box-shadow:0 5px 20px #0003;
  }
  body.template-c .content{padding:0 1.2rem 4rem}
  body.template-c{font-size:16px}
}
@media(max-width:700px){
  body.template-c .story-grid{grid-template-columns:1fr}
  body.template-c .story-visual{position:static;top:auto;z-index:auto}
  body.template-c .story-visual-inner{padding:.5rem}
  body.template-c .story-media{height:210px}
  body.template-c .story-steps{gap:.8rem;margin-top:1rem}
  body.template-c .story-step{min-height:0;padding:1.2rem}
  body.template-c .story-caption{min-height:0}
  body.template-c .story .demo-status{display:block}
}
@media(max-width:560px){
  body.template-c .chapter-nav{flex-direction:column}
  body.template-c .hero{padding-top:3rem}
}
@media(prefers-reduced-motion:reduce){
  body.template-c *,body.template-c *::before,body.template-c *::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important;
  }
}
@media print{
  body.template-c #progress,body.template-c #menu-btn,body.template-c .toc,
  body.template-c .copy,body.template-c .demo-controls{display:none!important}
  body.template-c .wrap{display:block}
  body.template-c .content{max-width:none;padding:0}
  body.template-c .mod,body.template-c .codebox,body.template-c pre{break-inside:avoid-page}
  body.template-c{background:#fff}
  body.template-c .story-grid{display:block}
  body.template-c .story-visual{position:static}
  body.template-c .story-step{min-height:0;margin:1rem 0}
  body.template-c .story-media{height:230px}
}