/* =========================================================================
   ConsultorIA — O Parecer
   A superfície da landing herda o mundo do produto (DESIGN.md, "O Número
   Aceso"): chão quase preto, vidro com espessura real, um acento azure, e
   verde/âmbar/vermelho reservados à faixa de saúde. O que muda aqui é a
   densidade: o dashboard é terminal de mercado, esta página é documento.
   ========================================================================= */

/* ---------- Faces ---------- */

@font-face {
  font-family: 'Zodiak';
  src: url('fonts/zodiak-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zodiak';
  src: url('fonts/zodiak-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: dark;

  --chao: #06070A;
  --superficie: #101319;
  --vidro: rgba(255, 255, 255, 0.045);
  --vidro-alto: rgba(255, 255, 255, 0.07);
  --vidro-flutuante: rgba(255, 255, 255, 0.11);
  --aresta: rgba(255, 255, 255, 0.09);
  --aresta-forte: rgba(255, 255, 255, 0.14);

  --azure: #6AA6FF;
  --azure-claro: #93C0FF;
  --azure-fundo: #3D7AD6;

  --bom: #3ECF8E;
  --atencao: #E9A33C;
  --critico: #FF8074;

  --tinta: #EEF2F7;
  --tinta-2: #9AA6B4;
  --tinta-3: #828F9D;
  --serie: #9DB4CC;
  --regua: rgba(255, 255, 255, 0.07);
  --regua-forte: rgba(255, 255, 255, 0.13);

  --documento: 'Zodiak', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sistema: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --entrada: cubic-bezier(0.22, 1, 0.36, 1);
  --estado: cubic-bezier(0.4, 0, 0.2, 1);

  --margem: clamp(20px, 5vw, 64px);
  --coluna: 1180px;
}

/* ---------- Base ---------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--chao);
  color: var(--tinta);
  font-family: var(--sistema);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--azure);
  text-decoration: none;
}

::selection {
  background: rgba(106, 166, 255, 0.28);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Todo valor monetário e toda medida herdam numeral tabular. */
.n {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv05' 1;
  letter-spacing: -0.02em;
}

/* ---------- O fundo que o vidro refrata ---------- */

.aurora,
.grao {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* A AURORA DA LANDING É MAIS FRACA QUE A DO PRODUTO, DE PROPÓSITO.
   O dashboard usa 0,30 / 0,17 / 0,20 e pode: lá o campo mais claro fica sob
   número grande e cartão. Aqui a página é documento — texto de apoio pequeno
   cobre toda a superfície, inclusive o auge do campo azul. Medido com 0,30: o
   texto secundário caía a 3,9:1 sobre vidro, abaixo dos 4,5:1 que o PRODUCT.md
   exige. Com 0,20 / 0,12 / 0,14 o mesmo texto mede 4,7:1 e a cor continua
   visível. */
.aurora {
  background-color: var(--chao);
  background-image:
    radial-gradient(1200px 720px at 8% -6%, rgba(60, 104, 200, 0.20), transparent 62%),
    radial-gradient(1000px 640px at 96% 8%, rgba(26, 110, 118, 0.12), transparent 60%),
    radial-gradient(1100px 700px at 60% 108%, rgba(132, 66, 104, 0.14), transparent 62%);
}

.grao {
  opacity: 0.32;
  background-image: url('img/grao.png');
  background-repeat: repeat;
  background-size: 64px 64px;
  mix-blend-mode: soft-light;
}

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

.folha {
  position: relative;
  z-index: 1;
}

.faixa {
  width: min(100% - var(--margem) * 2, var(--coluna));
  margin-inline: auto;
}

.faixa--larga {
  width: min(100% - var(--margem) * 2, 1420px);
  margin-inline: auto;
}

section {
  position: relative;
  padding-block: clamp(72px, 11vh, 132px);
}

/* ---------- Timbre (a barra do documento) ---------- */

.timbre {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(6, 7, 10, 0.72);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--estado), background-color 240ms var(--estado);
}

.timbre[data-rolado='sim'] {
  border-bottom-color: var(--regua);
  background: rgba(6, 7, 10, 0.86);
}

.timbre__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 62px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tinta);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.015em;
}

