/* ============================================================
   console.css — cabeçalho, trilha (rail), drawer mobile,
   painéis, varredura de troca de canal, hero e índice da home
   ============================================================ */

/* ---------------- cabeçalho fixo ---------------- */
.topo{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:50;
  height:var(--topo-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--passo-4);
  padding-inline:var(--margem-viva);
  background:linear-gradient(180deg, rgba(4,4,4,.94) 0%, rgba(4,4,4,.72) 62%, transparent 100%);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.topo::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--orange) 0 92px, rgba(36,30,25,.9) 92px 100%);
}
.marca{ display:flex; align-items:center; gap:var(--passo-3); text-decoration:none; }
.marca img{ width:112px; height:auto; mix-blend-mode:screen; }
@media (max-width:599px){
  .topo__leitura > span:first-child,.topo__sep{ display:none; }
}
.topo__leitura{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--label); margin:0;
  display:flex; align-items:center; gap:var(--passo-3);
  font-variant-numeric:tabular-nums;
}
.topo__canal{ color:var(--paper); overflow:hidden; display:inline-block; }
.topo__canal span{ display:inline-block; animation:revelar var(--t-micro) var(--easing) both; }
.topo__sep{ width:26px; height:1px; background:var(--orange); }

/* ---------------- gesto 2 · a trilha, promovida a navegação ---------------- */
.rail{
  position:fixed; left:var(--rail-esq); top:0; bottom:0; width:var(--rail);
  z-index:40; display:none;
  padding-block:calc(var(--topo-h) + var(--passo-6)) var(--passo-6);
}
@media (min-width:1024px){ .rail{ display:block; } }
.rail__fio{ position:absolute; left:0; top:0; bottom:0; width:1px; background:rgba(86,112,126,.22); }
.rail__seletor{
  position:absolute; left:0; top:0; width:1px; height:34px; background:var(--orange);
  box-shadow:0 0 14px rgba(255,107,0,.40);
  transition:transform .26s var(--easing);
  will-change:transform;
}
.rail__lista{ display:flex; flex-direction:column; gap:28px; height:100%; justify-content:center; }
.rail__item{
  position:relative; display:block; padding-left:20px; text-decoration:none;
  cursor:pointer;
}
.rail__tick{
  position:absolute; left:-5px; top:9px; width:11px; height:1px;
  background:rgba(86,112,126,.55);
  transition:width var(--t-micro) var(--easing-micro), background var(--t-micro) linear, left var(--t-micro) var(--easing-micro);
}
.rail__num{
  display:block; font-family:var(--fonte-mono); font-size:.8125rem; font-weight:600;
  letter-spacing:.12em; color:var(--label); font-variant-numeric:tabular-nums;
  transition:color var(--t-micro) linear;
}
.rail__nome{
  display:block; font-family:var(--fonte-display); font-variation-settings:"wdth" 70,"wght" 700;
  font-size:.9375rem; text-transform:uppercase; letter-spacing:.02em; color:var(--paper-dim);
  transition:color var(--t-micro) linear;
}
.rail__tema{
  display:block; font-family:var(--fonte-mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--label);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height var(--t-micro) var(--easing-micro), opacity var(--t-micro) linear;
}
.rail__item:hover .rail__nome,
.rail__item:focus-visible .rail__nome{ color:var(--paper); }
.rail__item:hover .rail__tick,
.rail__item:focus-visible .rail__tick{ background:rgba(255,107,0,.45); }
.rail__item:hover .rail__tema,
.rail__item:focus-visible .rail__tema{ max-height:20px; opacity:1; }
.rail__item[aria-selected="true"]{
  background:var(--ember-1);
  padding-block:var(--passo-2);
  margin-block:calc(var(--passo-2) * -1);
}
.rail__item[aria-selected="true"] .rail__tick{ background:var(--orange); width:17px; left:-8px; }
.rail__item[aria-selected="true"] .rail__num{ color:var(--paper); }
.rail__item[aria-selected="true"] .rail__nome{ color:var(--paper); }
.rail__item[aria-selected="true"] .rail__tema{ max-height:20px; opacity:1; }
.rail__item[aria-selected="true"]::before,
.rail__item[aria-selected="true"]::after{
  content:""; position:absolute; width:12px; height:12px; border:2px solid var(--orange);
}
.rail__item[aria-selected="true"]::before{ top:-2px; left:8px; border-right:0; border-bottom:0; }
.rail__item[aria-selected="true"]::after{ bottom:-2px; right:-6px; border-left:0; border-top:0; }
.rail__item[data-visitado="1"] .rail__num::after{
  content:""; display:inline-block; width:6px; height:1px; background:var(--orange-dim);
  vertical-align:middle; margin-left:6px;
}

