/* ==========================================================================
   PEÇAS — os elementos da referência, reconstruídos com o nosso dado e a nossa cor.
   Nada aqui é print de tela: cada peça é a coisa funcionando.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TEXTO EM GRADIENTE  (referência: bg-clip-text branco → laranja-200 → laranja-400)
   -------------------------------------------------------------------------- */
.grad-texto {
  background: linear-gradient(100deg, var(--cream) 0%, #ffd2b4 46%, var(--acento-claro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   2. DIVISOR COM RÓTULO NO MEIO (referência: linha em gradiente + rótulo sobre o fundo)
   -------------------------------------------------------------------------- */
.divisor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1px;
  margin-block: var(--esp-5);
  background: linear-gradient(90deg, transparent, rgba(243, 106, 33, 0.5), transparent);
}
.divisor span {
  padding-inline: 10px;
  background: var(--fundo-cartao);
  font-size: var(--t-micro);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-4);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. CHIP DE ÍCONE CIRCULAR (referência: w-14 h-14 rounded-full, borda acende no hover)
   -------------------------------------------------------------------------- */
.trio-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-3);
}
.chip {
  display: grid;
  justify-items: center;
  gap: var(--esp-3);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}
.chip__circulo {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-3);
  transition: all var(--dur-hover) var(--curva-entrada);
}
.chip:hover .chip__circulo,
.chip:focus-visible .chip__circulo {
  color: var(--cream);
  border-color: var(--borda-acento);
  background: var(--acento-10);
  transform: scale(1.10);           /* hover:scale-110 da referência */
}
.chip__rotulo {
  font-size: var(--t-peq);
  line-height: 1.25;
  color: var(--texto-4);
  transition: color 150ms ease;
}
.chip:hover .chip__rotulo { color: var(--texto-2); }
.chip__circulo svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   4. CARTÃO DE MÉTRICA COM SPARKLINE
      (referência: badge com ping · métrica 4xl em gradiente · área+linha+ponto · lista · divisor · tags)
   -------------------------------------------------------------------------- */
.metrica {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--esp-5);
  border-radius: var(--raio-cartao);
  background: var(--fundo-cartao);
  box-shadow: 0 0 0 1px var(--borda);   /* nível cartão */
  overflow: hidden;
}
.metrica::after {                       /* névoa laranja no topo, como no cartão da referência */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 160px;
  background: linear-gradient(180deg, rgba(243, 106, 33, 0.12), transparent);
  pointer-events: none;
}
.metrica > * { position: relative; z-index: 1; }
.metrica__selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  font-size: var(--t-micro);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-3);
}
.metrica__titulo { margin: var(--esp-4) 0 6px; font-size: var(--t-h4); font-weight: 500; color: var(--texto); }
.metrica__sub { margin: 0 0 var(--esp-5); font-size: var(--t-peq); line-height: 1.5; color: var(--texto-3); }
.metrica__valor {
  display: flex;
  align-items: baseline;
  gap: 8px var(--esp-3);
  flex-wrap: wrap;
}
/* com nowrap na pílula, ela só cabe ao lado se sobrar espaço; senão desce
   inteira, numa linha só, em vez de virar um bloco laranja de três linhas. */
.metrica__valor .metrica__variacao { flex: 0 0 auto; }
.metrica__numero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.metrica__variacao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--acento-10);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--acento-claro);
}
.metrica__lista { display: grid; gap: var(--esp-3); width: 100%; margin: var(--esp-5) 0 0; padding: 0; list-style: none; }
.metrica__lista li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  font-size: var(--t-peq);
}
.metrica__lista .rotulo { display: inline-flex; align-items: center; gap: 10px; color: var(--texto-2); }
.metrica__lista .rotulo svg { width: 15px; height: 15px; color: var(--acento); flex: none; }
.metrica__lista .valor { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.metrica__tags { display: flex; flex-wrap: wrap; gap: var(--esp-4); width: 100%; }
.metrica__tags span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-micro); color: var(--texto-4);
}
.metrica__tags svg { width: 13px; height: 13px; color: var(--sage); }