/* O logo é um link — leva ao sumário — e sob o dedo ele media 24px, a altura
   do próprio selo. Um alvo de 24px num aparelho é o que faz a pessoa errar o
   toque e acertar o que estiver embaixo. `.timbre__interno` tem 62px de altura
   fixa, então 44px cabem sem mexer na barra: o que cresce é a área clicável,
   não o desenho. */
@media (pointer: coarse) {
  .marca {
    min-height: 44px;
  }
}

.marca__selo {
  flex: none;
}

.marca__nome b {
  font-weight: 600;
}

.marca__nome i {
  font-style: normal;
  color: var(--azure);
  font-weight: 600;
}

.timbre__acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Ações ---------- */

/* A ação primária é o acento sólido — não vira vidro, porque o vidro é das
   superfícies. Mas ela ganha a espessura do mundo: filete especular na quina de
   cima, escurecimento na de baixo. É a mesma física do resto da página. */
.acao {
  --fundo: var(--azure);
  --frente: #04070D;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 10px 24px -14px rgba(61, 122, 214, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding-inline: 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--fundo);
  color: var(--frente);
  font-family: var(--sistema);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 200ms var(--estado), transform 120ms var(--estado);
}

.acao:hover {
  --fundo: var(--azure-claro);
}

.acao:active {
  transform: scale(0.985);
}

.acao--vazada {
  --fundo: transparent;
  --frente: var(--azure);
  border-color: rgba(106, 166, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.acao--quieta {
  box-shadow: none;
}

.acao--vazada:hover {
  --fundo: rgba(106, 166, 255, 0.1);
  --frente: var(--azure-claro);
  border-color: rgba(106, 166, 255, 0.5);
}

.acao--quieta {
  --fundo: transparent;
  --frente: var(--tinta-2);
}

.acao--quieta:hover {
  --fundo: rgba(255, 255, 255, 0.05);
  --frente: var(--tinta);
}

.acao--grande {
  height: 52px;
  padding-inline: 28px;
  font-size: 15px;
}

@media (pointer: coarse) {
  .acao {
    min-height: 44px;
  }
}

/* O TIMBRE NO CELULAR.
   Medido: marca + "Entrar" + "Emitir meu parecer" lado a lado pedem 396px de
   largura mínima. Num aparelho de 390px o Chrome não corta nem rola — ele
   ALARGA o viewport de layout (medi 417px), e a página inteira renderiza
   menor para caber a barra. O conserto é a barra caber, não o resto encolher. */
.acao__curto {
  display: none;
}

@media (max-width: 620px) {
  .timbre .acao--quieta {
    display: none;
  }
  .timbre .acao {
    padding-inline: 16px;
  }
  .acao__longo {
    display: none;
  }
  .acao__curto {
    display: inline;
  }
}

/* ---------- Vidro ---------- */

.vidro {
  position: relative;
  background: var(--vidro);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--aresta);
  border-radius: 16px;
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.34),
    0 16px 40px -20px rgba(0, 0, 0, 0.72);
}

/* O filete especular: a quina de cima acende porque a luz vem de cima. */
.vidro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.42) 28%,
    rgba(255, 255, 255, 0.42) 72%,
    transparent
  );
}

.vidro--alto {
  background: var(--vidro-alto);
}

/* O reflexo que segue o ponteiro. Some no toque: travado no último ponto
   tocado, ele parece defeito. */
.reflexo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 260ms var(--estado);
  background: radial-gradient(
    460px circle at var(--px, 50%) var(--py, 0%),
    rgba(255, 255, 255, 0.07),
    transparent 45%
  );
}

.reflexo:hover::after {
  opacity: 1;
}

@media (pointer: coarse) {
  .reflexo::after {
    display: none;
  }
}

/* O poço: a superfície de dado, escavada. Inverso exato do vidro. */
.poco {
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.055);
}

/* ---------- Tipografia do documento ---------- */

.titulo {
  font-family: var(--documento);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

.titulo--capa {
  font-size: clamp(2.5rem, 5.4vw, 4.65rem);
}

.titulo--secao {
  font-size: clamp(2rem, 3.6vw, 3.05rem);
  line-height: 1.1;
}

.titulo--peca {
  font-size: clamp(1.4rem, 2.1vw, 1.75rem);
  line-height: 1.2;
}

.prosa {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinta-2);
  max-width: 65ch;
  margin: 0;
}