/* ---------------- barra de canal + drawer (mobile) ---------------- */
.barra{
  position:fixed; inset-inline:0; bottom:0; z-index:45;
  display:flex; align-items:center; justify-content:space-between; gap:var(--passo-3);
  padding:var(--passo-3) var(--margem-viva) calc(var(--passo-3) + env(safe-area-inset-bottom));
  background:rgba(4,4,4,.93);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--linha);
  font-family:var(--fonte-mono);
  color:var(--paper-dim);
  width:100%; text-align:left; cursor:pointer;
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
}
@media (min-width:1024px){ .barra{ display:none; } }
.barra__pilula{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,107,0,.5); border-radius:999px;
  padding:6px 14px; color:var(--paper); font-weight:600;
  font-variant-numeric:tabular-nums;
}
.barra__tema{ color:var(--label); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.barra__abrir{ color:var(--orange); letter-spacing:.14em; white-space:nowrap; }

.drawer{
  position:fixed; inset:0; z-index:70; display:none;
  background:linear-gradient(180deg, #050403 0%, #0B0907 68%, #100D0A 100%);
  padding:var(--passo-5) var(--margem-viva) calc(var(--passo-6) + env(safe-area-inset-bottom));
  overflow-y:auto;
  transform:translateY(100%);
  transition:transform var(--t-varredura) var(--easing);
}
.drawer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(86,112,126,.10) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  rgba(86,112,126,.06) 0 1px, transparent 1px 72px);
  -webkit-mask-image:radial-gradient(120% 70% at 12% 0%, #000 0%, transparent 78%);
          mask-image:radial-gradient(120% 70% at 12% 0%, #000 0%, transparent 78%);
}
.drawer > *{ position:relative; }
.drawer[data-aberto="1"]{ display:block; }
.drawer[data-aberto="1"].is-dentro{ transform:translateY(0); }
.drawer__topo{
  display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:1px solid var(--linha); padding-bottom:var(--passo-3); margin-bottom:var(--passo-4);
}
.drawer__fechar{
  background:none; border:0; color:var(--orange); font-family:var(--fonte-mono);
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; padding:6px 0;
}
.drawer__item{
  display:grid; grid-template-columns:56px 1fr; gap:var(--passo-4);
  align-items:baseline; text-decoration:none;
  padding-block:var(--passo-3); border-bottom:1px solid rgba(36,30,25,.8);
}
.drawer__num{
  font-family:var(--fonte-display); font-variation-settings:"wdth" 62,"wght" 800;
  font-size:2.5rem; line-height:.8; color:var(--label); margin-left:-14px;
  font-variant-numeric:tabular-nums;
}
.drawer__item[aria-selected="true"] .drawer__num{ color:var(--orange); }
.drawer__nome{
  display:block; font-family:var(--fonte-display); font-variation-settings:"wdth" 72,"wght" 700;
  font-size:1.5rem; text-transform:uppercase; color:var(--paper); letter-spacing:-.01em; line-height:1.05;
}
.drawer__tema{ display:block; font-family:var(--fonte-texto); font-style:italic; color:var(--paper-dim); font-size:.9375rem; }

/* ---------------- painéis ---------------- */
.console{ position:relative; z-index:1; }
.painel{ position:relative; }
/* painel inativo sai do fluxo por [hidden] (display:none): sem layout, sem paint,
   fora da árvore de acessibilidade. content-visibility seria redundante aqui. */
.painel[hidden]{ display:none; }
/* foco programático na troca de canal anuncia o painel sem desenhar caixa no título */
.painel:focus{ outline:none; }
.painel:focus-visible{ outline:none; }
.painel--entrando{ animation:abrir var(--t-varredura) var(--easing) both; }
@keyframes abrir{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }
.painel--entrando-inv{ animation:abrir-inv var(--t-varredura) var(--easing) both; }
@keyframes abrir-inv{ from{ clip-path:inset(0 0 0 100%) } to{ clip-path:inset(0 0 0 0) } }
.painel--saindo > *{ animation:sair .18s var(--easing-saida) both; }
@keyframes sair{ to{ opacity:0; transform:translateY(-10px) } }

.varredura{
  position:fixed; inset-block:0; width:2px; z-index:55; pointer-events:none;
  background:var(--orange); box-shadow:0 0 22px 2px rgba(255,107,0,.55);
  animation:varrer var(--t-varredura) var(--easing) both;
  will-change:transform;
}
@keyframes varrer{ from{ transform:translateX(-4vw) } to{ transform:translateX(104vw) } }
.varredura--inv{ animation-name:varrer-inv; }
@keyframes varrer-inv{ from{ transform:translateX(104vw) } to{ transform:translateX(-4vw) } }

@media (min-width:1024px){
  .faixa{ padding-left:var(--rail-total); }
  .painel{ padding-bottom:0; }
}
.painel{ padding-bottom:64px; }
@media (min-width:1024px){ .painel{ padding-bottom:0; } }

/* ---------------- hero da home ---------------- */
.hero{
  min-height:min(100svh,820px);
  display:grid; align-content:center; justify-items:center; text-align:center;
  padding:calc(var(--topo-h) + var(--passo-5)) var(--margem-viva) var(--passo-6);
  background:radial-gradient(78% 62% at 14% -6%, rgba(255,107,0,.09) 0%, transparent 60%), var(--base);
  position:relative; overflow:hidden;
}
@media (min-width:1024px){ .hero{ padding-left:var(--margem-viva); } }
.hero__label{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--orange); margin:0 0 var(--passo-5); display:inline-flex; align-items:center; gap:10px;
}
.hero__label::before,.hero__label::after{ content:""; width:34px; height:1px; background:rgba(255,107,0,.55); }
.hero__titulo{
  width:min(560px,88vw); margin:0 auto var(--passo-5);
  font-variation-settings:"wdth" 78,"wght" 800;
  font-size:clamp(2rem,8vw,4.9rem);
  line-height:1.06; letter-spacing:-.035em; text-wrap:balance;
}
@media (min-width:1024px){ .hero__titulo{ width:min(1000px,62vw); } }
@media (min-width:1500px){ .hero__titulo{ width:min(880px,58vw); } }
.hero__sub{
  font-family:var(--fonte-texto); font-size:clamp(1rem,1.35vw,1.1875rem); line-height:1.58;
  color:var(--paper-dim); max-width:58ch; margin:0 auto var(--passo-5); text-wrap:pretty;
}
.hero__nav{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--label); margin:0 0 var(--passo-5); max-width:52ch;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; row-gap:6px;
}
.hero__nav span{ white-space:nowrap; }
.hero__nav i{ color:var(--orange); font-style:normal; padding-inline:6px; }
.hero__base{
  position:absolute; inset-inline:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,107,0,.5) 22%, rgba(36,30,25,.9) 60%, transparent);
}