/* sparkline */
.sparkline { width: 100%; height: 34px; margin-top: var(--esp-4); overflow: visible; }
.sparkline line.marca { stroke: var(--acento-claro); stroke-width: 2; stroke-linecap: round; }

/* linha do tempo: os rótulos são HTML por cima do SVG, porque texto dentro de
   um viewBox com preserveAspectRatio="none" sai esticado na horizontal. */
.linha-tempo { position: relative; }
.linha-tempo__vao {
  position: absolute; top: 0; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-left: 1px dashed var(--borda); border-right: 1px dashed var(--borda);
  pointer-events: none;
}
.linha-tempo__vao > span {
  padding: 1px 6px;
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  font-size: var(--t-micro);
  color: var(--texto-3);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.linha-tempo__legenda {
  margin: 8px 0 0;
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--texto-4);
}
.sparkline path.linha { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sparkline path.area  { stroke: none; }
.sparkline circle.ponta { fill: var(--cream); stroke: var(--acento); stroke-width: 2; }
/* o traço se desenha ao entrar na tela */
.js .sparkline path.linha { stroke-dasharray: var(--comp, 600); stroke-dashoffset: var(--comp, 600); }
.js .visivel .sparkline path.linha,
.js .sparkline.visivel path.linha { animation: desenharTraco 1.4s var(--curva-entrada) 0.2s forwards; }
@keyframes desenharTraco { to { stroke-dashoffset: 0; } }
.js .sparkline path.area, .js .sparkline circle.ponta { opacity: 0; }
.js .visivel .sparkline path.area, .js .sparkline.visivel path.area { animation: aparecer 900ms ease-out 0.9s forwards; }
.js .visivel .sparkline circle.ponta, .js .sparkline.visivel circle.ponta { animation: aparecer 400ms ease-out 1.5s forwards; }
@keyframes aparecer { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  /* a sparkline nasce desenhada: nada de traço correndo nem área surgindo */
  .js .sparkline path.linha { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .js .sparkline path.area, .js .sparkline circle.ponta { opacity: 1 !important; animation: none !important; }
  .orbita__palco { transition: none; }
}

/* --------------------------------------------------------------------------
   5. PAINEL DE APP  (referência: ring-1 branco/10, barra superior, sidebar, corpo)
   -------------------------------------------------------------------------- */
.painel {
  position: relative;
  border-radius: 20px;
  background: rgba(16, 43, 38, 0.86);
  box-shadow: 0 0 0 1px var(--borda), var(--glow-1);   /* referência: ring-white/10 + glow laranja; sombra preta só no depoimento dela */
  overflow: hidden;
}
.painel::before {                        /* glow no canto, como o da referência */
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--acento-10);
  filter: blur(60px);
  pointer-events: none;
}
/* No mobile a barra empilha: em 390px o carimbo estourava a trilha em 160px e
   ficava escrito POR CIMA da janela de datas — dois textos no mesmo lugar. */
.painel__barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px var(--esp-3);
  padding: 10px var(--esp-4);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda-sutil);
  backdrop-filter: blur(10px);
  position: relative;
}
.painel__trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: var(--t-peq); color: var(--texto-3); min-width: 0; }
.painel__trilha .marca-mini { display: inline-flex; align-items: center; gap: 7px; color: var(--texto); transition: color 150ms ease; }
.painel__trilha .marca-mini:hover { color: var(--acento-claro); }
.painel__trilha .sep { opacity: 0.4; }
.painel__trilha .atual { color: var(--texto); white-space: nowrap; }
.pill-vivo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px;
  border-radius: var(--raio-pilula);
  background: var(--acento-10);
  box-shadow: inset 0 0 0 1px var(--acento-20);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--acento-claro);
  white-space: nowrap;
}
.painel__acoes { display: flex; align-items: center; gap: var(--esp-2); }
.painel__busca {
  display: none;
  align-items: center; gap: 8px;
  height: 30px; padding-inline: 10px;
  border-radius: 8px;
  background: rgba(11, 33, 30, 0.6);
  box-shadow: inset 0 0 0 1px var(--borda);
  font-size: var(--t-peq);
  color: var(--texto-4);
}
.painel__corpo { display: grid; grid-template-columns: 1fr; }
.painel__lado { display: none; }
@media (min-width: 768px) {
  .painel__busca { display: flex; }
  .painel__corpo { grid-template-columns: 210px 1fr; }
  .painel__lado {
    display: block;
    padding: var(--esp-4) var(--esp-3);
    background: var(--superficie);
    border-right: 1px solid var(--borda-sutil);
  }
}
.painel__grupo { margin-bottom: var(--esp-5); }
.painel__nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.painel__nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: var(--t-peq);
  color: var(--texto-3);
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}
.painel__nav a:hover { color: var(--texto); background: var(--superficie-forte); }
.painel__nav a[aria-current] {
  color: var(--texto);
  background: var(--superficie-forte);
  box-shadow: inset 0 0 0 1px var(--borda);
}
.painel__nav svg { width: 15px; height: 15px; flex: none; }
.painel__main { padding: var(--esp-4); min-width: 0; }

