/* =========================================================================
   app.css — componentes do app. Os TOKENS vêm de ./ui/tokens.css (dono:
   co-fundador de Design). Aqui não nasce nenhum hex, nenhuma duração e
   nenhuma curva: tudo aponta para um token.

   Regra de cor herdada e respeitada literalmente: --c-up / --c-down (verde e
   vermelho) NÃO aparecem neste arquivo. O app não exibe variação de preço em
   lugar nenhum, então as duas palavras reservadas do dado ficam sem uso.
   ========================================================================= */

@import url("./ui/tokens.css");

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

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font: var(--t-w-regular) var(--t-size-body) / var(--t-lh-body) var(--t-ui);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--z-focus-halo) var(--c-focus-halo),
    0 0 0 calc(var(--z-focus-halo) + var(--z-focus-ring)) var(--c-focus);
}

.pular-para {
  position: absolute;
  left: -9999px;
}
.pular-para:focus {
  left: var(--s-4);
  top: var(--s-2);
  z-index: 10;
  background: var(--c-surface);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
}

/* ---------------------------------------------------------------- moldura */

.app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topo {
  height: var(--s-8);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-4);
}

.barra {
  flex: 1;
  height: var(--size-bar);
  border-radius: var(--r-sm);
  background: var(--c-surface-sunk);
  overflow: hidden;
}
.barra > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-sm);
  background: var(--c-brand);
  transition: width var(--m-bar) var(--m-ease-out);
}

.estado {
  min-width: var(--size-target-min);
  height: var(--size-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  font: var(--t-w-bold) var(--t-size-caption) / var(--t-lh-caption) var(--t-ui);
  font-variant-numeric: var(--t-num-tabular);
  color: var(--c-habit-ink);
  background: var(--c-habit-wash);
  border: 2px solid var(--c-habit);
  border-radius: var(--r-full);
  padding: 0 var(--s-3);
}

.palco {
  flex: 1 1 auto;
  padding: 0 var(--s-4) var(--s-5);
  animation: entrar var(--m-drawer) var(--m-ease-out) both;
}
@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(var(--s-2));
  }
}

.rodape {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  padding: var(--s-3) var(--s-4) var(--s-5);
  background: linear-gradient(to bottom, transparent, var(--c-bg) var(--s-3));
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ------------------------------------------------------------ tipografia */

.rotulo-contexto {
  display: inline-block;
  font: var(--t-w-bold) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  letter-spacing: var(--t-ls-label);
  text-transform: uppercase;
  color: var(--c-brand-ink);
  background: var(--c-brand-wash);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-3);
}
.rotulo-contexto.hab {
  color: var(--c-habit-ink);
  background: var(--c-habit-wash);
}

.enunciado {
  font-family: var(--t-display);
  font-variation-settings: var(--t-display-axes);
  font-size: var(--t-size-title);
  line-height: var(--t-lh-title);
  font-weight: var(--t-w-bold);
  letter-spacing: var(--t-ls-title);
  margin: 0 0 var(--s-4);
  color: var(--c-ink);
}
.display {
  font-family: var(--t-display);
  font-variation-settings: var(--t-display-axes);
  font-size: var(--t-size-display);
  line-height: var(--t-lh-display);
  font-weight: var(--t-w-bold);
  letter-spacing: var(--t-ls-display);
  margin: 0 0 var(--s-3);
}
.titulo-bloco {
  font: var(--t-w-bold) var(--t-size-heading) / var(--t-lh-heading) var(--t-ui);
  margin: 0 0 var(--s-2);
}
.corpo {
  margin: 0 0 var(--s-3);
  color: var(--c-ink-2);
}
.legenda {
  font: var(--t-w-medium) var(--t-size-caption) / var(--t-lh-caption) var(--t-ui);
  color: var(--c-ink-3);
  margin: 0;
}
.micro {
  font: var(--t-w-medium) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  color: var(--c-ink-3);
  margin: 0;
}
.num {
  font-variant-numeric: var(--t-num-tabular);
}

/* -------------------------------------------------------- tabela do caso */

