/* ============================================================
   instrumentos.css — leituras de instrumento (número-prova, eixo,
   hachura, comparação), os seis esqueletos de canal e as fichas
   ============================================================ */

/* ---------------- abertura de canal ---------------- */
.abertura-canal{
  padding-block:calc(var(--topo-h) + var(--passo-7)) var(--passo-7);
  background:radial-gradient(70% 90% at 10% -10%, rgba(255,107,0,.08) 0%, transparent 58%), var(--base);
  position:relative;
}
.abertura-canal__num{
  position:absolute; top:calc(var(--topo-h) + var(--passo-4)); left:0;
  font-family:var(--fonte-display); font-variation-settings:"wdth" 62,"wght" 800;
  font-size:clamp(4rem,10vw,9rem); line-height:.8; color:rgba(65,33,9,.62);
  font-variant-numeric:tabular-nums; letter-spacing:-.06em; pointer-events:none;
}
@media (min-width:1024px){ .abertura-canal__num{ left:calc(var(--rail-total) - 92px); } }
.titulo-canal{
  font-variation-settings:"wdth" 66,"wght" 800;
  font-size:clamp(2.1rem,4.6vw,4.1rem);
  line-height:1.02; letter-spacing:-.038em;
  max-width:19ch; margin:0 0 var(--passo-5); position:relative;
}
.ficha-instrumento{
  display:flex; flex-wrap:wrap; gap:var(--passo-2) var(--passo-5);
  margin-top:var(--passo-6); padding-top:var(--passo-4);
  border-top:1px solid var(--linha); max-width:74ch;
}
.ficha-instrumento li{
  font-family:var(--fonte-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--label); line-height:1.7;
}
.ficha-instrumento b{ color:var(--paper-dim); font-weight:500; }
.credencial{
  font-family:var(--fonte-texto); font-size:1rem; line-height:1.6; color:var(--paper-dim);
  max-width:70ch; margin-top:var(--passo-4);
}

/* ---------------- a tensão (faixa de compressão) ---------------- */
.tensao{ background:var(--poco); border-block:1px solid var(--linha); }
.tensao__grade{ display:grid; gap:var(--passo-4); grid-template-columns:1fr; }
@media (min-width:900px){ .tensao__grade{ grid-template-columns:150px minmax(0,1fr); gap:var(--passo-6); } }
.tensao__texto{ font-size:1.0625rem; line-height:1.66; color:var(--paper-dim); max-width:66ch; }
.tensao__texto strong{ color:var(--orange); font-weight:600; }

/* ---------------- número-prova ---------------- */
.numero-prova{ position:relative; padding:26px 30px; }
.numero{
  font-family:var(--fonte-display);
  font-variation-settings:"wdth" 62,"wght" 800;
  font-size:clamp(3.6rem,9vw,8.5rem);
  line-height:.86; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; color:var(--paper);
  margin:0; display:flex; align-items:flex-start; gap:.06em;
}
.numero__sufixo{ font-size:.32em; color:var(--orange); letter-spacing:-.01em; padding-top:.12em; }
.numero__legenda{
  font-family:var(--fonte-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--label); margin:var(--passo-3) 0 0; max-width:38ch; line-height:1.7;
}
.numero__fio{ width:28px; height:1px; background:var(--orange); margin-top:var(--passo-3); }

/* ---------------- lista de leituras (OS NÚMEROS) ---------------- */
.leituras{ display:grid; gap:0; border-top:1px solid var(--linha); }
.leitura{
  display:grid; grid-template-columns:1fr; gap:2px;
  padding-block:var(--passo-3);
  border-bottom:1px solid rgba(36,30,25,.75);
}
@media (min-width:760px){
  .leitura{ grid-template-columns:minmax(150px,.28fr) minmax(0,1fr); gap:var(--passo-5); align-items:baseline; }
}
.leitura__valor{
  font-family:var(--fonte-mono); font-weight:600; font-size:.9375rem;
  font-variant-numeric:tabular-nums; color:var(--orange); letter-spacing:.01em;
}
.leitura__desc{ font-size:1rem; line-height:1.55; color:var(--paper-dim); margin:0; }
.numeros__grade{ display:grid; gap:var(--passo-6); grid-template-columns:1fr; }
@media (min-width:1000px){ .numeros__grade{ grid-template-columns:minmax(260px,.72fr) minmax(0,1fr); gap:var(--passo-7); align-items:start; } }

/* ---------------- a frase (vazio radical) ---------------- */
.frase{ background:var(--ember-1); border-block:1px solid var(--linha); }
.frase blockquote{
  margin:0; font-family:var(--fonte-display); font-variation-settings:"wdth" 76,"wght" 600;
  font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:1.16; letter-spacing:-.02em;
  color:var(--paper); max-width:24ch; text-wrap:balance;
}
.frase__creditos{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--label); margin-top:var(--passo-5); display:flex; align-items:center; gap:12px;
}
.frase__creditos::before{ content:""; width:44px; height:1px; background:var(--orange); }