.prosa--larga {
  max-width: 70ch;
}

.prosa b {
  color: var(--tinta);
  font-weight: 550;
}

.nota {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--tinta-3);
  max-width: 75ch;
  margin: 0;
}

.medida {
  font-family: var(--sistema);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0;
}

/* ---------- Cabeçalho de seção ---------- */

.cabeca {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 26px;
  align-items: start;
  margin-bottom: 44px;
}

.cabeca__num {
  font-family: var(--sistema);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  color: var(--azure);
  padding-top: 0.6em;
  white-space: nowrap;
}

.cabeca__corpo > * + * {
  margin-top: 18px;
}

@media (max-width: 640px) {
  .cabeca {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .cabeca__num {
    padding-top: 0;
  }
}

/* ---------- Régua ---------- */

/* Quebra que só existe onde há largura para ela: com `<br>` fixo, o balanço de
   linha deixava "Trinta e" órfão no celular. */
.quebra {
  display: inline;
}

@media (min-width: 900px) {
  .quebra {
    display: block;
    height: 0;
    overflow: hidden;
  }
}

.regua {
  border: 0;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, var(--regua-forte), var(--regua) 55%, transparent);
}

/* =========================================================================
   CAPA — a emissão do parecer
   ========================================================================= */

.capa {
  padding-top: clamp(52px, 8vh, 92px);
  padding-bottom: clamp(56px, 9vh, 104px);
}

.capa__grade {
  width: min(100% - var(--margem) * 2, 1360px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(36px, 4.4vw, 72px);
  align-items: center;
}

@media (max-width: 1020px) {
  .capa__grade {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

.capa__emissao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--regua);
}

/* Sem largura para os três itens numa linha, o separador ficava órfão no fim da
   primeira: "PARECER FINANCEIRO • EMISSÃO IMEDIATA •" e a quebra. Empilhado, o
   ponto não sobra em lugar nenhum. */
@media (max-width: 620px) {
  .capa__emissao {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .capa__emissao .ponto {
    display: none;
  }
}

.capa__emissao .medida {
  color: var(--tinta-3);
}

.ponto {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--tinta-3);
  flex: none;
}

.capa__titulo em {
  font-style: italic;
  color: var(--azure-claro);
}

.capa__sub {
  margin-top: 26px;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--tinta-2);
  max-width: 46ch;
}

.capa__sub b {
  color: var(--tinta);
  font-weight: 550;
}

.capa__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}

.capa__selo {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
}

.capa__selo span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  color: var(--tinta-3);
}

/* ---------- O instrumento da capa: o Índice de Saúde ---------- */

.instrumento {
  padding: 30px;
  overflow: hidden;
}

.instrumento__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.instrumento__nota {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 6px;
}

.nota-saude {
  font-family: var(--sistema);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: clamp(4.4rem, 9vw, 6rem);
  font-weight: 620;
  line-height: 0.88;
  letter-spacing: -0.035em;
  color: var(--tinta);
}

.nota-saude__de {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--tinta-3);
  letter-spacing: -0.01em;
}

.faixa-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding-inline: 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.faixa-chip--atencao {
  background: rgba(233, 163, 60, 0.14);
  color: var(--atencao);
}

.faixa-chip--bom {
  background: rgba(62, 207, 142, 0.14);
  color: var(--bom);
}

.faixa-chip--critico {
  background: rgba(255, 128, 116, 0.14);
  color: var(--critico);
}

/* A barra da faixa: onde a nota cai dentro das três zonas. */
.escala {
  margin-top: 26px;
}

.escala__trilho {
  position: relative;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}

.escala__zona {
  height: 100%;
}

.escala__zona--critico {
  flex: 0 0 40%;
  background: rgba(255, 128, 116, 0.34);
}

.escala__zona--atencao {
  flex: 0 0 30%;
  background: rgba(233, 163, 60, 0.34);
}

.escala__zona--bom {
  flex: 0 0 30%;
  background: rgba(62, 207, 142, 0.34);
}

.escala__marca {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  background: var(--tinta);
  border-radius: 2px;
  box-shadow: 0 0 0 3px rgba(6, 7, 10, 0.9), 0 0 14px rgba(238, 242, 247, 0.5);
  transform: translateX(-1px);
}

.escala__rotulos {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
}