.caso-cabeca {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  margin-bottom: var(--s-3);
}
.caso-cabeca .rot {
  font-family: var(--t-display);
  font-variation-settings: var(--t-display-axes);
  font-size: var(--t-size-heading);
  font-weight: var(--t-w-bold);
}

.linhas {
  border: 2px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
  margin: 0 0 var(--s-3);
}
.linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.linha:last-child {
  border-bottom: 0;
}
.linha .rot {
  font: var(--t-w-medium) var(--t-size-caption) / var(--t-lh-caption) var(--t-ui);
  color: var(--c-ink-2);
}
.linha .cd {
  display: block;
  font: var(--t-w-medium) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  color: var(--c-ink-3);
  font-variant-numeric: var(--t-num-tabular);
}
.linha .val {
  font-weight: var(--t-w-bold);
  font-variant-numeric: var(--t-num-tabular);
  white-space: nowrap;
}
.linha.marcada {
  background: var(--c-brand-wash);
}
.linha.marcada .rot,
.linha.marcada .val {
  color: var(--c-brand-ink);
}

.par {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.par .lado {
  border: 2px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--s-4);
}
.par .lado .rot {
  font: var(--t-w-bold) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  letter-spacing: var(--t-ls-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
  display: block;
  margin-bottom: var(--s-1);
}
.par .lado .val {
  font-family: var(--t-display);
  font-variation-settings: var(--t-display-axes);
  font-size: var(--t-size-numeral);
  line-height: var(--t-lh-numeral);
  font-weight: var(--t-w-black);
  font-variant-numeric: var(--t-num-tabular);
}

/* -------------------------------------------------------------- controles */

.btn {
  appearance: none;
  position: relative;
  width: 100%;
  min-height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  border: 0;
  border-bottom: var(--btn-lip) solid transparent;
  border-radius: var(--btn-radius);
  background: transparent;
  font: var(--btn-font);
  letter-spacing: var(--btn-tracking);
  text-transform: var(--btn-case);
  color: var(--c-on-brand);
  cursor: pointer;
  transition: transform var(--m-press-up) var(--m-ease-spring);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--btn-radius);
  background: var(--c-brand);
  box-shadow: 0 var(--btn-lip) 0 var(--c-brand-lip);
  z-index: -1;
  transition: filter var(--m-fast) linear;
}
.btn > span {
  position: relative;
}
.btn:hover::before {
  filter: var(--btn-hover-filter);
}
.btn:active {
  transform: translateY(var(--btn-lip));
  transition-duration: var(--m-press-down);
}
.btn:active::before {
  box-shadow: none;
}
.btn[disabled] {
  cursor: not-allowed;
  transform: translateY(var(--btn-lip));
  color: var(--c-ink-3);
}
.btn[disabled]::before {
  background: var(--c-surface-sunk);
  box-shadow: none;
  filter: none;
}
.btn.secundario {
  color: var(--c-ink-2);
  min-height: var(--size-target-min);
  border-bottom-width: 0;
}
.btn.secundario::before {
  background: transparent;
  box-shadow: none;
  border: 2px solid var(--c-line-strong);
}
.btn.secundario:active {
  transform: none;
}

.opcoes {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
}

.cartao {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--card-min-h);
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border: var(--card-border) solid var(--c-line-strong);
  border-bottom-width: calc(var(--card-border) + var(--card-lip));
  border-radius: var(--card-radius);
  background: var(--c-surface);
  color: var(--c-ink);
  font: var(--t-w-medium) var(--t-size-body) / var(--t-lh-body) var(--t-ui);
  cursor: pointer;
  transition: transform var(--m-press-up) var(--m-ease-spring);
}
.cartao:active {
  transform: translateY(var(--card-lip));
  border-bottom-width: var(--card-border);
  transition-duration: var(--m-press-down);
}
.cartao[aria-pressed="true"] {
  background: var(--c-brand-wash);
  border-color: var(--c-brand-ink);
  color: var(--c-brand-ink);
}
.cartao .tecla {
  flex: 0 0 auto;
  width: var(--s-5);
  height: var(--s-5);
  display: grid;
  place-items: center;
  border: 2px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  font: var(--t-w-bold) var(--t-size-micro) / 1 var(--t-ui);
  color: var(--c-ink-3);
}
.cartao[aria-pressed="true"] .tecla {
  border-color: var(--c-brand-ink);
  color: var(--c-brand-ink);
}
.cartao .val {
  margin-left: auto;
  font-weight: var(--t-w-bold);
  font-variant-numeric: var(--t-num-tabular);
  white-space: nowrap;
}