.cta{
  display:inline-flex; align-items:center; gap:14px;
  padding:17px 26px; text-decoration:none;
  border:1px solid rgba(255,107,0,.55);
  background:var(--ember-2);
  color:var(--paper);
  font-family:var(--fonte-mono); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  transition:background var(--t-micro) linear, transform var(--t-micro) var(--easing-micro), box-shadow var(--t-micro) linear;
}
.cta__risco{ width:34px; height:1px; background:var(--orange); transition:width var(--t-micro) var(--easing-micro); }
.cta:hover{ background:var(--ember-3); transform:translateY(-2px); box-shadow:var(--sombra-ficha); }
.cta:hover .cta__risco{ width:52px; }

/* ---------------- índice dos canais (home) ---------------- */
.indice{ border-top:1px solid var(--linha); }
.indice__linha{
  position:relative; display:grid; gap:var(--passo-3);
  grid-template-columns:1fr;
  padding-block:var(--passo-5);
  border-bottom:1px solid var(--linha);
  text-decoration:none;
  transition:background var(--t-micro) linear;
}
@media (min-width:900px){
  .indice__linha{ grid-template-columns:92px minmax(230px,.9fr) 1.5fr; gap:var(--passo-5); align-items:baseline; }
}
.indice__linha:hover{ background:var(--ember-1); }
.indice__num{
  font-family:var(--fonte-display); font-variation-settings:"wdth" 62,"wght" 800;
  font-size:clamp(2.5rem,5vw,3.6rem); line-height:.82; color:var(--label);
  font-variant-numeric:tabular-nums; letter-spacing:-.05em;
  margin-left:clamp(-14px,-1.4vw,-8px);
  transition:color var(--t-micro) linear;
}
.indice__linha:hover .indice__num{ color:var(--orange); }
.indice__nome{
  display:block;
  font-family:var(--fonte-display); font-variation-settings:"wdth" 72,"wght" 700;
  font-size:clamp(1.5rem,2.6vw,2.1rem); text-transform:uppercase; color:var(--paper);
  line-height:1.05; letter-spacing:-.015em; margin:0 0 6px;
}
.indice__tema{
  display:block;
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); margin:0;
}
.indice__tese{
  display:block;
  font-family:var(--fonte-texto); font-size:1rem; line-height:1.55; color:var(--paper-dim);
  max-width:58ch; margin:0; text-wrap:pretty;
}
.indice__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);
}
.indice__linha:hover .indice__fio,
.indice__linha:focus-visible .indice__fio{ transform:scaleX(1); }