/* --------------------------------------------------------------------------
   6. TABELA DE DADOS VIVA (referência: linhas com ponto, uma em destaque com ping)
   -------------------------------------------------------------------------- */
.tabela { width: 100%; }
.tabela__cab, .tabela__linha {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--esp-3);
  align-items: center;
  padding: 12px 10px;
}
.tabela__cab {
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--texto);
  padding-bottom: 8px;
}
.tabela__cab span:not(:first-child) { color: var(--texto-3); text-align: right; }
.tabela__linha {
  position: relative;
  border-top: 1px solid var(--borda-sutil);
  border-radius: 8px;
  font-size: var(--t-peq);
  color: var(--texto-3);
  overflow: hidden;
  transition: background-color 150ms ease;
}
.tabela__linha:hover { background: var(--superficie-hover); }
.tabela__linha .quem { display: flex; align-items: center; gap: 10px; color: var(--texto-2); min-width: 0; }
.tabela__linha .quem b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabela__linha .num, .tabela__linha .estado { text-align: right; font-variant-numeric: tabular-nums; }
.tabela__linha .marcador { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-4); flex: none; }
.tabela__linha--destaque { color: var(--texto-2); }
.tabela__linha--destaque::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(243, 106, 33, 0.14), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity var(--dur-hover) ease;
}
.tabela__linha--destaque:hover::before { opacity: 1; }
.tabela__linha--destaque .quem { color: var(--texto); position: relative; }
.tabela__linha--destaque .num { color: var(--texto); position: relative; }
.tabela__linha--destaque .estado { color: var(--acento-claro); position: relative; }

/* --------------------------------------------------------------------------
   7. ÓRBITA  (referência: 3 anéis, centro com ping, 6 ícones em spin 60s + contra-rotação)
   -------------------------------------------------------------------------- */
.orbita {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  border-radius: var(--raio-cartao);
  background: var(--fundo-cartao);
  box-shadow: inset 0 0 0 1px var(--borda);
  overflow: hidden;
}
@media (min-width: 768px) { .orbita { min-height: 450px; } }
.orbita__fundo {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(243, 106, 33, 0.16) 0%, rgba(0, 0, 0, 0) 68%);
  pointer-events: none;
}
.orbita__palco {
  position: relative;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  transform: scale(0.62);
  transition: transform 500ms var(--curva-entrada);
}
@media (min-width: 768px) { .orbita__palco { transform: scale(0.86); } }
/* 1200 é a ÚNICA exceção aos três degraus: só aí a coluna de .duas-colunas cabe o anel de 500px em escala 1 */
@media (min-width: 1200px) { .orbita__palco { transform: scale(1); } }
.orbita__anel {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(243, 106, 33, 0.3);
  pointer-events: none;
}
.orbita__anel--1 { width: 180px; height: 180px; opacity: 0.7; }
.orbita__anel--2 { width: 340px; height: 340px; opacity: 0.55; border-color: rgba(243, 106, 33, 0.4); }
.orbita__anel--3 { width: 500px; height: 500px; opacity: 0.35; border-color: rgba(243, 106, 33, 0.28); }