textarea.tese {
  width: 100%;
  min-height: 96px;
  padding: var(--s-3) var(--s-4);
  border: var(--card-border) solid var(--c-line-strong);
  border-radius: var(--card-radius);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--t-display);
  font-variation-settings: var(--t-display-axes);
  font-size: var(--t-size-heading);
  line-height: var(--t-lh-heading);
  resize: vertical;
}

/* ---------------------------------------------------------------- gavetas */

.gaveta {
  border-radius: var(--drawer-radius);
  padding: var(--drawer-pad);
  margin: var(--s-5) calc(var(--s-4) * -1) 0;
  animation: subir var(--m-drawer) var(--m-ease-out) both;
}
@keyframes subir {
  from {
    transform: translateY(100%);
  }
}
.gaveta.certo {
  background: var(--c-brand-wash);
  border-top: var(--drawer-rule) solid var(--c-brand);
  color: var(--c-ink);
}
.gaveta.rever {
  background: var(--c-review-surface);
  color: var(--c-review-ink);
}
.gaveta.rever .corpo,
.gaveta.rever .legenda,
.gaveta.rever .micro {
  color: var(--c-review-ink);
  opacity: 0.9;
}
.gaveta.rever .destaque {
  color: var(--c-review-accent);
  font-family: var(--t-display);
  font-variation-settings: var(--t-display-axes);
  font-size: var(--t-size-heading);
  line-height: var(--t-lh-heading);
  font-weight: var(--t-w-bold);
}
.gaveta .cabeca {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.selo {
  flex: 0 0 auto;
  width: var(--s-7);
  height: var(--s-7);
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  font-size: var(--t-size-heading);
  animation: selo var(--m-celebrate) var(--m-ease-spring) both;
}
@keyframes selo {
  from {
    transform: scale(0.8);
  }
}
.gaveta.certo .selo {
  background: var(--c-brand);
  color: var(--c-on-brand);
}
.gaveta.rever .selo {
  background: transparent;
  border: 3px solid var(--c-review-accent);
  color: var(--c-review-accent);
}
.gaveta .cabeca h2 {
  margin: 0;
  font: var(--t-w-bold) var(--t-size-heading) / var(--t-lh-heading) var(--t-ui);
}
.gaveta.certo .cabeca h2 {
  color: var(--c-brand-ink);
}
.gaveta.rever .cabeca h2 {
  font-size: var(--t-size-label);
  letter-spacing: var(--t-ls-label);
  text-transform: uppercase;
}

.bloco {
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-3);
  margin-top: var(--s-3);
}
.gaveta.rever .bloco {
  border-color: var(--c-review-line);
}
.bloco > h3 {
  font: var(--t-w-bold) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  letter-spacing: var(--t-ls-label);
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
  opacity: 0.75;
}

/* ------------------------------------------------- siglas e passos abertos */

/* Dois reveladores, uma regra: o botão não parece botão, o alvo tem 44px, e o
   que ele abre já estava na tela — nunca abre tela nova.
   A sigla da CVM é procedência e fica; o que ela QUER DIZER nasce aberto na
   primeira ocorrência e volta com um toque em qualquer outra. */