/* ---------------- abertura editorial (home) ---------------- */
.abertura-fio{
  display:grid; gap:var(--passo-6);
  grid-template-columns:1fr;
}
@media (min-width:1000px){
  .abertura-fio{ grid-template-columns:minmax(240px,.55fr) minmax(0,1fr); gap:var(--passo-7); }
  /* o mostrador do 1% fica preso na altura do olho enquanto o percurso corre ao lado */
  .abertura-fio > div:first-child{
    position:sticky; align-self:start; top:calc(var(--topo-h) + var(--passo-5));
  }
}
.abertura-fio__carta{ font-size:1.0625rem; max-width:64ch; }
.abertura-fio__carta p{ margin-bottom:var(--passo-4); }
.abertura-fio__fecho{
  font-family:var(--fonte-display); font-variation-settings:"wdth" 78,"wght" 700;
  font-size:clamp(1.15rem,1.8vw,1.5rem); color:var(--paper); text-transform:none;
  border-left:2px solid var(--orange); padding-left:var(--passo-4); margin-top:var(--passo-5);
  line-height:1.25;
}
.contexto{
  display:grid; gap:var(--passo-4); grid-template-columns:1fr;
  border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);
  padding-block:var(--passo-5);
}
@media (min-width:900px){ .contexto{ grid-template-columns:200px minmax(0,1fr); gap:var(--passo-6); } }
.contexto__texto{ font-size:1rem; max-width:70ch; color:var(--paper-dim); margin:0; }

/* ============================================================
   HOME · camada gráfica da abertura (iteração 2026-08-24)
   quatro instrumentos novos ancorando cada ideia enquanto ela é dita:
   barra de leitura do dia, régua de proporção, percurso em estações
   e mostrador por linha do índice. Tudo em CSS, zero imagem, zero lib.
   ============================================================ */

/* ---------- 1 · barra de leitura do dia (respiro entre hero e fio) ---------- */
.barra-dia{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--linha); border:1px solid var(--linha);
  margin:var(--passo-5) 0 0; padding:0; list-style:none;
}
@media (min-width:760px){ .barra-dia{ grid-template-columns:repeat(4,1fr); } }
.barra-dia__cel{
  position:relative; background:var(--poco);
  padding:var(--passo-4) var(--passo-4) var(--passo-3);
  display:flex; flex-direction:column; gap:4px; min-width:0;
}
.barra-dia__cel:last-child{ background:var(--ember-1); }
.barra-dia__tick{
  position:absolute; top:0; left:0; height:2px; width:12px;
  background:rgba(86,112,126,.6);
}
.barra-dia__cel:first-child .barra-dia__tick,
.barra-dia__cel:last-child .barra-dia__tick{ width:26px; background:var(--orange); }
.barra-dia__valor{
  font-family:var(--fonte-display); font-variation-settings:"wdth" 66,"wght" 800;
  font-size:clamp(2rem,5vw,2.85rem); line-height:.9; color:var(--paper);
  font-variant-numeric:tabular-nums; letter-spacing:-.04em;
}
.barra-dia__valor i{
  font-style:normal; font-family:var(--fonte-mono); font-size:.3em;
  color:var(--orange); letter-spacing:.04em; margin-left:6px; vertical-align:top;
}
.barra-dia__rot{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--label); line-height:1.5;
}

