/* ==========================================================================
   Avaliação de Eficiência — estilos
   Os tokens vêm de lynse-site/src/styles/tokens.css, para o app e o site não
   divergirem. Uma diferença deliberada: nenhuma fonte remota.
   ========================================================================== */

:root {
  /* ---- Cores de marca -------------------------------------------------- */
  --laranja: #DE702A;
  --grafite: #575756;
  --grafite-2: #2E2E2E;
  --carbono: #000000;
  --branco: #FFFFFF;

  --laranja-texto: #A4521E;   /* 5,5:1 sobre claro, para link em texto corrido */
  --laranja-hover: #C25F22;

  /* ---- Superfícies ----------------------------------------------------- */
  --sup-0: #FFFFFF;
  --sup-1: #F6F6F4;
  --sup-2: #ECEBE8;
  --sup-3: #DEDCD8;

  /* ---- Texto ----------------------------------------------------------- */
  --txt: var(--carbono);
  --txt-2: var(--grafite);

  --linha: #D8D6D1;
  --linha-forte: #B9B6AF;

  /* ---- Tipografia ------------------------------------------------------
     O site usa Urbanist do Google Fonts como substituta da Garet, que ainda
     não foi licenciada. Aqui a pilha é do sistema, de propósito: a página do
     relatório não pode fazer requisição a terceiro (arquitetura §10), e um
     pedido ao Google numa tela que acabou de coletar dado pessoal entrega o
     IP de quem respondeu. Quando a Garet for licenciada e hospedada aqui, é
     só trocar esta linha. */
  --fonte: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fs-display-md: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  --fs-heading-lg: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  --fs-heading-md: 1.3125rem;
  --fs-heading-sm: 1.0625rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: .875rem;
  --fs-kicker: .75rem;

  --lh-titulo: 1.2;
  --lh-corpo: 1.55;
  --ls-kicker: .22em;

  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-bold: 700;

  /* ---- Espaço ---------------------------------------------------------- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px;

  /* 16px de respiro lateral já em 320px, sem rolagem horizontal */
  --goteira: max(4vw, 16px);
  --medida: 34rem;           /* largura de leitura confortável */

  --raio-sm: 2px;
  --raio-md: 4px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-rapida: 120ms;
  --dur-base: 200ms;

  /* Alvo mínimo de toque. O backlog exige 44×44 px CSS. */
  --alvo: 44px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sup-1);
  color: var(--txt);
  font-family: var(--fonte);
  font-size: var(--fs-body);
  line-height: var(--lh-corpo);
  /* Área segura do aparelho: barra inferior do iPhone não cobre conteúdo. */
  padding-bottom: env(safe-area-inset-bottom);
}

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--laranja);
  outline-offset: 3px;
  border-radius: var(--raio-sm);
}

::selection { background: var(--laranja); color: var(--branco); }

/* --------------------------------------------------------------------------
   Estrutura
   -------------------------------------------------------------------------- */

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--branco);
  padding: var(--e3) var(--e4);
  border: 2px solid var(--laranja);
}
.pular:focus-visible { left: var(--e4); top: var(--e4); }