.cd.sigla,
.passo .abrir {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.cd.sigla {
  display: block;
  width: fit-content;
  max-width: 100%;
  font: var(--t-w-medium) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  color: var(--c-ink-2); /* 7,48:1 — é controle, não é legenda decorativa */
  font-variant-numeric: var(--t-num-tabular);
}
.par .cd.sigla {
  margin-top: var(--s-1);
}
.sigla .sigla-cod {
  font-weight: var(--t-w-bold);
}
.sigla .sigla-nome,
.sigla[aria-expanded="true"] .sigla-mais {
  display: none;
}
.sigla[aria-expanded="true"] .sigla-nome {
  display: inline;
}
.sigla .sigla-mais {
  display: inline-grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  margin-left: var(--s-1);
  vertical-align: -0.15em;
  border: 1px solid currentColor;
  border-radius: var(--r-full);
  font-weight: var(--t-w-bold);
}
.sigla:hover,
.sigla:focus-visible {
  color: var(--c-brand-ink);
}

/* Um passo da autópsia: o rótulo carrega o fato, o corpo entra quando ela pede. */
.passo .abrir {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  width: 100%;
  min-height: var(--size-target-min);
  font: var(--t-w-medium) var(--t-size-caption) / var(--t-lh-caption) var(--t-ui);
  color: inherit;
}
.passo .mais-sinal {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--s-5);
  height: var(--s-5);
  border: 2px solid currentColor;
  border-radius: var(--r-sm);
  font-weight: var(--t-w-bold);
  opacity: 0.6;
}
.passo .mais-sinal::before {
  content: "+";
}
.passo .abrir[aria-expanded="true"] .mais-sinal::before {
  content: "−";
}
.passo .mais {
  display: none;
  padding-top: var(--s-3);
}
.passo .abrir[aria-expanded="true"] + .mais {
  display: block;
}
.passo .mais > :last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------- números */

.placar {
  display: flex;
  gap: var(--s-3);
  margin: var(--s-4) 0;
}
.placar .caixa {
  flex: 1;
  border: 2px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--s-3);
}
.placar .caixa .rot {
  font: var(--t-w-bold) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  letter-spacing: var(--t-ls-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.placar .caixa .val {
  font-family: var(--t-display);
  font-variation-settings: var(--t-display-axes);
  font-size: var(--t-size-numeral);
  line-height: var(--t-lh-numeral);
  font-weight: var(--t-w-black);
  font-variant-numeric: var(--t-num-tabular);
  color: var(--c-brand-ink);
}

.serie {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: var(--t-num-tabular);
  font-size: var(--t-size-caption);
  margin-bottom: var(--s-4);
  display: block;
  overflow-x: auto;
}
.serie th,
.serie td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--c-line);
  text-align: right;
  white-space: nowrap;
}
.serie th:first-child,
.serie td:first-child {
  text-align: left;
}
.serie thead th {
  font-weight: var(--t-w-bold);
  color: var(--c-ink-3);
  text-transform: uppercase;
  font-size: var(--t-size-micro);
  letter-spacing: var(--t-ls-label);
}
.serie tr.foco td {
  background: var(--c-brand-wash);
  color: var(--c-brand-ink);
  font-weight: var(--t-w-bold);
}

.fato {
  border-left: 3px solid var(--c-line-strong);
  padding: 0 0 0 var(--s-3);
  margin: 0 0 var(--s-3);
}
.fato .data {
  font: var(--t-w-bold) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  letter-spacing: var(--t-ls-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
  font-variant-numeric: var(--t-num-tabular);
}

.procedencia {
  border-top: 1px solid var(--c-line);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
}
.procedencia a {
  color: var(--c-brand-ink);
}
.procedencia ul {
  margin: var(--s-1) 0 0;
  padding-left: var(--s-4);
}

/* A TRAVA DO CALENDÁRIO. Painel calmo, e de propósito: ele informa a data em
   que a próxima abre e quanto falta. Não há nada a perder aqui, nenhuma chama
   para apagar — é o oposto exato de "sua ofensiva vai zerar se você não
   praticar amanhã", que é a ameaça vestida de dica do concorrente. */
.espera {
  border-top: 1px solid var(--c-line);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
}
.espera .destaque {
  font: var(--t-w-bold) var(--t-size-heading) / var(--t-lh-heading) var(--t-ui);
  color: var(--c-ink);
  margin: 0 0 var(--s-2);
}
.espera .destaque .num {
  white-space: nowrap;
}

/* Listas de corpo: os defeitos da revelação e as frases seladas do arco. */
.corpo.lista {
  padding-left: var(--s-4);
}
.corpo.lista li {
  margin: 0 0 var(--s-2);
}

.retido {
  border: var(--card-border) dashed var(--c-line-strong);
  border-radius: var(--card-radius);
  padding: var(--s-4);
  background: var(--c-surface-sunk);
}
.retido ul {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-4);
}

