/* Manual Clayservice · painel técnico: fundo chapado, fios finos, rótulos mono em caixa alta, sem sombra e sem degradê.
   Tokens do design system Clayservice; --cp é o recuo único de todo cartão com texto. */
@font-face{font-family:"Iosevka Charon Mono";src:url(/assets/fonts/IosevkaCharonMono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Iosevka Charon Mono";src:url(/assets/fonts/IosevkaCharonMono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Noto Serif";src:url(/assets/fonts/NotoSerif-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Serif";src:url(/assets/fonts/NotoSerif-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --azul-clay:#0152A3;--azul-gelo:#08A1DB;--grafite:#1F1F1F;--nevoa:#F1F1F1;
  --cinza-200:#DBDBDB;--cinza-300:#C1C1C1;--cinza-500:#878E94;--cinza-700:#575D63;
  --surface:var(--nevoa);--sunken:var(--cinza-200);--ink:var(--grafite);--muted:var(--cinza-700);
  --brand:var(--azul-clay);--on-brand:var(--nevoa);--accent:var(--azul-gelo);--on-accent:var(--grafite);
  --link:var(--azul-clay);--line:var(--cinza-300);--line-strong:var(--cinza-700);--focus:var(--azul-clay);
  --lg1:var(--azul-clay);--lg2:var(--azul-gelo);
  --mono:"Iosevka Charon Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --serif:"Noto Serif",Georgia,"Times New Roman",serif;
  --r-sm:4px;--r-md:8px;--r-lg:16px;
  --s1:4px;--s2:8px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;
  --cp:24px;--sec:96px;--max:1200px;--hdr:60px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --surface:var(--grafite);--sunken:#000000;--ink:var(--nevoa);--muted:var(--cinza-300);
  --link:var(--azul-gelo);--line:var(--cinza-500);--line-strong:var(--cinza-500);--focus:var(--azul-gelo);
  --lg1:var(--nevoa);--lg2:var(--nevoa);color-scheme:dark}}
:root[data-theme="dark"]{
  --surface:var(--grafite);--sunken:#000000;--ink:var(--nevoa);--muted:var(--cinza-300);
  --link:var(--azul-gelo);--line:var(--cinza-500);--line-strong:var(--cinza-500);--focus:var(--azul-gelo);
  --lg1:var(--nevoa);--lg2:var(--nevoa);color-scheme:dark}
@media (max-width:640px){:root{--cp:20px;--sec:64px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html.lock{overflow:hidden}
body{margin:0;background:var(--sunken);color:var(--ink);font:400 16px/26px var(--serif)}
[id]{scroll-margin-top:calc(var(--hdr) + 24px)}
a{color:var(--link);text-underline-offset:3px}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--brand);color:var(--on-brand);padding:8px 16px;border-radius:var(--r-md);font:500 13px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}

h1,h2,h3,h4{font-family:var(--mono);font-weight:500;margin:0;text-wrap:balance}
h2{font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:-.5px}
h3{font-size:20px;line-height:26px}
h4{font-size:16px;line-height:22px}
p{margin:0;max-width:66ch}
.lbl{font:500 13px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.small{font-size:14px;line-height:22px;color:var(--muted)}
.lead{font-size:18px;line-height:28px;max-width:60ch}
code,.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}

/* cabeçalho */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--surface)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--surface);border-bottom:1px solid var(--line);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top-in{max-width:var(--max);margin:0 auto;height:var(--hdr);display:flex;align-items:center;gap:16px}
.top .brand{display:flex;align-items:center;color:var(--lg1);flex:none}
.top .brand svg{height:22px;width:auto;display:block}
.top .cur{flex:1;min-width:0;font:500 13px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:1px solid var(--line);padding-left:16px}
.top nav{display:flex;gap:8px;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:var(--r-md);
  font:500 13px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;text-decoration:none;cursor:pointer;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink);transition:background .15s,color .15s,border-color .15s}