.vis-oculta {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.envelope {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 var(--goteira);
}

.cabeca {
  border-bottom: 1px solid var(--linha);
  background: var(--sup-0);
}
.cabeca-interna {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 60px;
  padding: var(--e3) var(--goteira);
  max-width: 44rem;
  margin: 0 auto;
}
.marca img { display: block; height: 30px; width: auto; }

main { padding: var(--e6) 0 var(--e8); }

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

h1, h2, h3 { line-height: var(--lh-titulo); margin: 0 0 var(--e4); }
h1 { font-size: var(--fs-display-md); font-weight: var(--peso-bold); letter-spacing: -.01em; }
h2 { font-size: var(--fs-heading-lg); font-weight: var(--peso-bold); }
h3 { font-size: var(--fs-heading-sm); font-weight: var(--peso-semi); }

p { margin: 0 0 var(--e4); max-width: var(--medida); }

.kicker {
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  font-weight: var(--peso-semi);
  color: var(--txt-2);
  margin: 0 0 var(--e3);
}

.lede { font-size: var(--fs-body-lg); color: var(--txt-2); }
.nota { font-size: var(--fs-body-sm); color: var(--txt-2); }

.confianca {
  font-size: var(--fs-body-sm);
  color: var(--txt-2);
  border-top: 1px solid var(--linha);
  padding-top: var(--e4);
  margin-top: var(--e5);
}
.confianca li { margin-bottom: var(--e2); }
.confianca ul { margin: 0; padding-left: var(--e5); }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--alvo);
  padding: var(--e3) var(--e5);
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  font: inherit;
  font-weight: var(--peso-semi);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease);
}
.btn-laranja { background: var(--laranja); color: var(--branco); }
.btn-laranja:hover:not(:disabled) { background: var(--laranja-hover); }
.btn-vazio { background: transparent; color: var(--txt); border-color: var(--linha-forte); }
.btn-vazio:hover:not(:disabled) { background: var(--sup-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-largo { width: 100%; }

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e5);
}
/* Em telas estreitas o botão ocupa a linha: alvo grande e sem toque acidental */
@media (max-width: 29.99rem) {
  .acoes { flex-direction: column; align-items: stretch; }
  .acoes .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Progresso
   -------------------------------------------------------------------------- */

.progresso { margin-bottom: var(--e5); }
.progresso-texto {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  font-size: var(--fs-body-sm);
  color: var(--txt-2);
  margin-bottom: var(--e2);
}
.progresso-barra {
  height: 4px;
  background: var(--sup-3);
  border-radius: var(--raio-pill, 999px);
  overflow: hidden;
}
.progresso-preenchido {
  height: 100%;
  width: 0;
  background: var(--laranja);
  transition: width var(--dur-base) var(--ease);
}

/* --------------------------------------------------------------------------
   Perguntas e opções
   -------------------------------------------------------------------------- */

.passo { background: var(--sup-0); border: 1px solid var(--linha); border-radius: var(--raio-md); padding: var(--e5); }
@media (min-width: 48rem) { .passo { padding: var(--e6); } }

.instrucao { font-size: var(--fs-body-sm); color: var(--txt-2); margin-bottom: var(--e3); }

.pergunta { font-size: var(--fs-heading-md); font-weight: var(--peso-semi); line-height: var(--lh-titulo); margin: 0 0 var(--e5); }

.opcoes { display: grid; gap: var(--e3); margin: 0 0 var(--e5); border: 0; padding: 0; }
.opcoes legend { padding: 0; }

.opcao {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--alvo);
  padding: var(--e3) var(--e4);
  background: var(--sup-0);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-md);
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease), background var(--dur-rapida) var(--ease);
}
.opcao:hover { background: var(--sup-1); }
.opcao input { width: 20px; height: 20px; margin: 0; accent-color: var(--laranja); flex: none; }
/* Estado selecionado por borda e peso, não só por cor: o backlog proíbe
   depender de cor sozinha para comunicar estado. */
.opcao:has(input:checked) {
  border-color: var(--laranja);
  border-width: 2px;
  padding: calc(var(--e3) - 1px) calc(var(--e4) - 1px);
  background: var(--sup-0);
  font-weight: var(--peso-semi);
}
.opcao:has(input:focus-visible) { outline: 2px solid var(--laranja); outline-offset: 2px; }
.opcao-texto { flex: 1; }
.opcao-nao-sei { border-style: dashed; }

/* --------------------------------------------------------------------------
   Prévia e índice
   -------------------------------------------------------------------------- */

.indice-bloco { background: var(--sup-0); border: 1px solid var(--linha); border-radius: var(--raio-md); padding: var(--e5); }
.indice-numero {
  font-size: clamp(3rem, 2rem + 6vw, 4.5rem);
  font-weight: var(--peso-bold);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
}
.indice-numero span { font-size: .4em; font-weight: var(--peso-medio); color: var(--txt-2); }
.indice-rotulo { font-size: var(--fs-body-sm); color: var(--txt-2); margin: var(--e2) 0 0; }
.indice-ressalva {
  font-size: var(--fs-body-sm);
  color: var(--txt-2);
  border-left: 2px solid var(--linha-forte);
  padding-left: var(--e3);
  margin: var(--e4) 0 0;
}
.sem-indice { font-weight: var(--peso-semi); font-size: var(--fs-heading-sm); }