/* ---------- 2 · régua de proporção: o 1% virando escala visível ---------- */
.proporcao{ margin-top:var(--passo-5); }
.proporcao__topo{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--passo-3); margin-bottom:10px;
}
.proporcao__marca{
  font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; margin:0; line-height:1.4; font-variant-numeric:tabular-nums;
}
.proporcao__marca--fogo{ color:var(--orange); }
.proporcao__marca--fraca{ color:var(--label); text-align:right; }
.proporcao__trilho{
  position:relative; height:54px; border:1px solid var(--linha);
  background:var(--poco);
  background-image:repeating-linear-gradient(90deg, rgba(86,112,126,.5) 0 1px, transparent 1px 1%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 72%,rgba(0,0,0,.42) 100%);
          mask-image:linear-gradient(90deg,#000 0%,#000 72%,rgba(0,0,0,.42) 100%);
}
.proporcao__corte{
  position:absolute; top:-8px; bottom:-8px; left:0; width:3px;
  background:var(--orange); box-shadow:0 0 14px rgba(255,107,0,.55);
}
.proporcao__nota{
  font-family:var(--fonte-mono); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--label); line-height:1.6; text-wrap:pretty;
  margin:10px 0 0; border-left:1px solid var(--linha); padding-left:var(--passo-3);
}

/* ---------- 3 · percurso: o fio quebrado em estações ---------- */
.percurso{ position:relative; list-style:none; margin:0; padding:0; }
.percurso::before{
  content:""; position:absolute; left:5px; top:8px; bottom:14px; width:1px;
  background:linear-gradient(180deg, var(--orange) 0 34px, var(--linha) 34px 100%);
  transform:scaleY(0); transform-origin:top center;
}
.is-visivel .percurso::before{ animation:tracar-vertical 860ms var(--easing) forwards; }
@keyframes tracar-vertical{ to{ transform:scaleY(1) } }
.percurso__estacao{ position:relative; padding-left:32px; min-width:0; }
.percurso__estacao + .percurso__estacao{ margin-top:var(--passo-6); }
.percurso__no{
  position:absolute; left:0; top:4px; width:11px; height:11px;
  border:1px solid rgba(255,107,0,.55); background:var(--base);
}
.percurso__estacao:first-child .percurso__no{ border-color:var(--orange); background:var(--ember-4); }
.percurso__marca{
  display:block; font-family:var(--fonte-mono); font-size:.6875rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--label); line-height:1.5; margin:0 0 var(--passo-4);
  text-wrap:balance;
}
.percurso__marca b{
  color:var(--orange); font-weight:600; margin-right:9px; font-variant-numeric:tabular-nums;
}
.percurso__estacao > p{ margin:var(--passo-4) 0 0; }

/* elo: os canais que se cruzam e a pergunta que fica aberta entre eles */
.elo{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  background:var(--ember-1); border-block:1px solid var(--linha);
  padding:var(--passo-3);
}
.elo__chip{
  display:flex; flex-direction:column; gap:3px; padding:8px 11px; min-width:0;
  border:1px solid var(--linha); background:var(--base);
}
.elo__chip b{
  font-family:var(--fonte-mono); font-size:.625rem; letter-spacing:.16em; font-weight:600;
  color:var(--orange); font-variant-numeric:tabular-nums;
}
.elo__chip i{
  font-style:normal; font-family:var(--fonte-display);
  font-variation-settings:"wdth" 74,"wght" 700; font-size:.8125rem;
  text-transform:uppercase; letter-spacing:.005em; color:var(--paper); line-height:1.1;
}
.elo__chip--fim{ background:var(--ember-3); border-color:rgba(255,107,0,.45); }
.elo__seta{
  position:relative; flex:0 0 auto; width:20px; height:1px;
  background:rgba(255,107,0,.8);
}
.elo__seta::after{
  content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  border-left:5px solid var(--orange); border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
}
.elo__gap{
  flex:1 1 100%; font-family:var(--fonte-mono); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--label); line-height:1.6; margin:2px 0 0;
  text-wrap:pretty;
}
.elo__gap b{ color:var(--paper); font-weight:500; }
@media (max-width:600px){
  .elo{ flex-direction:column; align-items:stretch; gap:6px; }
  .elo__chip{ flex-direction:row; align-items:baseline; gap:10px; }
  .elo__seta{ width:1px; height:15px; margin-left:14px; background:rgba(255,107,0,.8); }
  .elo__seta::after{
    right:auto; left:-3px; top:auto; bottom:-1px; transform:none;
    border-left:3.5px solid transparent; border-right:3.5px solid transparent;
    border-top:5px solid var(--orange); border-bottom:0;
  }
}