/* ---------------- o que fazer segunda-feira ---------------- */
.segunda{
  background:
    repeating-linear-gradient(45deg, rgba(255,107,0,.055) 0 6px, transparent 6px 13px),
    var(--ember-2);
  border-block:1px solid rgba(255,107,0,.35);
}
.segunda__grade{ display:grid; gap:var(--passo-4); grid-template-columns:1fr; }
@media (min-width:900px){ .segunda__grade{ grid-template-columns:210px minmax(0,1fr); gap:var(--passo-6); } }
.segunda__texto{ font-size:1.0625rem; line-height:1.66; color:var(--paper); max-width:64ch; }

/* ---------------- transição entre canais ---------------- */
.transicao{
  padding:var(--passo-6) var(--margem-viva);
  border-top:1px solid var(--linha);
  position:relative; z-index:1;
}
@media (min-width:1024px){ .transicao{ padding-left:var(--rail-total); } }
.transicao p{
  font-family:var(--fonte-texto); font-style:italic; font-size:clamp(1.05rem,1.6vw,1.25rem);
  color:var(--paper-dim); max-width:56ch; margin:0;
}
.transicao__seta{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--orange); margin-bottom:var(--passo-3); display:block;
}

/* ============================================================
   INSTRUMENTO 01 · o painel de sete chaves
   ============================================================ */
.chaves{ border-top:1px solid var(--linha); }
.chave{
  position:relative; display:grid; grid-template-columns:1fr; gap:var(--passo-3);
  padding-block:var(--passo-5); border-bottom:1px solid rgba(36,30,25,.7);
}
@media (min-width:900px){
  .chave{ grid-template-columns:88px minmax(0,1fr); gap:var(--passo-5); }
  .chave:nth-child(even){ padding-left:56px; }
}
.chave__num{
  font-family:var(--fonte-display); font-variation-settings:"wdth" 62,"wght" 800;
  font-size:clamp(2rem,3.4vw,2.9rem); line-height:.85; color:var(--label);
  font-variant-numeric:tabular-nums; letter-spacing:-.05em; margin-left:-10px;
  transition:color var(--t-micro) linear;
}
.chave__fio{
  position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--orange);
  transform:scaleX(0); transform-origin:left center; transition:transform var(--t-fio) var(--easing);
}
.chave:hover .chave__fio{ transform:scaleX(1); }
.chave:hover .chave__num{ color:var(--orange); }
.chave__corpo{ max-width:none; }
.chave__corpo > p,.chave__corpo > h3{ max-width:64ch; }
.chave__corpo h3{ margin-bottom:var(--passo-3); }
.chave__corpo p{ font-size:1.0625rem; }