/* --------------------------------------------------------- a navegação */

/* O MENU. Ele NÃO existe para quem não tem conta: o app só o monta quando há
   conta aberta neste aparelho (rotas.js, docs/10 §6). Sem ícone, sem ornamento
   — quatro palavras, e nenhuma delas leva a uma tela que julgue ou pontue. */
.nav {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: var(--s-1);
  min-height: var(--s-8);
  padding: var(--s-1) var(--s-2) calc(var(--s-1) + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
}
.nav .item {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--size-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-ink-2);
  font: var(--t-w-medium) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  text-align: center;
  cursor: pointer;
  transition: color var(--m-fast) linear;
}
.nav .item.aqui {
  color: var(--c-brand-ink);
  background: var(--c-brand-wash);
  font-weight: var(--t-w-bold);
}
.nav .ponto {
  flex: 0 0 auto;
  width: var(--s-2);
  height: var(--s-2);
  border-radius: var(--r-full);
  background: var(--c-habit-ink); /* glifo: 6.15:1. O preenchimento âmbar é só ≥24px */
}

/* A conta mora na moldura, ao lado da data, e entra pelo mesmo portão da barra. */
.conta-topo {
  appearance: none;
  flex: 0 0 auto;
  min-width: var(--size-target-min);
  height: var(--size-target-min);
  padding: 0 var(--s-3);
  border: 2px solid var(--c-line-strong);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--c-ink-2);
  font: var(--t-w-bold) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  letter-spacing: var(--t-ls-label);
  text-transform: uppercase;
  cursor: pointer;
}
.conta-topo.aqui {
  color: var(--c-brand-ink);
  border-color: var(--c-brand-ink);
  background: var(--c-brand-wash);
}

/* O rodapé sobe a altura da barra quando ela existe, e some quando não há ação. */
.app.com-nav .rodape {
  bottom: var(--s-8);
}
.rodape:empty {
  display: none;
}
.palco .btn {
  margin-top: var(--s-3);
}

/* O campo de e-mail — o único campo de dado pessoal do produto, e não há
   nenhum de senha em lugar nenhum. */
input.campo {
  display: block;
  width: 100%;
  min-height: var(--size-target-cta);
  margin: var(--s-2) 0;
  padding: var(--s-3) var(--s-4);
  border: var(--card-border) solid var(--c-line-strong);
  border-radius: var(--card-radius);
  background: var(--c-surface);
  color: var(--c-ink);
  font: var(--t-w-medium) var(--t-size-body) / var(--t-lh-body) var(--t-ui);
}

/* O recado do formulário. Sem vermelho: erro de digitação não é prejuízo, e a
   regra de cor do Design vale aqui igual (docs/12 §2.3). */
.recado {
  color: var(--c-ink);
  border-left: 3px solid var(--c-line-strong);
  padding-left: var(--s-3);
  margin: 0 0 var(--s-3);
}
.recado:empty {
  display: none;
}

@media (min-width: 720px) {
  .par {
    grid-template-columns: 1fr 1fr;
  }
  .nav .item {
    font-size: var(--t-size-caption);
    line-height: var(--t-lh-caption);
  }
}


/* =========================================================================
   A PRIMEIRA SESSÃO (docs/10 §6). Nada aqui é decoração: a linha de contexto
   e a fonte respondem, na moldura, as duas primeiras perguntas de quem chegou
   de anúncio, e o explicador é o link que quem não quer não paga.
   ========================================================================= */

.contexto {
  margin-top: var(--s-1);
  color: var(--c-ink-2);
}

.fonte {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-2);
}

/* O explicador: link, nunca tela. Fechado ele é uma linha; aberto, dois
   parágrafos. Quem não toca não vê nada e não paga nada por ele. */
.explicador {
  margin-top: var(--s-2);
}