/* estação 00: o corte de R$ 1 milhão e a faixa que vem logo depois dele */
.salto-faixa{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--linha); border:1px solid var(--linha);
}
@media (min-width:560px){ .salto-faixa{ grid-template-columns:1fr 1fr; } }
.salto-faixa__marca{
  position:relative; background:var(--base); min-width:0;
  padding:var(--passo-4) var(--passo-4) var(--passo-3);
}
.salto-faixa__marca--risco{
  background:
    repeating-linear-gradient(45deg, rgba(255,107,0,.11) 0 6px, transparent 6px 13px),
    var(--ember-2);
}
.salto-faixa__tick{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--orange) 0 34px, rgba(36,30,25,.85) 34px 100%);
}
.salto-faixa__marca--risco .salto-faixa__tick{ background:rgba(255,107,0,.8); }
.salto-faixa__marca--risco::before{
  content:""; position:absolute; z-index:2; left:50%; top:0; transform:translate(-50%,-1px);
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid var(--orange);
}
@media (min-width:560px){
  .salto-faixa__marca--risco::before{
    left:0; top:50%; transform:translate(-1px,-50%);
    border-left:7px solid var(--orange); border-right:0;
    border-top:6px solid transparent; border-bottom:6px solid transparent;
  }
}
.salto-faixa__valor{
  display:block; font-family:var(--fonte-display); font-variation-settings:"wdth" 80,"wght" 700;
  font-size:clamp(1.02rem,2.3vw,1.3rem); line-height:1.16; color:var(--paper);
  letter-spacing:-.005em; word-spacing:.04em; font-variant-numeric:tabular-nums;
}
.salto-faixa__rot{
  display:block; margin-top:7px; font-family:var(--fonte-mono); font-size:.625rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--label); line-height:1.55; text-wrap:balance;
}
.salto-faixa__marca--risco .salto-faixa__rot{ color:var(--orange); }

/* ---------- 4 · mostrador por linha do índice ---------- */
.indice__mostrador{
  position:relative; display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--passo-3); padding-top:var(--passo-3); margin-top:2px;
}
.indice__mostrador::before{
  content:""; position:absolute; top:0; left:0; width:26px; height:2px; background:var(--orange);
}
.indice__valor{
  font-family:var(--fonte-display); font-variation-settings:"wdth" 66,"wght" 800;
  font-size:clamp(1.55rem,3.4vw,2.05rem); line-height:.95; color:var(--paper);
  font-variant-numeric:tabular-nums; letter-spacing:-.035em; white-space:nowrap;
  transition:color var(--t-micro) linear;
}
.indice__valor i{
  font-style:normal; font-family:var(--fonte-mono); font-size:.34em;
  color:var(--orange); letter-spacing:.04em; margin-left:6px; vertical-align:top;
}
.indice__valor i:first-child{ margin:0 6px 0 0; }
.indice__unidade{
  font-family:var(--fonte-mono); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--label); line-height:1.5; text-align:right;
  text-wrap:balance;
}
@media (min-width:900px){
  .indice__linha{ grid-template-columns:92px minmax(186px,.76fr) minmax(0,1.3fr) 156px; }
  .indice__mostrador{ display:block; padding-top:var(--passo-3); margin-top:0; }
  .indice__mostrador::before{ left:auto; right:0; }
  .indice__valor{ display:block; text-align:right; }
  .indice__unidade{ display:block; margin-top:8px; }
}
.indice__linha:hover .indice__valor{ color:var(--orange); }

@media (prefers-reduced-motion: reduce){
  .percurso::before{ transform:none; }
}