.ritual{
  margin-top:var(--passo-7);
  background:var(--poco); border:1px solid var(--linha);
  padding:var(--passo-5);
  display:grid; gap:var(--passo-4); grid-template-columns:1fr;
}
@media (min-width:900px){ .ritual{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--passo-6); padding:var(--passo-6); } }
.ritual__perguntas{ counter-reset:pergunta; }
.ritual__perguntas li{
  counter-increment:pergunta; position:relative; padding-left:44px;
  font-size:1rem; line-height:1.5; color:var(--paper); margin-bottom:var(--passo-3);
}
.ritual__perguntas li::before{
  content:"0" counter(pergunta); position:absolute; left:0; top:2px;
  font-family:var(--fonte-mono); font-size:.75rem; letter-spacing:.1em; color:var(--orange);
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   INSTRUMENTO 02 · o circuito
   ============================================================ */
.circuito{ background:var(--poco); }
.circuito .malha-dobrada{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    repeating-linear-gradient(90deg, rgba(86,112,126,.10) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(86,112,126,.08) 0 1px, transparent 1px 96px);
  -webkit-mask-image:radial-gradient(90% 70% at 60% 30%, #000 0%, transparent 76%);
          mask-image:radial-gradient(90% 70% at 60% 30%, #000 0%, transparent 76%);
}
.circuito__orbita{ display:grid; gap:var(--passo-5); grid-template-columns:1fr; align-items:center; }
@media (min-width:1000px){
  .circuito__orbita{ grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:var(--passo-7); }
}
.circuito__svg{ width:100%; height:auto; overflow:visible; }
.circuito__svg .fio{
  fill:none; stroke:rgba(255,107,0,.75); stroke-width:1;
  stroke-dasharray:520; stroke-dashoffset:520;
}
.is-visivel .circuito__svg .fio{ animation:tracar-fio 900ms var(--easing) forwards; }
.is-visivel .circuito__svg .fio.fio--2{ animation-delay:140ms; }
.is-visivel .circuito__svg .fio.fio--3{ animation-delay:280ms; }
@keyframes tracar-fio{ to{ stroke-dashoffset:0 } }
.circuito__svg .fio--fraco{ stroke:rgba(255,107,0,.42); }
.circuito__svg .no{ fill:var(--ember-2); stroke:rgba(255,107,0,.45); stroke-width:1; }
.circuito__svg .no--critico{ fill:var(--ember-4); stroke:var(--orange); }
.circuito__svg .rotulo{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em;
  fill:#F7F4EF; text-transform:uppercase;
}
.circuito__svg .rotulo--fraco{ fill:#8B8378; font-size:8.6px; letter-spacing:.1em; }
.circuito__principios li{
  border-left:1px solid var(--linha); padding:0 0 var(--passo-4) var(--passo-4); margin-bottom:var(--passo-4);
}
.circuito__principios li:last-child{ padding-bottom:0; margin-bottom:0; }
.circuito__principios h3{ margin-bottom:6px; }
.circuito__principios p{ font-size:1rem; margin:0; }
.modificacoes{ display:grid; gap:1px; background:var(--linha); margin-top:var(--passo-7); }
@media (min-width:820px){ .modificacoes{ grid-template-columns:repeat(2,1fr); } }
.mod{ background:var(--base); padding:var(--passo-5); }
.mod:nth-child(1){ background:var(--ember-1); }
.mod:nth-child(2){ background:var(--ember-2); }
.mod:nth-child(3){ background:var(--ember-3); }
.mod:nth-child(4){ background:var(--ember-4); }
.mod__codigo{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.18em; color:var(--orange);
  display:block; margin-bottom:var(--passo-3);
}
.mod h3{ margin-bottom:var(--passo-3); }
.mod p{ font-size:1rem; margin:0; color:var(--paper-dim); }

/* ============================================================
   INSTRUMENTO 03 · a prancheta
   ============================================================ */
.prancheta{ display:grid; grid-template-columns:1fr; gap:var(--passo-5); position:relative; }
@media (min-width:900px){
  .prancheta{ grid-template-columns:1fr 1fr; gap:var(--passo-7); padding-block:var(--passo-6); }
  .prancheta::before{
    content:""; position:absolute; left:50%; top:-40px; bottom:-40px; width:1px;
    background:linear-gradient(180deg, transparent, var(--orange) 12%, var(--orange) 88%, transparent);
  }
}
.prancheta + .prancheta{ margin-top:var(--passo-7); }
.prancheta__lado h3{ margin-bottom:var(--passo-4); }
.prancheta__lado p{ font-size:1.0625rem; max-width:52ch; }
.prancheta__pedido{
  font-family:var(--fonte-mono); font-size:.9375rem; line-height:1.75; color:var(--paper);
  background:var(--poco); border-left:2px solid var(--orange); padding:var(--passo-4) var(--passo-5);
  max-width:56ch;
}
.pilares{ display:grid; gap:1px; background:var(--linha); margin-top:var(--passo-6); }
@media (min-width:760px){ .pilares{ grid-template-columns:repeat(4,1fr); } }
.pilar{ background:var(--base); padding:var(--passo-4); }
.pilar__num{ font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.16em; color:var(--orange); }
.pilar h3{ font-size:1rem; margin:var(--passo-2) 0 6px; }
.pilar p{ font-size:.9375rem; margin:0; color:var(--paper-dim); }

/* ============================================================
   INSTRUMENTO 04 · a carta de navegação
   ============================================================ */
.carta{ background:var(--poco); }
.eixo{ position:relative; margin-block:var(--passo-7) var(--passo-6); padding-top:var(--passo-7); padding-bottom:92px; }
.eixo__linha{ position:relative; height:1px; background:var(--label); }
.eixo__zona{
  position:absolute; top:-34px; bottom:-12px; left:32%; right:32%;
  background:repeating-linear-gradient(45deg, rgba(255,107,0,.16) 0 6px, transparent 6px 13px);
  border-block:1px solid rgba(255,107,0,.35);
}
.eixo__zona-rotulo{
  position:absolute; top:-38px; left:-1px;
  font-family:var(--fonte-display); font-variation-settings:"wdth" 70,"wght" 700;
  font-size:clamp(1rem,1.7vw,1.45rem); color:var(--orange); text-transform:uppercase; letter-spacing:.01em;
  white-space:nowrap; line-height:1;
}
.eixo__tick{ position:absolute; top:0; width:1px; height:8px; background:rgba(86,112,126,.7); }
.eixo__marca{
  position:absolute; top:26px; transform:translateX(-50%); text-align:center; width:120px;
}
.eixo__marca b{
  display:block; font-family:var(--fonte-mono); font-size:.8125rem; font-weight:600;
  color:var(--paper); font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.eixo__marca span{
  display:block; font-family:var(--fonte-mono); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--label); margin-top:4px; line-height:1.5;
}
@media (max-width:760px){
  .eixo{ padding-bottom:104px; }
  .eixo__marca{ width:84px; }
  .eixo__marca b{ font-size:.6875rem; }
  .eixo__marca span{ font-size:.5rem; letter-spacing:.08em; }
  .eixo__zona-rotulo{ font-size:.9375rem; top:-32px; }
  .eixo__marca--extremo span{ display:none; }
}
.carta__colunas{ display:grid; gap:var(--passo-6); grid-template-columns:1fr; }
@media (min-width:960px){ .carta__colunas{ grid-template-columns:7fr 5fr; gap:var(--passo-7); } }
.carta__bloco h3{ margin-bottom:var(--passo-3); }
.carta__bloco p{ font-size:1.0625rem; max-width:62ch; }
.carta__bloco + .carta__bloco{ margin-top:var(--passo-6); }
.erros li{
  position:relative; padding-left:34px; margin-bottom:var(--passo-3);
  font-size:1.0625rem; color:var(--paper-dim); line-height:1.55;
}
.erros li::before{
  content:""; position:absolute; left:0; top:.62em; width:20px; height:1px; background:var(--orange);
}
.comparacao{ display:grid; grid-template-columns:1fr; gap:var(--passo-5); position:relative; margin-top:var(--passo-6); }
@media (min-width:760px){
  .comparacao{ grid-template-columns:1fr 1fr; gap:var(--passo-6); }
  .comparacao::before{
    content:""; position:absolute; left:50%; top:-32px; bottom:-32px; width:1px; background:rgba(255,107,0,.55);
  }
}
.comparacao__lado{ padding:var(--passo-4) 0; }
.comparacao__lado--antes{ color:var(--paper-dim); }
.comparacao__lado--depois{ background:var(--ember-2); padding:var(--passo-5); }
.comparacao__lado--depois b{ color:var(--orange); font-weight:600; }
.comparacao__lado h3{ margin-bottom:var(--passo-3); }
.comparacao__lado p{ font-size:1rem; margin:0; }

/* ============================================================
   INSTRUMENTO 05 · o painel de canais
   ============================================================ */
.canais{ display:grid; gap:1px; background:var(--linha); grid-template-columns:1fr; }
@media (min-width:900px){ .canais{ grid-template-columns:2fr 1fr 1fr; } }
.canal-col{ position:relative; padding:var(--passo-5) var(--passo-5) var(--passo-6); background:var(--base); }
.canal-col--forte{ background:var(--ember-3); }
.canal-col--medio{ background:var(--ember-2); }
.canal-col--fraco{ background:var(--ember-1); }
.canal-col__trilha{ position:absolute; left:0; top:0; bottom:0; width:1px; background:rgba(86,112,126,.28); }
.canal-col__trilha::before{
  content:""; position:absolute; left:0; top:var(--passo-5); width:1px; height:38px; background:var(--orange);
}
.canal-col p.canal-col__valor{
  font-family:var(--fonte-display); font-variation-settings:"wdth" 64,"wght" 800;
  font-size:clamp(1.9rem,3.4vw,3rem); line-height:.9; color:var(--paper);
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; margin:0 0 var(--passo-3);
}
.canal-col p.canal-col__valor i{ font-style:normal; font-size:.34em; color:var(--orange); vertical-align:top; letter-spacing:0; }
.canal-col h3{ margin-bottom:var(--passo-3); }
.canal-col p{ font-size:1rem; margin:0; }
.casos{ margin-top:var(--passo-7); display:grid; gap:0; border-top:1px solid var(--linha); }
.caso{
  display:grid; grid-template-columns:1fr; gap:var(--passo-2);
  padding-block:var(--passo-5); border-bottom:1px solid rgba(36,30,25,.75);
}
@media (min-width:900px){ .caso{ grid-template-columns:220px minmax(0,1fr); gap:var(--passo-6); } }
.caso__nome{
  font-family:var(--fonte-display); font-variation-settings:"wdth" 74,"wght" 700;
  font-size:1.1rem; text-transform:uppercase; color:var(--paper); letter-spacing:.01em; margin:0;
  text-wrap:balance;
}
.caso__num{
  display:block; font-family:var(--fonte-mono); font-size:.75rem; letter-spacing:.1em;
  color:var(--orange); margin-top:6px; font-variant-numeric:tabular-nums;
}
.caso__texto{ font-size:1.0625rem; max-width:64ch; margin:0; }
.sacadas{ display:grid; gap:var(--passo-5); grid-template-columns:1fr; margin-top:var(--passo-7); }
@media (min-width:1000px){ .sacadas{ grid-template-columns:repeat(3,1fr); gap:var(--passo-5); } }
.sacada{ border-top:2px solid var(--orange); padding-top:var(--passo-4); }
.sacada__codigo{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.18em; color:var(--label);
  display:block; margin-bottom:var(--passo-3);
}
.sacada h3{ margin-bottom:var(--passo-3); }
.sacada p{ font-size:1rem; margin:0; }

/* ============================================================
   INSTRUMENTO 06 · a mesa
   ============================================================ */
.mesa{ display:grid; grid-template-columns:1fr; gap:var(--passo-5); }
@media (min-width:1000px){ .mesa{ grid-template-columns:118px minmax(0,1fr); gap:var(--passo-6); } }
.mesa__nota{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--label); display:flex; align-items:baseline; gap:10px; padding-top:6px;
}
.mesa__nota::after{ content:""; flex:1; height:1px; background:var(--linha); }
.mesa__texto{ font-size:1.125rem; line-height:1.7; max-width:none; }
.mesa__texto > p,.mesa__texto > h2,.mesa__texto > h3{ max-width:64ch; }
.mesa__texto h3{ margin-bottom:var(--passo-3); }
.mesa + .mesa{ margin-top:var(--passo-6); border-top:1px solid rgba(36,30,25,.7); padding-top:var(--passo-6); }
.eras{ display:grid; gap:1px; background:var(--linha); margin-top:var(--passo-6); }
@media (min-width:820px){ .eras{ grid-template-columns:repeat(3,1fr); } }
.era{ padding:var(--passo-5); }
.era:nth-child(1){ background:var(--ember-1); }
.era:nth-child(2){ background:var(--ember-2); }
.era:nth-child(3){ background:var(--ember-4); }
.era__marca{ font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.18em; color:var(--orange); }
.era h3{ margin:var(--passo-2) 0 var(--passo-3); }
.era p{ font-size:1rem; margin:0; }

/* ============================================================
   GAVETA DE MATERIAL DE APOIO
   ============================================================ */
.gaveta{
  position:relative;
  background:radial-gradient(80% 130% at 8% -20%, rgba(255,107,0,.10) 0%, transparent 58%), var(--ember-2);
  border-top:1px solid var(--linha);
}
.gaveta__fio{
  position:absolute; top:-1px; left:calc(var(--margem-viva) * -1); right:38%; height:1px; background:var(--orange);
}
@media (min-width:1024px){ .gaveta__fio{ left:calc(var(--rail-total) - 40px); right:44%; } }
.gaveta__grade{ display:grid; gap:var(--passo-5); grid-template-columns:1fr; margin-top:var(--passo-5); }
@media (min-width:900px){ .gaveta__grade{ grid-template-columns:repeat(3,1fr); align-items:start; } }
.ficha{
  display:grid; grid-template-columns:72px minmax(0,1fr);
  border:1px solid var(--linha); background:var(--raise);
  text-decoration:none; position:relative;
  transition:transform var(--t-micro) var(--easing-micro), box-shadow var(--t-micro) linear, background var(--t-micro) linear;
}
.ficha--principal{ grid-column:span 1; }
@media (min-width:900px){ .ficha--principal{ grid-column:span 2; } }
.ficha__lombada{
  border-right:1px solid var(--linha); padding:var(--passo-4) 0;
  display:flex; flex-direction:column; align-items:center; gap:var(--passo-3);
}
.ficha__lombada span{
  font-family:var(--fonte-mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--label); writing-mode:horizontal-tb; text-align:center; line-height:1.4;
}
.ficha__lombada span + span{ border-top:1px solid var(--linha); padding-top:var(--passo-3); width:100%; }
.ficha__lombada .ficha__codigo{ color:var(--paper); font-weight:600; }
.ficha__corpo{
  display:flex; flex-direction:column;
  padding:var(--passo-4) var(--passo-5) var(--passo-4) var(--passo-4);
}
.ficha__titulo{
  display:block;
  font-family:var(--fonte-display); font-variation-settings:"wdth" 74,"wght" 700;
  font-size:1.15rem; text-transform:uppercase; color:var(--paper); letter-spacing:.005em;
  line-height:1.12; margin:0 0 var(--passo-3);
}
.ficha--principal .ficha__titulo{ font-size:clamp(1.2rem,2vw,1.65rem); }
.ficha__desc{ display:block; font-size:1rem; line-height:1.5; color:var(--paper-dim); margin:0 0 var(--passo-5); max-width:46ch; text-wrap:pretty; }
.ficha__regua{ display:flex; align-items:center; gap:14px; margin-top:auto; }
.ficha__trilho{ position:relative; flex:1; height:1px; background:var(--linha); }
.ficha__trilho::before,.ficha__trilho::after{
  content:""; position:absolute; top:-3px; width:1px; height:7px; background:rgba(86,112,126,.55);
}
.ficha__trilho::before{ left:33%; }
.ficha__trilho::after{ left:66%; }
.ficha__preenche{
  position:absolute; left:0; top:0; height:1px; width:12%; background:var(--orange);
  transition:width var(--t-fio) var(--easing);
}
.ficha__marcador{
  position:absolute; left:12%; top:-3px; width:2px; height:7px; background:var(--orange);
  transition:left var(--t-fio) var(--easing);
}
.ficha__acao{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); white-space:nowrap;
}
.ficha:hover,.ficha:focus-visible{ transform:translateY(-2px); box-shadow:var(--sombra-ficha); background:var(--ember-1); }
.ficha:hover .ficha__preenche,.ficha:focus-visible .ficha__preenche{ width:100%; }
.ficha:hover .ficha__marcador,.ficha:focus-visible .ficha__marcador{ left:calc(100% - 2px); }
.ficha__mira{ position:absolute; inset:0; pointer-events:none; }
.ficha__mira i{
  position:absolute; width:14px; height:14px; border:2px solid var(--orange);
  opacity:0; transform:scale(.8); transition:opacity var(--t-micro) linear, transform var(--t-micro) var(--easing-micro);
}
.ficha__mira i:nth-child(1){ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.ficha__mira i:nth-child(2){ top:-1px; right:-1px; border-left:0; border-bottom:0; transition-delay:20ms; }
.ficha__mira i:nth-child(3){ bottom:-1px; right:-1px; border-left:0; border-top:0; transition-delay:40ms; }
.ficha__mira i:nth-child(4){ bottom:-1px; left:-1px; border-right:0; border-top:0; transition-delay:60ms; }
.ficha:hover .ficha__mira i,.ficha:focus-visible .ficha__mira i{ opacity:1; transform:scale(1); }
.ficha[data-baixado="1"] .ficha__acao{ color:var(--label); }
.ficha[data-baixado="1"] .ficha__preenche{ width:100%; }
.ficha[data-baixado="1"] .ficha__marcador{ left:calc(100% - 2px); }
.ficha[data-baixado="1"] .ficha__codigo{ border-bottom:1px solid var(--orange); }
.ficha[data-baixando="1"] .ficha__trilho{
  height:3px; margin-block:-1px;
  background:repeating-linear-gradient(45deg, rgba(255,107,0,.55) 0 6px, rgba(36,30,25,.9) 6px 13px);
  background-size:200% 100%;
  animation:baixando 900ms linear infinite;
}
@keyframes baixando{ from{ background-position:0 0 } to{ background-position:52px 0 } }

/* ---------------- fechamento da home ---------------- */
.fechamento{ background:var(--poco); }
.fechamento__texto{ font-size:1.125rem; line-height:1.7; max-width:64ch; }
.fechamento__punch{
  font-family:var(--fonte-display); font-variation-settings:"wdth" 70,"wght" 800;
  font-size:clamp(1.6rem,3.4vw,2.8rem); line-height:1.1; color:var(--paper);
  margin-top:var(--passo-5); max-width:20ch; text-wrap:balance;
}
.fechamento__punch b{ color:var(--orange); font-weight:inherit; }

/* ---------------- âncora com scroll seguro ---------------- */
[id]{ scroll-margin-top:calc(var(--topo-h) + 24px); }

/* ============================================================
   componentes.css — peças do sistema usadas por mais de um canal
   (o esqueleto de cada canal continua exclusivo: instrumentos.css)
   ============================================================ */

/* ---------- bloco de leitura em mono (citação técnica) ---------- */
.bloco-mono{
  font-family:var(--fonte-mono); font-size:.9375rem; line-height:1.75; color:var(--paper);
  background:var(--poco); border-left:2px solid var(--orange);
  padding:var(--passo-4) var(--passo-5); max-width:60ch;
}
.bloco-mono p{ margin:0; }

/* ---------- 01 · as duas premissas (escalonadas, sem divisor) ---------- */
.premissas{ display:grid; grid-template-columns:1fr; gap:var(--passo-6); }
@media (min-width:900px){
  .premissas{ grid-template-columns:1fr 1fr; gap:var(--passo-7); }
  .premissas .premissa:nth-child(2){ padding-top:var(--passo-6); }
}
.premissa{ border-top:1px solid var(--linha); padding-top:var(--passo-4); max-width:56ch; }
.premissa h2{ margin-bottom:var(--passo-4); }

/* ---------- 01 · matriz 2x2 com escada de calor ---------- */
.matriz{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linha);
  margin-block:var(--passo-5); border:1px solid var(--linha);
}
.matriz__eixo{
  grid-column:1 / -1; background:var(--base); display:flex; justify-content:space-between;
  font-family:var(--fonte-mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--label); padding:8px 12px; margin:0;
}
.matriz__cel{ background:var(--ember-1); padding:var(--passo-4); position:relative; }
.matriz__cel:nth-of-type(3){ background:var(--ember-2); }
.matriz__cel:nth-of-type(4){ background:var(--ember-3); }
.matriz__cel--alvo{ background:var(--ember-4) !important; }
.matriz__cond{
  font-family:var(--fonte-mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--label); display:block; margin-bottom:8px;
}
.matriz__acao{ font-size:1rem; line-height:1.4; color:var(--paper-dim); margin:0; text-wrap:balance; }
.matriz__cel--alvo .matriz__acao{ color:var(--paper); }

/* ---------- 02 · as duas barras de qualidade ---------- */
.barras{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--linha); margin-top:var(--passo-7); }
@media (min-width:820px){ .barras{ grid-template-columns:1fr 1fr; } }
.barra-qualidade{ background:var(--base); padding:var(--passo-5); }
.barra-qualidade--sensorial{ background:var(--ember-2); }
.barra-qualidade__marca{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); display:block; margin-bottom:var(--passo-3);
}
.barra-qualidade p{ font-size:1rem; margin:0; }