.escala__rotulos span {
  font-size: 0.6875rem;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

/* A varredura dos sinais */
.sinais {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--regua);
}

.sinais__contagem {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 14px;
}

.sinais__contagem span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

.bolinha {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.bolinha--bom {
  background: var(--bom);
}

/* Anel: a faixa de atenção é reconhecível pela forma antes da cor. */
.bolinha--atencao {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--atencao);
}

/* Losango: forma angulosa para o crítico. */
.bolinha--critico {
  background: var(--critico);
  border-radius: 1px;
  transform: rotate(45deg);
  width: 6px;
  height: 6px;
}

/* Contorno esmaecido: ausência não tem preenchimento porque não há medida. */
.bolinha--ausente {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--tinta-3);
}

.tiras {
  display: grid;
  grid-template-columns: repeat(39, minmax(0, 1fr));
  gap: 2px;
  height: 34px;
}

.tira {
  border-radius: 2px;
  background: var(--tinta-3);
  opacity: 0.28;
  align-self: stretch;
}

.tira[data-faixa='bom'] { background: var(--bom); opacity: 0.85; }
.tira[data-faixa='atencao'] { background: var(--atencao); opacity: 0.85; }
.tira[data-faixa='critico'] { background: var(--critico); opacity: 0.9; }
.tira[data-faixa='ausente'] { background: var(--tinta-3); opacity: 0.3; }

/* =========================================================================
   O momento autoral: a emissão. Acontece uma vez, na montagem.
   Fora dela a página fica parada — é o que faz o produto parecer instrumento
   e não papel de parede.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .emite {
    opacity: 0;
    animation: entra 620ms var(--entrada) forwards;
    animation-delay: var(--atraso, 0ms);
  }

  .instrumento {
    animation: acende 900ms var(--entrada) forwards;
  }

  .tira {
    transform: scaleY(0.12);
    transform-origin: bottom;
    animation: sobe 380ms var(--entrada) forwards;
    animation-delay: calc(420ms + var(--i, 0) * 13ms);
  }

  .escala__marca {
    opacity: 0;
    animation: entra 500ms var(--entrada) 760ms forwards;
  }
}

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

@keyframes acende {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px) scale(0.985);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes sobe {
  to { transform: scaleY(1); }
}

/* =========================================================================
   SUMÁRIO — a numeração existe porque o leitor navega por ela
   ========================================================================= */

.sumario {
  padding-block: 0;
  margin-block: clamp(8px, 2vh, 24px) clamp(24px, 5vh, 56px);
}

.sumario__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--regua);
}

.sumario__item {
  border-bottom: 1px solid var(--regua);
}

.sumario__link {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 15px 4px;
  color: var(--tinta-2);
  transition: color 200ms var(--estado), background-color 200ms var(--estado);
}

.sumario__link:hover {
  color: var(--tinta);
  background: rgba(255, 255, 255, 0.022);
}

.sumario__num {
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  color: var(--azure);
}

.sumario__titulo {
  font-family: var(--documento);
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--tinta);
}

.sumario__resumo {
  font-size: 0.8125rem;
  color: var(--tinta-3);
  text-align: right;
}

@media (max-width: 760px) {
  .sumario__link {
    grid-template-columns: 44px 1fr;
    gap: 12px;
  }
  .sumario__resumo {
    display: none;
  }
}

@media (pointer: coarse) {
  .sumario__link {
    min-height: 48px;
  }
}

/* =========================================================================
   §01 — as duas leituras
   ========================================================================= */

.duplo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 900px) {
  .duplo {
    grid-template-columns: 1fr;
  }
}

.leitura {
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.leitura__pergunta {
  font-family: var(--documento);
  font-size: 1.25rem;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--tinta);
  margin: 0;
}

.leitura__valor {
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--tinta);
}

.leitura__valor small {
  font-size: 0.42em;
  font-weight: 500;
  color: var(--tinta-3);
  letter-spacing: -0.01em;
  margin-right: 0.28em;
}

.leitura__nota {
  font-size: 0.875rem;
  color: var(--tinta-2);
  line-height: 1.55;
  margin: 0;
}