.abre-explicador {
  appearance: none;
  padding: 0;
  font: var(--t-w-medium) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  color: var(--c-review-accent);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}

.abre-explicador:hover {
  color: var(--c-ink);
}

.explicador .mais {
  display: none;
  margin-top: var(--s-2);
  padding-left: var(--s-2);
  border-left: 2px solid var(--c-line-strong);
}

.abre-explicador[aria-expanded="true"] + .mais {
  display: block;
}

.explicador .mais > :last-child {
  margin-bottom: 0;
}

/* Uma batida da autópsia. Cada uma revela um número novo — a borda à esquerda
   marca que ela ENTROU agora, e não que ela é um aviso. */
.batida {
  border-left: 3px solid var(--c-review-accent);
}

.batida .linhas {
  margin-top: var(--s-2);
}

.linha.revelada .rot,
.linha.revelada .val {
  color: var(--c-ink);
}

/* Os dois botões do compartilhar, lado a lado quando cabem. */
.linha-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.linha-botoes .btn {
  flex: 1 1 12rem;
  text-decoration: none;
}

/* A volta do menu para o caso do dia (trava (c) de docs/10 §6). */
.volta {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}


/* O CONVITE PERSISTENTE — o outro estado do rodapé, para quem não tem conta.
   Linha de status que por acaso é clicável: ela nunca cobre conteúdo (mora no
   fluxo, depois dele), não é modal e não é dispensável. O tom não sobe nunca —
   o que muda com o tempo é a quantidade de coisa verdadeira a dizer. */
.nav .convite {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2);
  font: var(--t-w-medium) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  color: var(--c-ink-2);
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.nav .convite:hover {
  background: var(--c-surface-sunk);
  color: var(--c-ink);
}