.previa-grade { display: grid; gap: var(--e5); }
@media (min-width: 56rem) {
  .previa-grade { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--e6); }
}

/* --------------------------------------------------------------------------
   Formulário
   -------------------------------------------------------------------------- */

.campo { margin-bottom: var(--e4); }
.campo label { display: block; font-weight: var(--peso-semi); font-size: var(--fs-body-sm); margin-bottom: var(--e1); }
.campo input {
  width: 100%;
  min-height: var(--alvo);
  padding: var(--e3) var(--e4);
  font: inherit;
  color: var(--txt);
  background: var(--sup-0);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-md);
}
.campo input:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.campo-ajuda { font-size: var(--fs-body-sm); color: var(--txt-2); margin: var(--e1) 0 0; }
.campo-erro { font-size: var(--fs-body-sm); color: #A3261B; font-weight: var(--peso-semi); margin: var(--e1) 0 0; }
.campo input[aria-invalid='true'] { border-color: #A3261B; border-width: 2px; }

.escolha {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) 0;
  min-height: var(--alvo);
}
.escolha input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--laranja); flex: none; }

/* A nota da caixa e um <span>, nao um <p> como a ajuda dos campos: sem
   bloco ela emenda no fim do rotulo e o margin-top nao vale nada. */
.escolha .campo-ajuda { display: block; }

.aviso {
  background: var(--sup-2);
  border-radius: var(--raio-md);
  padding: var(--e4);
  font-size: var(--fs-body-sm);
  color: var(--txt-2);
  margin: var(--e4) 0;
}
.aviso p { max-width: none; margin-bottom: var(--e2); }
.aviso p:last-child { margin-bottom: 0; }
.aviso a {
  color: var(--laranja-texto);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.aviso a:hover { color: var(--laranja-hover); }

.resumo-de-erros {
  background: #FDF0EE;
  border: 1px solid #A3261B;
  border-radius: var(--raio-md);
  padding: var(--e4);
  margin-bottom: var(--e5);
}
.resumo-de-erros h2 { font-size: var(--fs-heading-sm); margin-bottom: var(--e2); }
.resumo-de-erros ul { margin: 0; padding-left: var(--e5); }

/* --------------------------------------------------------------------------
   Relatório
   -------------------------------------------------------------------------- */

.relatorio-cabeca { border-bottom: 1px solid var(--linha); padding-bottom: var(--e5); margin-bottom: var(--e5); }

.dimensoes { list-style: none; margin: 0 0 var(--e6); padding: 0; display: grid; gap: var(--e4); }
.dimensao-topo { display: flex; justify-content: space-between; gap: var(--e3); font-size: var(--fs-body-sm); margin-bottom: var(--e1); }
.dimensao-nome { font-weight: var(--peso-semi); }
.dimensao-nota { font-variant-numeric: tabular-nums; color: var(--txt-2); }
/* Barra simples, nunca velocímetro: a direção visual recusa gráfico que
   sugira precisão científica. Tem equivalente em texto ao lado. */
.dimensao-barra { height: 6px; background: var(--sup-3); border-radius: 999px; overflow: hidden; }
.dimensao-preenchido { height: 100%; background: var(--grafite); }
.dimensao-preenchido.e-restricao { background: var(--laranja); }
.dimensao-sem-nota { font-size: var(--fs-body-sm); color: var(--txt-2); font-style: italic; }

.bloco { margin: 0 0 var(--e5); }
.bloco p { max-width: var(--medida); }
.bloco-lista { display: grid; gap: var(--e4); margin: 0 0 var(--e5); padding: 0; list-style: none; }
.bloco-lista li {
  background: var(--sup-0);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--laranja);
  border-radius: var(--raio-md);
  padding: var(--e4);
}
.bloco-lista p:last-child { margin-bottom: 0; }

.secao-relatorio { margin-bottom: var(--e7); }
.secao-relatorio > h2 { margin-bottom: var(--e4); }