.orbita__centro {
  position: relative;
  display: grid; place-items: center;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: #120f08;
  box-shadow: 0 0 0 1px rgba(243, 106, 33, 0.5), 0 0 50px -5px rgba(243, 106, 33, 0.5);
  z-index: 2;
}
.orbita__centro::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--acento);
  opacity: 0.2;
  animation: pingar 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.orbita__centro img { width: 46px; height: 46px; object-fit: contain; }

.orbita__anel-giro {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  animation: girar 60s linear infinite;
}
.orbita__item {
  position: absolute;
  top: 50%; left: 50%;
  /* --a = ângulo, --r = raio. A contra-rotação mantém o ícone de pé. */
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
}
.orbita__chip {
  display: grid; place-items: center; gap: 0;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--forest-2);
  box-shadow: 0 0 0 1px var(--borda), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);   /* referência: shadow-lg */
  color: var(--texto-3);
  animation: girarAoContrario 60s linear infinite;
  transition: color var(--dur-hover) ease, box-shadow var(--dur-hover) ease, transform var(--dur-hover) var(--curva-entrada);
  cursor: default;
}
.orbita__chip:hover {
  color: var(--cream);
  box-shadow: 0 0 0 1px rgba(228, 237, 229, 0.3), 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.15);
  transform: scale(1.10);            /* hover:scale-110 */
}
.orbita__chip svg { width: 21px; height: 21px; }
.orbita__legenda {
  position: absolute;
  left: 50%; bottom: var(--esp-3);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-peq);
  color: var(--texto-4);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. CONECTOR TRACEJADO  (referência: seleção à esquerda ligada ao detalhe à direita)
   -------------------------------------------------------------------------- */
.conector { display: none; }
@media (min-width: 1024px) {
  .conector { display: block; position: relative; width: 100%; height: 100%; min-height: 240px; align-self: stretch; }
}
.conector__ativo--espera { opacity: 0.4; }
.conector svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.conector__inativo { fill: none; stroke: var(--texto-4); stroke-width: 2; stroke-dasharray: 6 6; opacity: 0.22; transition: opacity 400ms ease; }
.conector__ativo {
  fill: none;
  stroke: var(--acento);
  stroke-width: 2;
  stroke-dasharray: 8 8;
  animation: fluir 1s linear infinite;
  filter: drop-shadow(0 0 6px rgba(243, 106, 33, 0.5));
}
.conector__alvo { fill: var(--acento); }
.conector__seta { fill: none; stroke: var(--acento); stroke-width: 2; }

/* o ponto que sai da escolha selecionada em direção ao conector */
.escolha__no {
  position: absolute;
  right: -6px; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 4px var(--fundo);
  transform: translate(50%, -50%) scale(0);
  transition: transform 320ms var(--curva-entrada);
}
@media (min-width: 1024px) {
  .escolha[aria-checked="true"] .escolha__no { transform: translate(50%, -50%) scale(1); }
}

/* --------------------------------------------------------------------------
   9. COMPLEMENTOS das peças acima
   -------------------------------------------------------------------------- */
.ico-14 { width: 14px; height: 14px; }

.painel__grade { display: grid; gap: var(--esp-5); }
@media (min-width: 1024px) {
  .painel__grade { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--esp-5); align-items: start; }
}

/* pé do recorte: escala do tempo à esquerda, medidas à direita */
.conversa__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-3);
  margin-top: var(--esp-4);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--borda-sutil);
}
.conversa__medidas { font-size: var(--t-micro); color: var(--texto-4); line-height: 1.5; }
.conversa__medidas b { color: var(--texto-2); font-weight: 600; font-variant-numeric: tabular-nums; }
/* [copy 08/09] O desfecho fica na propria linha do rodape. Um <b> que quebra de linha
   tem caixa cobrindo as duas linhas, e o gate visual acusava sobreposicao com o <b>
   do tempo total (551px2 na 7900 em 1440). Linha propria: nenhuma caixa cruza outra. */
.conversa__medidas--fim { flex-basis: 100%; }
/* O cartao da conversa e um <figure>, e figure vem do navegador com
   margin: 1em 40px. Em 1440 os 40px nao apareciam; em 390 comiam 80px de 390 e
   a conversa ficava com 286px de largura dentro de uma faixa de largura total.
   Nenhuma regra nossa pedia isso — era o padrao do agente do usuario. */