.diferenca {
  margin-top: 20px;
  padding: 22px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.diferenca__texto {
  font-size: 0.9375rem;
  color: var(--tinta-2);
  max-width: 58ch;
  margin: 0;
}

.diferenca__texto b {
  color: var(--tinta);
  font-weight: 550;
}

.diferenca__valor {
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--tinta);
  white-space: nowrap;
}

/* =========================================================================
   §02 — o instrumento: a matriz dos 39 sinais
   ========================================================================= */

.matriz {
  border-top: 1px solid var(--regua);
}

.matriz__grupo + .matriz__grupo {
  margin-top: 4px;
}

.matriz__titulo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 20px 4px 12px;
}

.matriz__titulo h3 {
  font-family: var(--documento);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--tinta);
  margin: 0;
}

.matriz__titulo span {
  font-size: 0.6875rem;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.matriz__linhas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 0 36px;
  border-top: 1px solid var(--regua);
}

.sinal {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--regua);
}

.sinal__motivo {
  grid-column: 2 / -1;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--tinta-3);
  margin: 0;
}

.sinal__nome {
  font-size: 0.875rem;
  color: var(--tinta-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Abaixo de 900px não há largura para reticências honestas: o nome quebra em
   duas linhas em vez de sumir. "PMRV — Prazo Médio de Recebimen…" não é o nome
   de indicador nenhum. */
@media (max-width: 900px) {
  .sinal {
    align-items: start;
  }
  .sinal__nome {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.35;
  }
  .sinal__valor {
    padding-top: 1px;
  }
}

.sinal__valor {
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: -0.015em;
  color: var(--tinta);
  white-space: nowrap;
}

.sinal__valor[data-faixa='bom'] { color: var(--bom); }
.sinal__valor[data-faixa='atencao'] { color: var(--atencao); }
.sinal__valor[data-faixa='critico'] { color: var(--critico); }

.sinal__valor[data-faixa='ausente'] {
  color: var(--tinta-2);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
}

/* =========================================================================
   §03 — a regra da ausência (a peça interativa)
   ========================================================================= */

.ausencia {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (max-width: 1020px) {
  .ausencia {
    grid-template-columns: 1fr;
  }
}

.bancada {
  padding: 0;
  overflow: hidden;
  align-self: start;
}

.bancada__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--regua);
}

.bancada__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
}

@media (max-width: 620px) {
  .bancada__corpo {
    grid-template-columns: 1fr;
  }
}

.bancada__lado {
  padding: 18px 22px 20px;
}

.bancada__lado + .bancada__lado {
  border-left: 1px solid var(--regua);
}

@media (max-width: 620px) {
  .bancada__lado + .bancada__lado {
    border-left: 0;
    border-top: 1px solid var(--regua);
  }
}

.bancada__rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.campo__nome {
  font-size: 0.75rem;
  color: var(--tinta-3);
  letter-spacing: 0.02em;
}

.campo__entrada {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.055);
  color: var(--tinta);
  font-family: var(--sistema);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: -0.015em;
  transition: border-color 200ms var(--estado), box-shadow 200ms var(--estado);
}

/* Os quatro campos da bancada mediam 42px — dois a menos que o mínimo, e são
   campos de digitar número num aparelho, que é o pior lugar para errar o
   toque. `min-height` ganha de `height` na cascata (a altura usada é o maior
   dos dois), então basta a linha. */
@media (pointer: coarse) {
  .campo__entrada {
    min-height: 44px;
  }
}

.campo__entrada::placeholder {
  color: var(--tinta-3);
  font-weight: 400;
}

.campo__entrada:hover {
  border-color: rgba(106, 166, 255, 0.24);
}

.campo__entrada:focus {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
  border-color: rgba(106, 166, 255, 0.4);
}

.campo__entrada[data-vazio='sim'] {
  border-color: rgba(233, 163, 60, 0.34);
}

.saida {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--regua);
}

.saida:last-of-type {
  border-bottom: 0;
}

.saida__nome {
  font-size: 0.75rem;
  color: var(--tinta-3);
}

.saida__valor {
  font-variant-numeric: tabular-nums;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.2;
  color: var(--tinta);
  transition: color 220ms var(--estado);
}

.saida__valor[data-ausente='sim'] {
  color: var(--tinta-2);
  font-weight: 500;
}

.saida__motivo {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--atencao);
  margin: 2px 0 0;
  min-height: 1.45em;
}

.saida__motivo:empty {
  min-height: 0;
}