.metodo {
  background: var(--sup-2);
  border-radius: var(--raio-md);
  padding: var(--e5);
  font-size: var(--fs-body-sm);
}
.metodo p { max-width: none; }
.metodo p:last-child { margin-bottom: 0; }

.rodape {
  border-top: 1px solid var(--linha);
  margin-top: var(--e7);
  padding: var(--e5) 0;
  font-size: var(--fs-body-sm);
  color: var(--txt-2);
}

/* --------------------------------------------------------------------------
   Estados
   -------------------------------------------------------------------------- */

.carregando { display: flex; align-items: center; gap: var(--e3); color: var(--txt-2); }
.girador {
  width: 18px; height: 18px; flex: none;
  border: 2px solid var(--linha-forte);
  border-top-color: var(--laranja);
  border-radius: 50%;
  animation: gira 700ms linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.oculto { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Sem JavaScript
   -------------------------------------------------------------------------- */

/* O questionário precisa de JavaScript para ter uma pergunta por tela e
   retomar respostas. Em vez de mostrar uma casca vazia, a página diz o que
   está acontecendo — e as perguntas aparecem como texto, para o conteúdo não
   depender do script. */
.sem-js { background: var(--sup-2); border-left: 3px solid var(--laranja); padding: var(--e4); margin-bottom: var(--e5); }
.js-presente .sem-js { display: none; }
.js-presente .lista-estatica { display: none; }
.lista-estatica li { margin-bottom: var(--e3); }

/* --------------------------------------------------------------------------
   Impressão — o relatório é o que as pessoas imprimem
   -------------------------------------------------------------------------- */

@media print {
  body { background: var(--branco); }
  .cabeca, .rodape, .acoes, .pular { display: none; }
  .bloco-lista li, .indice-bloco, .metodo { border: 1px solid var(--linha); background: none; }
  main { padding: 0; }
  .secao-relatorio { break-inside: avoid; }
}

/* ==========================================================================
   Entrada em cena
   Movimento curto, uma vez só, e sempre terminando visível: `both` fixa o
   estado final, então uma animação que não rode deixa o conteúdo na tela em
   vez de escondido. A regra de movimento reduzido lá em cima encurta tudo.
   ========================================================================== */

.entra {
  animation: entra 380ms var(--ease) both;
  animation-delay: var(--atraso, 0ms);
}

@keyframes entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Abertura
   -------------------------------------------------------------------------- */

.heroi { padding-bottom: var(--e6); }
.heroi h1 { max-width: 20ch; }
.heroi .lede { max-width: var(--medida); }

.btn-lg { padding: var(--e4) var(--e6); font-size: var(--fs-body-lg); }
.seta { width: 14px; height: 14px; flex: none; }

/* Selos da linha de confiança: as mesmas frases, em fila em vez de lista. */
.selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  list-style: none;
  margin: var(--e5) 0 0;
  padding: 0;
}
.selos li {
  font-size: var(--fs-body-sm);
  color: var(--txt-2);
  background: var(--sup-2);
  border-radius: 999px;
  padding: var(--e2) var(--e4);
}

/* O caminho: as quatro dimensões, nomeadas, com o que cada uma olha. */
.caminho { margin: 0 0 var(--e7); }
.caminho > .nota { max-width: var(--medida); margin-bottom: var(--e5); }

.trilhos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e4);
}

.trilho {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'marca nome' 'marca texto';
  column-gap: var(--e4);
  row-gap: var(--e1);
  padding-bottom: var(--e4);
  animation: entra 380ms var(--ease) both;
  animation-delay: var(--atraso, 0ms);
}

/* A linha que liga um trecho ao seguinte. Some no último. */
.trilho::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: var(--linha);
}
.trilho:last-child { padding-bottom: 0; }
.trilho:last-child::before { display: none; }

.trilho-marca {
  grid-area: marca;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid var(--laranja);
  border-radius: 50%;
  background: var(--sup-1);
  font-size: var(--fs-body-sm);
  font-weight: var(--peso-bold);
  color: var(--laranja-texto);
  position: relative;
  z-index: 1;
}
.trilho-nome { grid-area: nome; font-weight: var(--peso-semi); }
.trilho-texto { grid-area: texto; color: var(--txt-2); font-size: var(--fs-body-sm); }