/* ---------- 02 · registros de log (nota em cima, texto largo) ---------- */
.log{ border-top:1px solid var(--linha); padding-top:var(--passo-4); }
.log + .log{ margin-top:var(--passo-6); }
.log__marca{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--orange); margin:0 0 var(--passo-3);
}
.log__texto{ max-width:none; }
.log__texto > p,.log__texto > h3{ max-width:70ch; }
.log__texto h3{ margin-bottom:var(--passo-3); }

/* ---------- 03 · modos e escada ---------- */
.modos{ display:grid; gap:0; }
.modos li{
  display:grid; grid-template-columns:1fr; gap:4px;
  padding-block:var(--passo-4); border-bottom:1px solid rgba(36,30,25,.75);
}
@media (min-width:760px){ .modos li{ grid-template-columns:220px minmax(0,1fr); gap:var(--passo-5); align-items:baseline; } }
.modos li:first-child{ border-top:1px solid var(--linha); }
.modos__marca{
  font-family:var(--fonte-display); font-variation-settings:"wdth" 74,"wght" 700;
  font-size:1rem; text-transform:uppercase; color:var(--paper); letter-spacing:.02em;
}
.modos p{ margin:0; font-size:1rem; max-width:64ch; }
.escada{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--passo-3);
  counter-reset:degrau; padding:0; margin:0 0 var(--passo-6);
  list-style:none;
}
.escada li{ counter-increment:degrau; display:flex; align-items:center; gap:var(--passo-3); }
.escada li::before{
  content:"0" counter(degrau);
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.14em; color:var(--orange);
}
.escada li span{
  font-family:var(--fonte-display); font-variation-settings:"wdth" 72,"wght" 700;
  font-size:clamp(1.1rem,2vw,1.5rem); text-transform:uppercase; color:var(--paper);
}
.escada li:not(:last-child)::after{ content:""; width:clamp(24px,4vw,64px); height:1px; background:var(--linha); }