.conversa { margin: 0; }
.conversa--destaque { box-shadow: 0 0 0 1px var(--borda-acento), 0 18px 50px rgba(11, 33, 30, 0.45); }

/* selos de procedência do número */
.selo-medido, .selo-autorizado {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: var(--raio-pilula);
  font-size: var(--t-micro);   /* era 10px — abaixo do piso de 11px do próprio tokens.css */
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
}
.selo-medido     { background: rgba(33, 97, 79, 0.55);  color: var(--sage-soft); }
.selo-autorizado { background: var(--acento-20); color: var(--acento-claro); }

/* o par escolhas + conector */
.funil__par { display: grid; gap: var(--esp-3); }
@media (min-width: 1024px) {
  .funil__par { grid-template-columns: minmax(0, 1fr) 190px; align-items: center; }
  .escolhas { position: relative; }
  .escolha { position: relative; }
}

/* --------------------------------------------------------------------------
   10. O DIAGNÓSTICO — duas procedências, dois cartões, nunca no mesmo lugar
   -------------------------------------------------------------------------- */
.diagnostico__lado { display: grid; align-content: start; }

.cartao-estimativa {
  padding: var(--esp-5);
  border-radius: var(--raio-cartao);
  box-shadow: 0 0 0 1px var(--borda);   /* nível cartão */
  background: linear-gradient(160deg, rgba(243, 106, 33, 0.1), rgba(243, 106, 33, 0.03));
}
.selo-estimativa, .selo-medido-grande {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--raio-pilula);
  font-size: var(--t-micro);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
}
.selo-estimativa { background: var(--acento-20); color: #ffd2b4; }
.selo-medido-grande { background: rgba(33, 97, 79, 0.6); color: var(--sage-soft); }

.cartao-estimativa .numerao {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--esp-3);
  margin: var(--esp-4) 0 0;
  white-space: normal;
}
.numerao__valor { font-size: clamp(3.25rem, 1.6rem + 7vw, 5rem); line-height: 0.9; }
.numerao__unidade {
  font-family: var(--font-ui);
  font-size: var(--t-grande);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--texto-2);
}
.cartao-estimativa__chamada { margin: var(--esp-2) 0 0; font-size: var(--t-ui); color: var(--texto-3); }

.conta { display: grid; gap: var(--esp-3); margin: var(--esp-5) 0 0; padding: 0; list-style: none; counter-reset: passo; }
.conta li { display: grid; gap: 3px; }
.conta__rotulo {
  font-size: var(--t-micro);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--acento-claro);
}
.conta__texto { font-size: var(--t-ui); line-height: 1.5; color: var(--texto-2); }
.conta li:last-child .conta__texto { color: var(--texto); font-weight: 600; }
.conta__ressalva {
  margin: var(--esp-4) 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--borda);
  font-size: var(--t-peq);
  line-height: 1.55;
  color: var(--texto-3);
}
.conta__fecho { margin: var(--esp-4) 0 0; font-size: var(--t-ui); font-weight: 600; color: var(--texto); }

.cartao-medido { padding: var(--esp-5); border-radius: var(--raio-cartao); background: var(--superficie); box-shadow: 0 0 0 1px var(--borda); }
.cartao-medido__intro { margin: var(--esp-3) 0 var(--esp-4); font-size: var(--t-peq); color: var(--texto-3); }
.medido-lista { display: grid; gap: var(--esp-4); margin: 0; padding: 0; list-style: none; }
.medido-lista li { display: grid; gap: 3px; padding-top: var(--esp-3); border-top: 1px solid var(--borda-sutil); }
.medido-lista li:first-child { border-top: 0; padding-top: 0; }
.medido__valor {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--texto);
}
.medido__oque { font-size: var(--t-ui); line-height: 1.45; color: var(--texto-2); }
.medido__fonte { font-size: var(--t-micro); line-height: 1.45; color: var(--texto-4); }