/* Em telas largas os quatro trechos ficam lado a lado, como um caminho. */
@media (min-width: 52rem) {
  .trilhos { grid-template-columns: repeat(4, 1fr); gap: var(--e5); }
  .trilho {
    grid-template-columns: 1fr;
    grid-template-areas: 'marca' 'nome' 'texto';
    row-gap: var(--e2);
    padding-bottom: 0;
  }
  .trilho::before {
    left: 32px;
    right: calc(var(--e5) * -1);
    top: 15px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
}

/* O que você recebe: três cartões. */
.recebe { margin: 0 0 var(--e7); }
.cartoes {
  list-style: none;
  margin: 0 0 var(--e4);
  padding: 0;
  display: grid;
  gap: var(--e4);
}
@media (min-width: 46rem) {
  .cartoes { grid-template-columns: repeat(3, 1fr); }
}
.cartao {
  background: var(--sup-0);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--laranja);
  border-radius: var(--raio-md);
  padding: var(--e4);
}
.cartao p { margin: 0; font-size: var(--fs-body-sm); }
.icone {
  width: 24px;
  height: 24px;
  color: var(--laranja-texto);
  margin-bottom: var(--e3);
  display: block;
}

/* --------------------------------------------------------------------------
   Cobertura: um traço por pergunta comum
   Mostra o que o índice tem por trás sem dizer nada sobre a nota. Na prévia é
   a única forma além do número, porque faixa e dimensões só aparecem depois
   do cadastro.
   -------------------------------------------------------------------------- */

.cobertura { margin: var(--e4) 0 0; }
.cobertura-rotulo { font-size: var(--fs-body-sm); color: var(--txt-2); margin: 0 0 var(--e2); }
.cobertura-pontos { display: flex; gap: var(--e1); margin: 0; padding: 0; list-style: none; }
.cobertura-pontos li {
  width: 100%;
  max-width: 28px;
  height: 6px;
  border-radius: 999px;
  background: var(--sup-3);
}
.cobertura-pontos li.conhecida { background: var(--grafite); }

/* --------------------------------------------------------------------------
   Relatório
   -------------------------------------------------------------------------- */

.sumario {
  background: var(--sup-0);
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e6);
}
.sumario h2 { font-size: var(--fs-heading-sm); margin-bottom: var(--e3); }
.sumario ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e2);
  counter-reset: item;
}
@media (min-width: 46rem) {
  .sumario ol { grid-template-columns: 1fr 1fr; column-gap: var(--e5); }
}
.sumario li { counter-increment: item; font-size: var(--fs-body-sm); }
.sumario li::before {
  content: counter(item) '.';
  color: var(--laranja-texto);
  font-weight: var(--peso-bold);
  margin-right: var(--e2);
}
.sumario a { color: var(--txt); text-underline-offset: 3px; }
.sumario a:hover { color: var(--laranja-texto); }

/* A faixa: onde o número cai, em três trechos proporcionais.
   Não é velocímetro: não há agulha, nem escala contínua sugerindo medição.
   É a posição numa régua editorial, que é o que a faixa é. */
.faixa { margin: var(--e5) 0 0; }
.faixa-regua {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sup-3);
}
.faixa-trecho { height: 100%; background: var(--sup-3); }
.faixa-trecho + .faixa-trecho { border-left: 2px solid var(--sup-0); }
.faixa-trecho.ativa { background: var(--laranja); }
.faixa-rotulos {
  display: flex;
  margin: var(--e2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body-sm);
  color: var(--txt-2);
}
.faixa-rotulos li { text-align: center; }
.faixa-rotulos li.ativa { color: var(--txt); font-weight: var(--peso-semi); }