/* ---------- 05 · grade de erros ---------- */
.erros-grade{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--linha); border:1px solid var(--linha); }
@media (min-width:760px){ .erros-grade{ grid-template-columns:1fr 1fr; } }
.erro-cel{ background:var(--base); padding:var(--passo-5); }
.erro-cel:nth-child(2){ background:var(--ember-1); }
.erro-cel:nth-child(3){ background:var(--ember-1); }
.erro-cel:nth-child(4){ background:var(--ember-2); }
.erro-cel__marca{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); display:block; margin-bottom:var(--passo-3);
}
.erro-cel p{ margin:0; font-size:1rem; }

/* ---------- 05 · bento de cases (células desiguais) ---------- */
.cases-bento{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--linha); border:1px solid var(--linha); }
@media (min-width:900px){ .cases-bento{ grid-template-columns:repeat(3,1fr); } }
.bento{ background:var(--base); padding:var(--passo-5); }
@media (min-width:900px){ .bento--largo{ grid-column:span 2; } }
.bento--quente{ background:var(--ember-3); }
.bento__marca{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); display:block; margin-bottom:var(--passo-3); line-height:1.6;
}
.bento p{ margin:0; font-size:1rem; }

/* ---------- rodapé, terceiro nível ---------- */
.rodape__uso{
  font-family:var(--fonte-mono); font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:#5A544E; margin:var(--passo-3) 0 0;
}