.btn:hover{border-color:var(--ink)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.pri:hover{background:#013f7e;border-color:#013f7e}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:scale(.97)}
@media (max-width:1100px){.top nav .btn .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.top nav .btn{padding:8px 10px}}
@media (max-width:640px){.top nav .hide-sm{display:none}.top .cur{display:none}.top-in{justify-content:space-between}}

/* seções */
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
section.ch{padding-block:var(--sec);border-bottom:1px solid var(--line)}
.ch-h{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;align-items:end;margin-bottom:var(--s8)}
.ch-n{font:400 clamp(44px,5.6vw,88px)/.9 var(--mono);color:transparent;-webkit-text-stroke:1px var(--muted);grid-row:span 2}
.ch-h .lbl{grid-column:2}
.ch-h h2{grid-column:2}
.ch-intro{margin:-8px 0 var(--s8);max-width:66ch}
.sub{margin-top:var(--s12)}
.sub>h3{margin-bottom:var(--s4)}
.sub>.small,.sub>p{margin-bottom:var(--s4)}
.stack{display:grid;gap:var(--s4)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--cp);min-width:0}
.card>*+*{margin-top:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;min-width:0;display:flex;flex-direction:column}
.tile .pv{display:grid;place-items:center;aspect-ratio:16/10;padding:var(--s6);border-bottom:1px solid var(--line)}
.tile .pv svg,.tile .pv img{max-height:100%;width:auto;max-width:100%}
.tile .bd{padding:var(--cp);display:grid;gap:8px;flex:1;align-content:start}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
@media (max-width:960px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.dls{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.dl{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid var(--line-strong);border-radius:var(--r-md);
  font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--ink);text-decoration:none;background:transparent}
.dl:hover{border-color:var(--ink)}
.dl::before{content:"";width:12px;height:12px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M6 11l6 6 6-6M4 21h16'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M6 11l6 6 6-6M4 21h16'/%3E%3C/svg%3E") center/contain no-repeat}
.cp{font:500 12px/16px var(--mono);letter-spacing:.3px;padding:6px 10px;min-height:32px;border:1px solid var(--line);border-radius:var(--r-sm);background:transparent;color:var(--ink);cursor:pointer;text-align:left}
.cp:hover{border-color:var(--ink)}

/* capa */
.hero{padding-block:var(--s12) var(--sec)}
.hero-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:stretch}
@media (max-width:900px){.hero-g{grid-template-columns:minmax(0,1fr)}}
.hero h1{font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-1px;margin:12px 0 16px}
.ficha{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid var(--line);font-size:14px;line-height:22px}
.ficha dt{font:500 12px/22px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.ficha dd{margin:0}
.stage{align-self:start;padding-bottom:56px;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:16/11;display:grid;place-items:center;overflow:hidden}
@media (max-width:640px){.stage{aspect-ratio:4/3}}
.stage .ctl{position:absolute;right:12px;bottom:12px;display:flex;gap:8px}
.hero-logo{width:min(46%,320px);height:auto;color:var(--lg1);overflow:visible}
.hero-logo .hf{fill:var(--lg2)}
.atalhos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin-top:var(--s8)}
@media (max-width:900px){.atalhos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.atalho{display:grid;gap:12px;align-content:start;padding:var(--cp);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:var(--ink)}
.atalho:hover{border-color:var(--ink)}
.atalho svg{width:28px;height:28px;color:var(--link)}
.atalho span{font:500 16px/22px var(--mono)}

/* animação do logo */
.anim .hg{transform-box:fill-box;transform-origin:62% 50%;animation:hg 1.1s cubic-bezier(.2,.8,.2,1) both}
.anim .hf{transform-box:fill-box;transform-origin:50% 50%;animation:hf .7s cubic-bezier(.2,.8,.2,1) .45s both}
.anim .hw{animation:hw .9s cubic-bezier(.2,.8,.2,1) .8s both}
@keyframes hg{from{transform:rotate(-120deg);opacity:0}to{transform:none;opacity:1}}
@keyframes hf{from{transform:scale(.4) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
@keyframes hw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.spin .sg{transform-box:fill-box;transform-origin:62% 50%;animation:sg 2.4s linear infinite}
@keyframes sg{to{transform:rotate(360deg)}}
html.pause-all *,html.pause-all *::before{animation-play-state:paused!important}
.paused,.paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.anim *,.spin *{animation:none!important}}

/* reveal (IntersectionObserver de disparo único, E23) */
.js-rv .rv:not(.in){opacity:0;transform:translateY(24px)}
.js-rv .rv{transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.rv .rv{opacity:1!important;transform:none!important}

/* logotipo */
.lstage{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s12) var(--s6);display:grid;place-items:center}
.lstage svg.diag{width:100%;max-width:880px;height:auto;color:var(--lg1);overflow:visible}
.lstage .ov{opacity:0;transition:opacity .2s}
.lstage.show-prot .ov-prot,.lstage.show-anat .ov-anat{opacity:1}
.toggles{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}
.toggles .btn[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.rule{border-left:2px solid var(--brand);padding-left:16px}
.bg-cl{background:var(--azul-clay)}.bg-gr{background:var(--grafite)}.bg-nv{background:var(--nevoa)}.bg-c2{background:var(--cinza-200)}
.bg-foto{background:repeating-linear-gradient(135deg,#2a2f35 0 14px,#23272c 14px 28px)}
.resp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
@media (max-width:640px){.resp{grid-template-columns:minmax(0,1fr)}}
.resp .pv{aspect-ratio:auto;min-height:140px}
dialog.big{width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:1px solid var(--line);border-radius:var(--r-lg);padding:0;background:var(--surface);color:var(--ink)}
dialog.big::backdrop{background:rgba(0,0,0,.55)}
dialog.big .dh{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--cp);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)}
dialog.big .db{padding:var(--cp);overflow:auto}
dialog.big .db svg{min-width:880px;width:100%;height:auto;color:var(--lg1)}

/* usos incorretos */
.wrong .pv{position:relative}
.wrong .pv::after{content:"×";position:absolute;right:16px;bottom:16px;width:28px;height:28px;border-radius:50%;background:#B42318;color:#fff;font:500 22px/28px var(--mono);text-align:center}

/* cores */
.sw{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}
.sw .chip{height:160px;padding:16px;display:flex;align-items:flex-end;font:500 13px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase}
.sw .bd{padding:var(--cp);display:grid;gap:8px}
.sw .vals{display:grid;gap:6px}
.prop{display:flex;height:72px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.prop div{display:flex;align-items:flex-end;padding:10px 12px;font:500 12px/14px var(--mono);letter-spacing:.5px}
.ap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
@media (max-width:640px){.ap{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ap .chip{height:64px;border-radius:var(--r-md);border:1px solid var(--line)}

/* tabelas (viram cartões no celular, E17) */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
table.t{width:100%;border-collapse:collapse;font-size:15px;line-height:22px}
table.t th{font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--muted);text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
table.t td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
table.t tr:last-child td{border-bottom:0}
@media (min-width:641px){table.t{min-width:640px}}
@media (max-width:640px){
  .tw{border:0;background:none;overflow:visible}
  table.t,table.t tbody,table.t tr,table.t td{display:block;width:100%}
  table.t thead{display:none}
  table.t tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px var(--cp);margin-bottom:12px}
  table.t td{border:0;padding:6px 0;display:grid;grid-template-columns:110px 1fr;gap:12px}
  table.t td::before{content:attr(data-l);font:500 11px/22px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
}
.ok{color:#127a3a}.no{color:#B42318}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ok{color:#5fd38d}:root:not([data-theme="light"]) .no{color:#ff8a80}}
:root[data-theme="dark"] .ok{color:#5fd38d}:root[data-theme="dark"] .no{color:#ff8a80}

/* tipografia */
.spec{display:grid;gap:12px}
.spec .big{font:500 clamp(48px,8vw,104px)/1 var(--mono);letter-spacing:-1px;overflow-wrap:anywhere}
.spec .bigs{font:400 clamp(44px,7vw,92px)/1.05 var(--serif);overflow-wrap:anywhere}
.spec .glyph{font:400 18px/30px var(--mono);overflow-wrap:anywhere;color:var(--muted)}
.tester textarea{width:100%;min-height:84px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:400 16px/24px var(--serif);resize:vertical}
.tester .out{padding:var(--cp);border:1px dashed var(--line);border-radius:var(--r-md);overflow-wrap:anywhere}
.tester .out.m{max-width:390px}

/* grid e espaço */
.scale{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.scale div{display:grid;gap:8px;justify-items:start}
.scale i{display:block;background:var(--brand)}
.radii{display:flex;flex-wrap:wrap;gap:24px}
.radii div{width:104px;height:104px;border:2px solid var(--brand);display:grid;place-items:center;font:500 12px/16px var(--mono)}
.fmt svg{width:100%;height:auto}

/* ícones */
.ib{columns:4 180px;column-gap:16px}
.ib .it{break-inside:avoid;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--cp);display:grid;gap:10px}
.ib .it svg{width:40px;height:40px;color:var(--ink)}
.ib .it .row{display:flex;flex-wrap:wrap;gap:6px}

/* movimento */
.mv-card .pv{aspect-ratio:16/9}
.mv-card .pv svg{width:52%;height:auto;color:var(--lg1)}
.mv-card .pv svg .hf,.mv-card .pv svg .sf{fill:var(--lg2)}
.mv-ctl{display:flex;flex-wrap:wrap;gap:8px}

/* digital */
.comp{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.field{display:grid;gap:8px;max-width:360px}
.field label{font:500 13px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase}
.field input{min-height:44px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:400 16px/24px var(--serif)}
.selo{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase}
.svc{display:grid;gap:10px}
.svc svg{width:32px;height:32px;color:var(--link)}
.fab{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--brand);color:var(--on-brand);font:500 13px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase}
@supports (corner-shape:squircle){.card,.tile,.sw,.stage,.lstage,.atalho,.tw,.btn,.dl,.ib .it,.prop{corner-shape:squircle}.fab,.round{corner-shape:round}}
.sig{background:#fff;border-radius:var(--r-md);padding:20px;overflow-x:auto;border:1px solid var(--line)}

/* aplicações */
.mk .pv{aspect-ratio:auto;height:260px;padding:0;background:var(--cinza-200)}
.mk .pv svg{width:100%;height:100%;display:block}
.mk .pv.fit{padding:20px}
.mk .pv.fit svg{width:auto;height:100%}

/* arquivos */
.kitbox{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:var(--brand);color:var(--on-brand);border-radius:var(--r-lg);padding:calc(var(--cp) + 8px)}
.kitbox .lbl{color:var(--on-brand);opacity:.8}
.kitbox .btn{background:var(--nevoa);color:var(--grafite);border-color:var(--nevoa)}
@media (max-width:640px){.kitbox{grid-template-columns:minmax(0,1fr)}}
details.fold{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:8px}
details.fold summary{cursor:pointer;padding:14px var(--cp);font:500 14px/20px var(--mono);list-style:none;display:flex;gap:12px}
details.fold summary .small{margin-left:auto}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::after{content:"+";color:var(--muted)}
details.fold[open] summary::after{content:"−"}
details.fold .in{padding:0 var(--cp) var(--cp);display:grid;gap:6px}
details.fold .in a{font:400 13px/20px var(--mono);overflow-wrap:anywhere}
.kitsearch{width:100%;max-width:420px;min-height:44px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:400 15px/22px var(--serif);margin-bottom:12px}
.aibox{border:1px solid var(--brand);border-radius:var(--r-lg);padding:calc(var(--cp) + 8px);background:var(--surface);display:grid;gap:20px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:st;padding:0;margin:0;list-style:none}
@media (max-width:640px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{counter-increment:st;display:grid;gap:6px;font-size:15px;line-height:22px}
.steps li::before{content:"Passo " counter(st);font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--link)}
.task{display:grid;gap:10px;align-content:start;text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--cp);color:var(--ink);font:inherit}
.task:hover{border-color:var(--ink)}
.task b{font:500 16px/22px var(--mono)}
pre.prompt{white-space:pre-wrap;font:400 13px/20px var(--mono);background:var(--sunken);padding:var(--cp);border-radius:var(--r-md);max-height:520px;overflow:auto;margin:0}
.names{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
@media (max-width:900px){.names{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.names{grid-template-columns:repeat(2,minmax(0,1fr))}}
.names div{border-top:2px solid var(--brand);padding-top:8px;display:grid;gap:4px;font-size:14px;line-height:20px}
.names b{font:500 14px/20px var(--mono);overflow-wrap:anywhere}
.st{display:inline-block;padding:2px 8px;border-radius:var(--r-sm);font:500 11px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--line-strong)}
.st.pronto{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.st.parcial{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* página 2: estratégia */
.blk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--cp);display:grid;gap:10px;align-content:start;min-width:0}
.blk .hd{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.blk .hd h3{font-size:17px;line-height:23px}
.blk .why{font-size:14px;line-height:22px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.selo-t{justify-self:start;flex:none;display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:var(--r-sm);font:500 11px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--line-strong);white-space:nowrap}
.selo-t[data-t="F"]{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.selo-t[data-t="P"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.selo-t[data-t="D"]{border-color:var(--ink)}
.selo-t[data-t="H"]{border-style:dashed}
.ev{font:500 12px/16px var(--mono);text-decoration:none;padding:1px 4px;border-radius:var(--r-sm);border:1px solid var(--line)}
.destaque{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.destaque .why,.destaque .lbl{color:var(--on-brand);opacity:.85;border-color:rgba(241,241,241,.35)}
.destaque .selo-t{border-color:var(--on-brand);color:var(--on-brand);background:transparent}
.voz{background:var(--brand);color:var(--on-brand);border-radius:var(--r-lg);padding:calc(var(--cp) + 16px);display:grid;gap:24px}
.voz .lbl{color:var(--on-brand);opacity:.8}
.voz .g2>div{border-top:1px solid rgba(241,241,241,.4);padding-top:12px;display:grid;gap:8px}
.voz .selo-t{border-color:var(--on-brand);color:var(--on-brand)}
.voz a{color:var(--on-brand)}
.map svg{width:100%;height:auto}
.jorn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:640px){.jorn{grid-template-columns:minmax(0,1fr)}}
.jorn div{border-top:2px solid var(--brand);padding-top:12px;display:grid;gap:6px;align-content:start}
ol.fontes{padding-left:0;list-style:none;display:grid;gap:10px;margin:0}
ol.fontes li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px var(--cp);display:grid;grid-template-columns:52px 1fr;gap:12px;font-size:15px;line-height:22px}
ol.fontes li:target{border-color:var(--brand);outline:2px solid var(--brand)}
ol.fontes .id{font:500 14px/22px var(--mono);color:var(--link)}
.c2card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin-top:var(--s8);padding:var(--cp);border:1px solid var(--brand);border-radius:var(--r-lg);background:var(--surface);text-decoration:none;color:var(--ink)}
.c2card:hover{background:var(--brand);color:var(--on-brand)}

/* rodapé */
footer.ft{padding-block:var(--s12) calc(var(--s12) + 64px);background:var(--surface)}
.ft-g{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:start;font-size:14px;line-height:22px}
@media (max-width:640px){.ft-g{grid-template-columns:minmax(0,1fr)}}
.ft svg{width:44px;height:44px;color:var(--lg1)}

/* índice: diálogo lateral (desktop) e folha inferior (celular), E27 */
dialog.idx{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(460px,100vw);border:0;border-left:1px solid var(--line);padding:0;background:var(--surface);color:var(--ink)}
dialog.idx::backdrop{background:rgba(0,0,0,.45)}
.idx-in{display:flex;flex-direction:column;height:100%;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.idx-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px var(--cp);border-bottom:1px solid var(--line)}
.idx-s{padding:12px var(--cp)}
.idx-s input{width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:400 16px/22px var(--serif)}
.idx-l{flex:1;overflow:auto;padding:0 var(--cp) var(--cp)}
.idx-g{font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin:18px 0 6px}
.idx-l a.c{display:flex;gap:12px;align-items:center;min-height:52px;padding:8px 10px;border-radius:var(--r-md);text-decoration:none;color:var(--ink);font:500 15px/20px var(--mono)}
.idx-l a.c[aria-current="true"]{background:var(--brand);color:var(--on-brand)}
.idx-l a.c .n{width:26px;color:inherit;opacity:.65}
.idx-l a.c .ext{margin-left:auto;opacity:.6}
.idx-l .subs{display:none;padding:0 0 6px 48px}
.idx-l .subs a{display:block;padding:6px 0;font-size:14px;line-height:20px;text-decoration:none;color:var(--muted)}
.idx-l .it.open .subs{display:block}
.idx-f{display:flex;gap:8px;padding:12px var(--cp);border-top:1px solid var(--line)}
.grab{display:none}
@media (max-width:640px){
  dialog.idx{margin:auto 0 0;width:100vw;max-width:100vw;height:92dvh;border-left:0;border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0}
  .grab{display:block;width:44px;height:5px;border-radius:3px;background:var(--line-strong);margin:10px auto 0}
}
.pill{position:fixed;left:50%;transform:translate(-50%,120%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:35;display:none;align-items:center;gap:10px;
  padding:8px 16px 8px 8px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:500 13px/16px var(--mono);max-width:calc(100vw - 32px);transition:transform .25s}
.pill.on{transform:translate(-50%,0)}
.pill svg{width:32px;height:32px;flex:none}
.pill .pn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.pill{display:flex}.top .idx-btn{display:none}}
@supports (corner-shape:squircle){.pill{corner-shape:round}}
.toast{visibility:hidden;position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,200%);z-index:60;background:var(--ink);color:var(--surface);padding:12px 18px;border-radius:var(--r-md);font:500 13px/18px var(--mono);transition:transform .25s;max-width:calc(100vw - 32px)}
.toast.on{visibility:visible;transform:translate(-50%,0)}
@media (max-width:640px){.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

.top-a{align-items:start}
@media (min-width:641px){table.t td:first-child b.mono{white-space:nowrap}}
code{overflow-wrap:anywhere}
.atalhos.a3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.atalhos.a3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== v1.1 ===== */
/* títulos expressivos */
.ch-h h2 em{font-style:normal;color:var(--link)}
.ch-h .lbl b{color:var(--ink);font-weight:500}
/* tema */
.theme-btn svg{width:18px;height:18px}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}:root[data-theme="dark"] .theme-btn .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .sun{display:block}:root:not([data-theme="light"]) .theme-btn .moon{display:none}}
.themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@media (max-width:640px){.themes{grid-template-columns:minmax(0,1fr)}}
.tm{border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden}
.tm .tm-h{display:flex;justify-content:space-between;align-items:center;padding:12px var(--cp);font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid}
.tm .tm-b{padding:var(--cp);display:grid;gap:14px}
.tm.claro{background:#F1F1F1;color:#1F1F1F}.tm.claro .tm-h{border-color:#C1C1C1}
.tm.escuro{background:#1F1F1F;color:#F1F1F1}.tm.escuro .tm-h{border-color:#878E94}
.tm .tm-card{border-radius:var(--r-md);padding:16px;display:grid;gap:8px}
.tm.claro .tm-card{background:#DBDBDB}.tm.escuro .tm-card{background:#000}
.tm .b1{display:inline-flex;padding:9px 14px;border-radius:8px;background:#0152A3;color:#F1F1F1;font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;justify-self:start}
.tm.claro .lnk{color:#0152A3}.tm.escuro .lnk{color:#08A1DB}
.tm .mut{font-size:14px}.tm.claro .mut{color:#575D63}.tm.escuro .mut{color:#C1C1C1}
.tm svg.lg{height:26px;width:auto}
.tm.claro svg.lg{color:#0152A3;--lg2:#08A1DB}.tm.escuro svg.lg{color:#F1F1F1;--lg2:#F1F1F1}
/* funcionais */
.fn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
@media (max-width:900px){.fn{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fn .card{display:grid;gap:8px}
.fn .dot{width:100%;height:56px;border-radius:var(--r-md)}
/* status de serviço */
.status{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--line-strong)}
.status i{width:8px;height:8px;border-radius:50%;background:currentColor}
.status.ag{color:var(--link)}.status.cam{color:#9A6700}.status.ok2{color:#127a3a}
:root[data-theme="dark"] .status.cam{color:#E3B341}:root[data-theme="dark"] .status.ok2{color:#5fd38d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .status.cam{color:#E3B341}:root:not([data-theme="light"]) .status.ok2{color:#5fd38d}}
@supports (corner-shape:squircle){.status,.status i{corner-shape:round}}
.field.err input{border-color:#B42318}
.field .msg{font-size:14px;line-height:20px;color:#B42318}
:root[data-theme="dark"] .field .msg{color:#ff8a80}
.toastdemo{display:inline-flex;gap:10px;align-items:center;padding:12px 16px;border-radius:var(--r-md);background:var(--ink);color:var(--surface);font:500 13px/18px var(--mono)}
.toastdemo svg{width:18px;height:18px}
/* ícone: tamanhos de referência */
.sizes{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end}
.sizes div{display:grid;gap:8px;justify-items:start}
.sizes .av{border-radius:50%;background:var(--azul-clay);display:grid;place-items:center}
.sizes .ap{border-radius:22%;background:var(--azul-clay);display:grid;place-items:center}
@supports (corner-shape:squircle){.sizes .av{corner-shape:round}}
.agua .pv{position:relative;overflow:hidden}
.agua .pv img{position:absolute;right:-12%;bottom:-18%;width:70%;max-height:none}
.agua .pv .t{position:relative;font:500 22px/1.2 var(--mono);align-self:start;justify-self:start}
/* padrões e composições */
.pat .pv{padding:0;aspect-ratio:16/10}
.pat .pv svg{width:100%;height:100%;display:block}
.comp3 .pv{padding:0;aspect-ratio:1/1}
.comp3 .pv svg,.comp3 .pv img{width:100%;height:100%;display:block}
/* fotografia */
.ref .pv{padding:0;aspect-ratio:16/10}
.ref .pv svg{width:100%;height:100%;display:block}
.ref .tagf{position:absolute;left:12px;top:12px;background:var(--ink);color:var(--surface);font:500 11px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px}
.ref .pv{position:relative}
.dodont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@media (max-width:640px){.dodont{grid-template-columns:minmax(0,1fr)}}
.dodont ul{margin:0;padding-left:18px;display:grid;gap:6px}
/* ícones: filtro */
.ifilter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.fchip{min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;cursor:pointer}
.fchip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
@supports (corner-shape:squircle){.fchip{corner-shape:round}}
.isearch{flex:1;min-width:180px;max-width:320px;min-height:40px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font:400 15px/22px var(--serif)}
.ilist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;border-top:1px solid var(--line)}
@media (max-width:900px){.ilist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ilist{grid-template-columns:minmax(0,1fr)}}
.irow{display:grid;grid-template-columns:40px 1fr auto auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.irow svg{width:24px;height:24px;color:var(--link)}
.irow b{font:500 14px/18px var(--mono);display:block}
.irow small{font-size:13px;color:var(--muted)}
.irow .ib2{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-md);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.irow .ib2 svg{width:16px;height:16px;color:currentColor}
.icon-grid{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center}
@media (max-width:640px){.icon-grid{grid-template-columns:minmax(0,1fr)}}
.ilus .pv{aspect-ratio:1/1;padding:20px}
.ilus .pv svg{width:100%;height:100%}
/* movimento */
.mv-hero{background:var(--grafite);border-radius:var(--r-lg);overflow:hidden}
.mv-hero .pv{aspect-ratio:16/8;display:grid;place-items:center}
.mv-hero .pv svg{width:min(30%,260px);height:auto;color:var(--nevoa);--lg2:var(--azul-gelo)}
.mv-hero .bd{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:var(--cp);background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg)}
.mv-loop .pv svg{width:34%;height:auto;color:var(--lg1)}
.mv-loop .pv svg .if{fill:var(--lg2)}
.iloop .ig{transform-box:fill-box;transform-origin:62% 50%;animation:ig 4s cubic-bezier(.45,0,.2,1) infinite}
.iloop .if{transform-box:fill-box;transform-origin:50% 50%;animation:ifk 4s cubic-bezier(.45,0,.2,1) infinite}
@keyframes ig{0%,100%{transform:none}40%,60%{transform:rotate(45deg)}}
@keyframes ifk{0%,100%{transform:none}40%,60%{transform:scale(.86)}}
@media (prefers-reduced-motion:reduce){.iloop *{animation:none!important}}
.curves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
@media (max-width:960px){.curves{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.curves{grid-template-columns:minmax(0,1fr)}}
.cv{display:grid;gap:10px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--cp);cursor:pointer;color:var(--ink);font:inherit}
.cv:hover{border-color:var(--ink)}
.cv h4{font:500 17px/22px var(--mono)}
.cv code{font-size:12px;color:var(--muted)}
.cv .track{position:relative;height:36px;border:1px solid var(--line);border-radius:999px}
.cv .end{position:absolute;top:8px;bottom:8px;left:84%;width:2px;background:var(--line-strong)}
.cv .dot{position:absolute;left:6px;top:5px;width:24px;height:24px;border-radius:50%;background:var(--brand);transition-property:transform}
.cv.go .dot{transform:translateX(var(--to,200px))}
@supports (corner-shape:squircle){.cv .track,.cv .dot{corner-shape:round}}
/* som */
.player{display:flex;align-items:center;gap:16px;background:var(--brand);color:var(--on-brand);border-radius:999px;padding:10px 24px 10px 10px}
.player button{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:var(--nevoa);color:var(--azul-clay);display:grid;place-items:center;cursor:pointer}
.player button svg{width:22px;height:22px}
.player canvas{flex:1;min-width:0;height:48px;width:100%}
.player .tm2{font:500 13px/16px var(--mono);font-variant-numeric:tabular-nums;flex:none}
@supports (corner-shape:squircle){.player,.player button{corner-shape:round}}
.estr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:640px){.estr{grid-template-columns:repeat(2,minmax(0,1fr))}}
.estr div{border-top:2px solid var(--brand);padding-top:10px;display:grid;gap:4px}
.estr b{font:500 20px/24px var(--mono)}
/* aplicações */
.capas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 16px}
@media (max-width:900px){.capas{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:480px){.capas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.capas a{display:grid;gap:8px;justify-items:center;text-decoration:none;color:var(--ink);font:500 12px/16px var(--mono)}
.capas .cc{width:100%;aspect-ratio:1/1;border-radius:50%;background:var(--azul-clay);display:grid;place-items:center;outline:1px solid var(--line);outline-offset:3px}
.capas .cc svg{width:42%;height:42%;color:var(--nevoa)}
@supports (corner-shape:squircle){.capas .cc{corner-shape:round}}
.redes .pv{aspect-ratio:auto;height:300px;padding:16px;background:var(--sunken);display:flex;align-items:center;justify-content:center;overflow:hidden}
.redes .pv img{height:268px;width:auto;max-width:100%;max-height:268px;object-fit:contain;border-radius:6px}
.anot{position:relative}
.note-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s4)}
@media (max-width:640px){.note-list{grid-template-columns:minmax(0,1fr)}}
.note-list .card{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.note-list .card svg{width:24px;height:24px;color:var(--link)}
/* ===== desenho técnico ===== */
.stage .bp-ov{position:absolute;inset:0;width:100%;height:100%;color:var(--link);pointer-events:none}
.stage .hero-logo{position:relative}
.dw .pv{aspect-ratio:4/3;padding:8px;color:var(--link);background:var(--surface)}
.dw .pv svg{width:100%;height:100%;max-height:none}
.dlib[data-mode="azul"] .dw .pv{background-color:var(--azul-clay);color:var(--nevoa);background-image:linear-gradient(rgba(241,241,241,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(241,241,241,.14) 1px,transparent 1px);background-size:16px 16px}
.dlib[data-mode="papel"] .dw .pv{background-color:var(--nevoa);color:var(--azul-clay);background-image:linear-gradient(rgba(1,82,163,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(1,82,163,.1) 1px,transparent 1px);background-size:16px 16px}
.dw-legend{color:var(--link)}
.dw-legend svg{width:100%;height:auto}
.pr .pv{aspect-ratio:4/5;padding:0;background:var(--sunken)}
.pr .pv img{width:100%;height:100%;object-fit:contain;max-height:none}
.expl{padding:0;overflow:hidden}
.expl svg{width:100%;height:auto;display:block}
.expl-d{display:none}
:root[data-theme="dark"] .expl-l{display:none}:root[data-theme="dark"] .expl-d{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .expl-l{display:none}:root:not([data-theme="light"]) .expl-d{display:block}}
.trace .bp-desenho>*{stroke-dasharray:1;stroke-dashoffset:0}
.trace.anim .bp-desenho>*{animation:trc 2.2s cubic-bezier(.45,0,.2,1) both}
.trace.anim .bp-anot{animation:anf .6s ease 2.2s both}
@keyframes trc{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes anf{from{opacity:0}to{opacity:.8}}
@media (prefers-reduced-motion:reduce){.trace *{animation:none!important}}
.mv-card .pv svg.trace{width:86%}

@media (min-width:641px){.tw.fit table.t{min-width:0}}