/* As quatro dimensões, com barra maior e a restrição destacada. */
.dimensoes { gap: var(--e5); }
.dimensao-barra { height: 10px; background: var(--sup-3); }
.dimensao-preenchido {
  width: var(--nota, 0%);
  transform-origin: left center;
  animation: cresce 520ms var(--ease) both;
  animation-delay: var(--atraso, 0ms);
}
@keyframes cresce {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.dimensao-etiqueta {
  display: inline-block;
  font-size: var(--fs-kicker);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: var(--peso-bold);
  color: var(--branco);
  background: var(--laranja);
  border-radius: var(--raio-sm);
  padding: 2px var(--e2);
  margin-left: var(--e2);
}

/* Cabeçalho de seção com número, para dar ritmo à leitura. */
.secao-relatorio > h2 {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  border-bottom: 1px solid var(--linha);
  padding-bottom: var(--e2);
}
.secao-numero {
  font-size: var(--fs-body-sm);
  font-weight: var(--peso-bold);
  color: var(--laranja-texto);
  flex: none;
}

/* --------------------------------------------------------------------------
   Impressão
   -------------------------------------------------------------------------- */

@media print {
  .entra,
  .trilho,
  .dimensao-preenchido { animation: none !important; }
  .dimensao-preenchido { transform: none !important; }
  .sumario { display: none; }
  .selos li,
  .cartao { background: none; }
}

/* A abertura precisa de mais largura que a coluna de leitura: o caminho só
   vira quatro trechos lado a lado acima de 52rem, e o envelope padrão nunca
   chegava lá. O texto continua preso a --medida. */
.envelope-largo { max-width: 64rem; }
.envelope-largo .cabeca-interna { max-width: 64rem; }

/* ==========================================================================
   Prévia: o índice com peso
   O número ganha a cor da faixa em que caiu, e a régua mostra onde ele está.
   É a mesma informação, dita duas vezes — nenhuma das duas inventa comparação
   com outras empresas, porque não existe base para isso.
   ========================================================================== */

:root {
  --faixa-fragil: #A3261B;
  --faixa-irregular: #C25F22;
  --faixa-consistente: var(--grafite-2, #2E2E2E);
}

.indice-numero.faixa-fragil { color: var(--faixa-fragil); }
.indice-numero.faixa-irregular { color: var(--faixa-irregular); }
.indice-numero.faixa-consistente { color: var(--faixa-consistente); }
.indice-numero span { color: var(--txt-2); }

/* A régua ganha o marcador de posição. Sem agulha e sem escala contínua: é
   onde o número caiu, não um instrumento de medida. */
.faixa-regua { position: relative; overflow: visible; }
.faixa-trecho.faixa-fragil.ativa { background: var(--faixa-fragil); }
.faixa-trecho.faixa-irregular.ativa { background: var(--faixa-irregular); }
.faixa-trecho.faixa-consistente.ativa { background: var(--faixa-consistente); }

.faixa-marcador {
  position: absolute;
  top: -5px;
  width: 4px;
  height: 20px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--txt);
  box-shadow: 0 0 0 2px var(--sup-0);
  animation: marca 420ms var(--ease) both;
  animation-delay: 220ms;
}

@keyframes marca {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.lacunas-aviso {
  font-size: var(--fs-body-sm);
  color: var(--txt-2);
  background: var(--sup-2);
  border-radius: var(--raio-md);
  padding: var(--e3) var(--e4);
  margin: var(--e4) 0 0;
}

/* --------------------------------------------------------------------------
   O que o relatório mostra
   O que a pessoa ganha ao preencher, item a item. Fica acima do formulário
   porque é a razão de preencher.
   -------------------------------------------------------------------------- */

.chamada-relatorio {
  background: var(--sup-0);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--laranja);
  border-radius: var(--raio-md);
  padding: var(--e4) var(--e5);
  margin: 0 0 var(--e5);
}
.chamada-relatorio h3 { margin: 0 0 var(--e3); font-size: var(--fs-heading-sm); }

.chamada-lista { list-style: none; margin: 0 0 var(--e3); padding: 0; display: grid; gap: var(--e3); }
.chamada-lista li {
  position: relative;
  padding-left: var(--e5);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-corpo);
}
.chamada-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  border: 2px solid var(--laranja);
  border-radius: 50%;
}

.chamada-formato {
  margin: 0;
  padding-top: var(--e3);
  border-top: 1px solid var(--linha);
  font-size: var(--fs-body-sm);
  color: var(--txt-2);
}

@media print {
  .faixa-marcador { animation: none !important; }
}