/* ============================================================
   DIAGRAMAS · o mecanismo desenhado (SVG em código, 1px, mono)
   ============================================================ */
.figura{ margin:var(--passo-6) 0; }
.figura__palco{ position:relative; }
.figura__rotulo{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); margin:0 0 var(--passo-3); display:flex; align-items:center; gap:10px;
}
.figura__rotulo::after{ content:""; flex:1; height:1px; background:var(--linha); }
.figura p.figura__legenda{
  font-family:var(--fonte-mono); font-size:.6875rem; line-height:1.7; letter-spacing:.06em;
  color:var(--label); margin:var(--passo-3) 0 0; max-width:64ch;
  border-left:1px solid var(--linha); padding-left:var(--passo-3);
}
.dgm{ display:block; width:100%; height:auto; overflow:visible; }
.dgm .tr{ fill:none; stroke:rgba(86,112,126,.45); stroke-width:1; }
.dgm .tr-fogo{ fill:none; stroke:var(--orange); stroke-width:1; }
.dgm .tr-morto{ fill:none; stroke:rgba(86,112,126,.28); stroke-width:1; stroke-dasharray:5 5; }
.dgm .cx{ fill:var(--ember-1); stroke:var(--linha); stroke-width:1; }
.dgm .cx-media{ fill:var(--ember-2); stroke:var(--linha); stroke-width:1; }
.dgm .cx-quente{ fill:var(--ember-4); stroke:rgba(255,107,0,.55); stroke-width:1; }
.dgm .cx-morta{ fill:none; stroke:rgba(86,112,126,.3); stroke-width:1; stroke-dasharray:4 6; }
.dgm .chapa{ fill:var(--orange); }
.dgm .chapa-fraca{ fill:rgba(255,107,0,.28); }
.dgm .chapa-morta{ fill:rgba(86,112,126,.22); }
.dgm .hachura{ fill:url(#hachura); stroke:rgba(255,107,0,.35); stroke-width:1; }
.dgm .rot{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.12em;
  fill:#F7F4EF; text-transform:uppercase;
}
.dgm .rot-fraco{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:8.8px; letter-spacing:.1em;
  fill:#8B8378; text-transform:uppercase;
}
.dgm .rot-fogo{ fill:var(--orange); }
.dgm .num{
  font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 66,"wght" 800;
  font-size:26px; fill:#F7F4EF; letter-spacing:-.03em;
}
.dgm .num-peq{ font-size:17px; }
.dgm .traca{ stroke-dasharray:900; stroke-dashoffset:900; }
.dgm .cresce{ transform:scaleX(0); transform-origin:left center; }
.dgm .sobe{ transform:scaleY(0); transform-origin:center bottom; }
.is-visivel .dgm .traca{ animation:tracar-traco 820ms var(--easing) forwards; }
.is-visivel .dgm .cresce{ animation:tracar 620ms var(--easing) forwards; }
.is-visivel .dgm .sobe{ animation:subir-barra 560ms var(--easing) forwards; }
.is-visivel .dgm .atraso-1{ animation-delay:80ms; }
.is-visivel .dgm .atraso-2{ animation-delay:160ms; }
.is-visivel .dgm .atraso-3{ animation-delay:240ms; }
@keyframes tracar-traco{ to{ stroke-dashoffset:0 } }
@keyframes subir-barra{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }

.figura p.figura__arraste{ display:none; }
@media (max-width:760px){
  .figura__palco{ overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:10px; }
  .figura__palco .dgm{ min-width:540px; }
  .figura p.figura__arraste{
    display:block; font-family:var(--fonte-mono); font-size:.625rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--orange); margin-top:6px;
  }
}
@media (prefers-reduced-motion: reduce){
  .dgm .traca{ stroke-dashoffset:0; }
  .dgm .cresce{ transform:none; }
  .dgm .sobe{ transform:none; }
}


/* ---------- contenção: nenhum diagrama empurra a largura do painel ---------- */
.figura,.figura__palco{ min-width:0; max-width:100%; }
.carta__colunas > *,.numeros__grade > *,.circuito__orbita > *,.prancheta > *,
.mesa > *,.chave > *,.canais > *,.premissas > *,.tensao__grade > *,
.segunda__grade > *,.caso > *,.cases-bento > *,.sacadas > *,.modificacoes > *,
.barras > *,.erros-grade > *,.pilares > *,.eras > *,.ritual > *,.abertura-fio > *,
.log,.log__texto,.chave__corpo,.prancheta__lado,.mesa__texto,.tensao__texto,
.segunda__texto,.carta__bloco{ min-width:0; }

.figura p.figura__legenda,.figura p.figura__arraste{ font-family:var(--fonte-mono); }