/* --------------------------------------------------------------------------
   11. CARIMBO DE MEDIÇÃO — no lugar da pílula "ao vivo"
   -------------------------------------------------------------------------- */
.pill-carimbo {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none;
  padding: 2px 9px;
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borda);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--texto-3);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .painel__barra { flex-direction: column; align-items: stretch; }
  .painel__acoes { justify-content: flex-start; }
  .painel__janela { white-space: normal; }
}
.ico-12 { width: 12px; height: 12px; }
.painel__janela { font-size: var(--t-micro); color: var(--texto-4); white-space: nowrap; }
.painel__fonte { margin: 0 8px; font-size: var(--t-micro); line-height: 1.5; color: var(--texto-4); }
.painel__fonte a { color: var(--acento-claro); }
.painel__grupo h3 {
  margin: 0 0 8px 8px;
  font-size: var(--t-micro);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-4);
}
.numeros--autorizados { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .numeros--autorizados { grid-template-columns: 1fr 1fr; }
  /* o numero sai de cima do texto e vai para o lado dele: o cartao e largo, e
     empilhado sobrava metade da largura vazia na direita. */
  .numeros--autorizados .caixa {
    grid-template-columns: minmax(0, auto) 1fr;
    column-gap: var(--esp-5);
    align-content: center;
  }
  .numeros--autorizados .numerao { grid-row: 1 / 3; align-self: center; margin: 0; }
}

/* --------------------------------------------------------------------------
   12. TROCAR O VOLUME — o visitante refaz a conta com o número dele
   -------------------------------------------------------------------------- */
.troca-volume {
  display: grid;
  gap: 10px;
  margin-top: var(--esp-5);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--borda);
}
.troca-volume label {
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--texto-2);
  line-height: 1.4;
}
.troca-volume__linha { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; }
.troca-volume input {
  width: 7.5rem;
  min-height: var(--toque);
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  background: rgba(11, 33, 30, 0.55);
  color: var(--texto);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.troca-volume input:focus { border-color: var(--borda-acento); }
.troca-volume .btn { min-height: var(--toque); padding: 10px 18px; font-size: var(--t-peq); }
.troca-volume .nota { margin: 0; max-width: 46ch; }

/* --------------------------------------------------------------------------
   13. SEM JAVASCRIPT
   -------------------------------------------------------------------------- */
.sem-js {
  position: relative;
  z-index: 50;
  max-width: var(--container);
  margin: var(--esp-4) auto;
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--raio-caixa);
  border: 1px solid var(--borda-acento);
  background: var(--acento-10);
  color: var(--texto);
  font-size: var(--t-ui);
  line-height: 1.55;
}
.sem-js a { color: var(--acento-claro); }

/* --------------------------------------------------------------------------
   A TABELA VIRA LISTA ATÉ 1023px
   Três colunas em 390px faziam cada célula quebrar em cinco linhas verticais, e
   em 768 (painel com lateral) a coluna do meio ainda quebrava em quatro. Abaixo
   de 1024 cada conversa é um bloco com rótulo e valor — o mesmo tratamento do
   mobile, decidido em 07/09/2026.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .tabela__cab { display: none; }
  .tabela__linha {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: var(--esp-4) var(--esp-3);
    border-top: 1px solid var(--borda-sutil);
    border-radius: var(--raio-caixa);
  }
  .tabela__linha .quem { font-size: var(--t-ui); }
  .tabela__linha .trava,
  .tabela__linha .estado {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    text-align: left;
    align-items: baseline;
  }
  .tabela__linha .trava::before,
  .tabela__linha .estado::before {
    content: attr(data-rotulo);
    font-size: var(--t-micro);
    font-weight: var(--peso-rotulo);
    letter-spacing: var(--track-rotulo);
    text-transform: uppercase;
    color: var(--texto-4);
    white-space: nowrap;
  }
}

/* a coluna do meio da tabela agora diz o que travava, não um número */
.tabela__linha .trava {
  color: var(--texto-2);
  font-size: var(--t-peq);
  line-height: 1.35;
  min-width: 0;
}
.tabela__cab span:nth-child(2), .tabela__linha .trava { text-align: left; }