.contraste {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255, 128, 116, 0.07);
  border: 1px solid rgba(255, 128, 116, 0.2);
}

.contraste__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.contraste__linha span {
  font-size: 0.75rem;
  color: var(--tinta-2);
}

.contraste__valor {
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--critico);
}

.contraste p {
  margin: 8px 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--tinta-3);
}

.argumento > * + * {
  margin-top: 20px;
}

/* A prova: o mesmo princípio, fotografado dentro do produto. */
/* `min-width: 0` nos dois: item de grid tem `min-width: auto`, que é o
   min-content do filho — e o filho aqui é uma imagem que se recusa a encolher
   abaixo de 720px. Sem isto o `overflow-x` não contém nada e o Chrome alarga o
   viewport de layout do celular (medido: 822px). */
.prova {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: clamp(26px, 3vh, 40px);
}

.prova__moldura {
  border-radius: 14px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--aresta);
  background: var(--superficie);
  box-shadow: 0 30px 80px -44px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(0, 0, 0, 0.4);
  -webkit-overflow-scrolling: touch;
}

.prova__moldura img {
  width: 100%;
  height: auto;
  /* Abaixo de ~800px a imagem inteira cabe na largura mas não na leitura: a
     350px úteis ela renderiza com 87px de altura e as duas linhas que importam
     — o -R$ 0,00 e o travessão — somem. Aqui ela para de encolher e a moldura
     rola no eixo x, que é o gesto natural para tabela. */
  min-width: 720px;
}

.prova__arraste {
  display: none;
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--tinta-3);
}

@media (max-width: 800px) {
  .prova__arraste {
    display: block;
  }
}

.prova__legenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px 36px;
  margin-top: 16px;
}

.prova__legenda p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--tinta-3);
}

.prova__legenda b {
  color: var(--tinta-2);
  font-weight: 550;
}

.prova__legenda code {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  font-weight: 550;
}

.argumento .titulo--secao {
  margin-bottom: 4px;
}

/* =========================================================================
   §04 — anexo: as telas
   ========================================================================= */

.prancha {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--aresta);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(0, 0, 0, 0.4);
}

.prancha img {
  width: 100%;
  height: auto;
  display: block;
}

.anexo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.anexo__principal {
  position: relative;
}

.anexo__fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

/* As telas que não viraram prancha continuam nomeadas: a seção diz "dez telas" e
   precisa poder listar as dez. */
.anexo__restantes {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--regua);
}

.anexo__restantes ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 10px 32px;
}

.anexo__restantes li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tinta-3);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--regua);
}

.anexo__restantes li b {
  color: var(--tinta-2);
  font-weight: 550;
  white-space: nowrap;
}

.anexo__peca figcaption {
  margin-top: 12px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--tinta-3);
}

.anexo__peca figcaption b {
  display: block;
  margin-bottom: 2px;
}

.anexo__peca figcaption b {
  color: var(--tinta);
  font-weight: 550;
}

.anexo__peca figcaption span {
  font-size: 0.6875rem;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.anexo__peca {
  margin: 0;
}

/* =========================================================================
   §05 — o ciclo, ancorado na própria série

   Três cartões de rótulo + título + parágrafo eram exatamente "as três colunas
   de benefício" que a tese desta página recusa em voz alta. Aqui os marcos são
   anotações penduradas no eixo do gráfico: larguras desiguais, um nó por marco,
   e o terceiro caindo sobre a barra em que o plano gratuito para de guardar —
   a geometria carrega a informação em vez de ilustrá-la.
   ========================================================================= */

.linha-tempo {
  padding: 26px 28px 28px;
}

.linha-tempo__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 28px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.linha-tempo__nota {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--tinta-3);
  max-width: 52ch;
}

.linha-tempo__barras {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 118px;
  margin-top: 30px;
}

.serie-anos__barra {
  flex: 1;
  min-width: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(106, 166, 255, 0.55), rgba(106, 166, 255, 0.14));
  border-top: 2px solid var(--azure);
}

/* A barra em que o plano gratuito começa a guardar recebe a marca. Esta é a
   única afirmação geométrica da peça, e ela é verdadeira: as três barras a
   partir daqui são as sólidas. */
.serie-anos__barra[data-corte='sim'] {
  position: relative;
}