.nav .convite-acao {
  flex: 0 0 auto;
  font: var(--t-w-bold) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  color: var(--c-review-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* Só para leitor de tela: o anúncio do avanço não ocupa lugar nenhum. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* O foco movido pelo avanço não desenha anel em elemento que não é controle —
   ele existe para levar o leitor de tela, não para pintar borda. */
.palco h1:focus-visible,
.palco h2:focus-visible,
.palco [data-novo]:focus-visible {
  outline: 2px solid var(--c-review-accent);
  outline-offset: 4px;
}

.palco h1:focus,
.palco h2:focus,
.palco [data-novo]:focus {
  outline: none;
}


/* =========================================================================
   A MARCA DO AVANÇO — orientação, nunca recompensa.

   Ela aponta o que mudou desde a tela anterior e SOME depois de cumprir o
   trabalho: orientação que fica vira decoração. Nenhuma cor de direção, nenhum
   verde de "melhorou" e nenhum vermelho de "piorou" — pintar direção seria o
   app tendo opinião sobre a empresa, que é fronteira da CVM antes de ser
   estética. Sem som, sem escala, sem partícula.
   ========================================================================= */

.linha.mudou {
  animation: marca-do-avanco 7s var(--m-ease-out) forwards;
}

.linha .antes {
  display: inline-block;
  margin-right: var(--s-1);
  font: var(--t-w-medium) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  color: var(--c-ink-3);
  text-decoration: line-through;
  animation: valor-antigo 7s var(--m-ease-out) forwards;
}

@keyframes marca-do-avanco {
  0%,
  70% {
    box-shadow: inset 3px 0 0 var(--c-review-accent);
  }
  100% {
    box-shadow: inset 3px 0 0 transparent;
  }
}

/* O valor antigo é informação, então ele fica mais tempo e some por último. */
@keyframes valor-antigo {
  0%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Com movimento reduzido a marca é ESTÁTICA pelo mesmo tempo — nunca uma
   animação mais rápida, que é o erro comum: quem pediu menos movimento não
   pediu o mesmo movimento apressado. */
@media (prefers-reduced-motion: reduce) {
  .linha.mudou,
  .linha .antes {
    animation-timing-function: step-end;
  }
}


/* A marca entre casos avulsos: mesmo teste ou outro. Mesma família da marca do
   arco — sem direção, sem juízo, e some depois de cumprir o trabalho. Os dois
   estados têm exatamente o mesmo peso visual: "o mesmo" não é pior nem melhor
   que "outro", e é justamente "o mesmo" que ensina a taxa base. */
.marca-teste {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 0 var(--s-1);
  font: var(--t-w-bold) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  color: var(--c-ink-2);
  background: var(--c-surface-sunk);
  border-radius: var(--r-sm);
  animation: valor-antigo 7s var(--m-ease-out) forwards;
}


/* =========================================================================
   OS TRÊS BOTÕES DE JULGAMENTO — o destaque é do GRUPO, nunca de um deles.

   Se `COMPRARIA` pesasse mais que `NÃO DÁ PARA SABER COM ISSO`, a tela estaria
   sugerindo resposta — e isso é fronteira da CVM antes de ser design. Os três
   são idênticos em altura, largura, fonte, peso, cor, borda, raio e contraste.
   Não existe `primary` aqui, e não pode existir.
   ========================================================================= */

/* ALTURA IGUAL, DITADA PELO MAIS ALTO. `grid-auto-rows: 1fr` iguala as três
   linhas pela maior: se um rótulo quebrar em duas linhas a 320 px, os três
   crescem juntos, e nenhum fica visualmente menor que os outros. */
.opcoes.decisao {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--s-2);
}

/* A três palavras que sobraram acima dos botões. O resto migrou para a
   autópsia, onde é merecido — na tela do caso, disputava a dobra. */
.legenda.apoio {
  margin-bottom: var(--s-2);
}

/* A procedência em uma linha, com o identificador inteiro a um toque. Ela
   continua antes de responder; só deixou de disputar a dobra. */
.procedencia-curta {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-line);
}

.abrir-procedencia {
  appearance: none;
  width: 100%;
  padding: 0;
  font: var(--t-w-medium) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  color: var(--c-ink-2);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.abrir-procedencia::after {
  content: " ?";
  font: var(--t-w-bold) var(--t-size-micro) / var(--t-lh-micro) var(--t-ui);
  color: var(--c-review-accent);
}

.abrir-procedencia[aria-expanded="true"]::after {
  content: " ×";
}

.procedencia-curta .mais {
  display: none;
  margin-top: var(--s-2);
}

.abrir-procedencia[aria-expanded="true"] + .mais {
  display: block;
}

/* O foco é IGUAL nos três: mesma espessura, mesma cor, mesmo deslocamento. */
.opcoes.decisao .cartao:focus-visible {
  outline: 3px solid var(--c-brand-ink);
  outline-offset: 3px;
}


/* =========================================================================
   A DOBRA A 320 px — o aparelho pequeno da base instalada brasileira.

   O alvo é `100svh` (a única unidade que descreve a dobra que EXISTE, já
   descontada a barra do navegador) num 320×568. O que se aperta aqui é
   respiro; o que NÃO se aperta é o alvo de toque, que continua acima do piso
   de 48 px, nem a ordem, nem a igualdade entre os três botões.
   ========================================================================= */
@media (max-width: 360px) {
  /* o cabeçalho cede altura: ele é moldura, não conteúdo */
  .topo {
    min-height: auto;
    padding-top: var(--s-1);
    padding-bottom: var(--s-1);
  }

  /* a pergunta desce um degrau da escala do Design (título -> heading) e perde
     entrelinha. Ela continua sendo a maior coisa da tela, que é o que importa. */
  .enunciado {
    font-size: var(--t-size-heading);
    line-height: var(--t-lh-body);
  }

  .rotulo-contexto {
    margin-bottom: var(--s-1);
  }

  /* a linha de contexto continua inteira; só perde entrelinha */
  .legenda.contexto {
    line-height: var(--t-lh-micro);
  }

  /* as linhas da tabela cedem respiro vertical, nunca o número nem a sigla */
  .linha {
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
  }

  /* os botões cedem respiro, e continuam acima do piso de toque de 48 px:
     o que muda é o preenchimento, não o alvo */
  .opcoes.decisao .cartao {
    min-height: var(--size-target-min);
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
  }

  .opcoes.decisao {
    gap: var(--s-2);
  }
}