.serie-anos__barra[data-corte='sim']::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -26px;
  bottom: -22px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--regua-forte) 18%, var(--regua-forte) 82%, transparent);
}

.serie-anos__barra[data-corte='sim']::after {
  content: 'o gratuito guarda daqui';
  position: absolute;
  left: 4px;
  top: -24px;
  font-size: 0.625rem;
  letter-spacing: 0.03em;
  color: var(--tinta-3);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .serie-anos__barra[data-corte='sim']::after {
    content: 'gratuito';
  }
}

.serie-anos__barra[data-limite='sim'] {
  background: repeating-linear-gradient(
    -45deg,
    rgba(154, 166, 180, 0.16),
    rgba(154, 166, 180, 0.16) 3px,
    transparent 3px,
    transparent 6px
  );
  border-top: 2px solid rgba(154, 166, 180, 0.4);
}

.linha-tempo__eixo {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--regua-forte);
}

.linha-tempo__eixo span {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 0.625rem;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

/* Os marcos: larguras desiguais de propósito. Três medidas iguais leem como
   cartão; medidas diferentes leem como anotação. */
.marcos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr);
  gap: 0 30px;
}

.marco {
  position: relative;
  padding-top: 28px;
}

/* O NÓ NÃO TOCA MAIS A RÉGUA DO EIXO.
   Pendurado nela, ele afirmava "este marco acontece neste mês" — e o terceiro
   caía sob mai enquanto os meses que o gratuito guarda começam em jul. Uma
   gramática de ancoragem que a própria coluna desmentia. Agora o nó pertence ao
   texto, e quem ancora no tempo é o corte desenhado dentro do gráfico. */
.marco::before {
  content: '';
  position: absolute;
  /* Alinhado ao title, não à régua: assim é marcador de item, e não um nó
     afirmando posição no eixo do tempo. */
  top: 34px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--azure);
}

.marco--limite::before {
  background: var(--serie);
}

.marco {
  padding-left: 20px;
}

.marco h3 {
  font-family: var(--documento);
  font-size: 1.1875rem;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--tinta);
  margin: 0 0 9px;
}

.marco p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--tinta-2);
  margin: 0;
  max-width: 44ch;
}

@media (max-width: 860px) {
  .marcos {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .marco {
    padding-top: 22px;
    padding-left: 22px;
  }
  .marco::before {
    top: 26px;
    left: 0;
  }
  /* A régua vertical liga os marcos quando eles empilham. */
  .marco:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 38px;
    bottom: -4px;
    width: 1px;
    background: var(--regua);
  }
}

/* =========================================================================
   §06 — honorários
   ========================================================================= */

.ancora-preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 20px;
  padding: 20px 24px;
  margin-bottom: 26px;
}

.ancora-preco__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ancora-preco__valor {
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--tinta);
}

.ancora-preco__rotulo {
  font-size: 0.8125rem;
  color: var(--tinta-2);
}

.planos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* TRÊS COLUNAS OU UMA, NUNCA DUAS. Com três planos, um arranjo de duas colunas
   deixa o terceiro sozinho na linha de baixo, ocupando o dobro da largura dos
   outros — e o cartão que fica grande sozinho lê como o recomendado, que é
   exatamente o oposto do que este é. */
@media (max-width: 1020px) {
  .planos {
    grid-template-columns: 1fr;
  }
}

/* O terceiro plano não disputa com o do meio. O do meio é o que se assina por
   um clique, e por isso carrega o fundo alto; este se contrata por conversa, e
   o que o distingue é a borda, não o peso. */
.plano--projeto {
  border-color: rgba(255, 255, 255, 0.14);
}

.plano--projeto .faixa-chip {
  background: rgba(255, 255, 255, 0.07);
  color: var(--tinta-2);
}


.plano {
  display: flex;
  flex-direction: column;
  padding: 28px;
}

.plano--assinatura {
  background: var(--vidro-alto);
  border-color: rgba(106, 166, 255, 0.26);
}

.plano__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.plano__nome {
  font-family: var(--documento);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--tinta);
  margin: 0;
}

.plano__preco {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  /* A ALTURA DA LINHA DE PREÇO É FIXA PORQUE O CONTEÚDO DELA NÃO É. Dois
     cartões trazem um número de 40px e o terceiro traz uma frase de 24px; sem
     esta linha, o cartão do Full Time começa a lista 16px acima dos outros e a
     fileira inteira perde o alinhamento horizontal. */
  min-height: 40px;
}

.plano__valor {
  font-variant-numeric: tabular-nums;
  font-size: 2.5rem;
  font-weight: 620;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--tinta);
}

.plano__valor small {
  font-size: 0.4em;
  font-weight: 500;
  color: var(--tinta-3);
  letter-spacing: -0.01em;
  margin-right: 0.2em;
}

/* "Sob orçamento" não é um número, e não pode usar a escala de um: 2,5rem numa
   frase de treze letras estoura a coluna do cartão, e `tabular-nums` existe
   para alinhar dígitos que aqui não há. Precisa vir DEPOIS de `.plano__valor`
   — mesma especificidade, e na cascata quem vem depois ganha. */
.plano__valor--texto {
  font-variant-numeric: normal;
  font-size: 1.5rem;
  /* 40px, a mesma caixa do número dos outros dois cartões: a frase fica
     centrada na faixa do preço em vez de encostar no topo dela. */
  line-height: 1.6667;
  letter-spacing: -0.015em;
  color: var(--tinta-2);
}

.plano__por {
  font-size: 0.875rem;
  color: var(--tinta-3);
}

.plano__linha {
  font-size: 0.9375rem;
  color: var(--tinta-2);
  line-height: 1.55;
  margin: 0 0 20px;
  max-width: 40ch;
  /* ALTURA FIXA PORQUE A COPY VARIA. Duas linhas é o que cabe nos três
     resumos; sem esta trava, um resumo de três linhas empurra a lista daquele
     cartão para baixo e a fileira perde o alinhamento horizontal — que é a
     única coisa que faz três colunas de preço serem comparáveis a olho. */
  min-height: 48px;
}

.plano__itens {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.plano__itens li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

.plano__itens li b {
  color: var(--tinta);
  font-weight: 550;
}

.plano__itens svg {
  margin-top: 5px;
  flex: none;
}

.plano__rodape {
  margin-top: auto;
  padding-top: 8px;
}

.plano__acao {
  width: 100%;
}

/* O cartão da assinatura usa o vidro mais claro, e ali o terciário mede 4,32:1.
   Este aviso diz que não existe cobrança dentro do produto — é informação, não
   rodapé —, então sobe para o secundário, que mede 5,7:1 no mesmo fundo. */
.plano__aviso {
  margin: 0 0 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

/* =========================================================================
   §07 — emissão (fechamento)
   ========================================================================= */

.fecho {
  text-align: center;
  padding-block: clamp(80px, 13vh, 148px);
}

.fecho__titulo {
  margin-inline: auto;
  max-width: 20ch;
}

.fecho__sub {
  margin: 24px auto 0;
  max-width: 54ch;
  font-size: 1.0625rem;
  color: var(--tinta-2);
  line-height: 1.6;
}

.fecho__acoes {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---------- Declarações honestas ---------- */

.declaracoes {
  padding: 26px 28px;
  margin-top: clamp(40px, 6vh, 72px);
}

.declaracoes h3 {
  font-family: var(--documento);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--tinta);
  margin: 0 0 16px;
}

.declaracoes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px 32px;
}

.declaracoes li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--tinta-2);
}

.declaracoes li b {
  color: var(--tinta);
  font-weight: 550;
}

.declaracoes svg {
  margin-top: 5px;
  flex: none;
}

/* ---------- Rodapé ---------- */

.rodape {
  border-top: 1px solid var(--regua);
  margin-top: clamp(48px, 8vh, 90px);
  padding-block: 34px 46px;
}

.rodape__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.rodape__nota {
  font-size: 0.8125rem;
  color: var(--tinta-3);
  margin: 0;
  max-width: 62ch;
}

.rodape__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.rodape__links a {
  font-size: 0.8125rem;
  color: var(--tinta-2);
  transition: color 200ms var(--estado);
}

.rodape__links a:hover {
  color: var(--tinta);
}

@media (pointer: coarse) {
  .rodape__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- Utilitário ---------- */

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

.pular {
  position: absolute;
  top: -60px;
  left: var(--margem);
  z-index: 60;
  transition: top 200ms var(--estado);
}

.pular:focus {
  top: 12px;
}