/* ============================================================================
   ZappyDue — sistema visual.

   A IMAGEM VEM DO PRÓPRIO ÍCONE: fichas empilhadas. Um aparelho, várias
   identidades, uma sobre a outra, separadas e visíveis. O site inteiro é
   construído em cima desse baralho.

   A versão anterior era fundo preto com brilho colorido — o visual que todo
   site de tecnologia faz hoje, e que por isso não chama atenção nenhuma.
   Aqui a escolha é outra, e é disciplinada:

     PAPEL   um branco frio, quase impresso, com respiro largo
     TINTA   petróleo profundo, quente, nunca preto puro
     COR     vem SÓ das fichas das contas — em mais nenhum lugar

   Essa última regra é o que faz a página parecer cara: a cor não decora, ela
   IDENTIFICA. Onde há cor, há uma conta. Onde não há conta, é papel e tinta.
   ========================================================================= */

:root {
  --papel: #f3f5f4;
  --papel-alto: #ffffff;
  --tinta: #071a1f;
  --tinta-media: #3d5257;
  --tinta-fraca: #7a8c8f;
  --linha: #dfe5e3;
  --linha-forte: #c9d3d1;

  /* As seis contas. Tons de impressão, não de néon. */
  --c1: #00a884;
  --c2: #2f5ee8;
  --c3: #7443e0;
  --c4: #e4572e;
  --c5: #d6336c;
  --c6: #0e7c86;

  --largura: 1180px;
  --gutter: 28px;
}

/* ---------------------------------------------------------------- base --- */

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }

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

.envolve { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .revela { opacity: 1 !important; transform: none !important; }
}

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

/*
  O CONTRASTE SERIFA / SEM-SERIFA É O QUE DÁ O TOM.

  A serifa aparece SÓ nos títulos grandes, em corpo alto e com entrelinha
  apertada — é o que uma capa de revista faz. Todo o resto é sem-serifa,
  disciplinado. Serifa em texto corrido acabaria com o efeito na primeira
  linha.
*/
.display, h1, h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}

/*
  O teto de 8rem enchia a primeira tela sozinho e empurrava os botões para
  fora dela. Medido a 1440 de largura: o título ia até 128px de corpo e a
  chamada de ação só aparecia depois de rolar. Aqui ele continua grande, e a
  ação continua visível.
*/
.display { font-size: clamp(2.9rem, 7.2vw, 6.2rem); }
h2 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }

/* A palavra que carrega o sentido vai em itálico. Uma por título. */
.grifo { font-style: italic; }

h3 {
  font-family: "Instrument Sans", sans-serif;
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.guia {
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--tinta-media);
  max-width: 44ch;
}

.etiqueta {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
}

/*
  A MARCA DE SEÇÃO: três traços empilhados, como as fichas do ícone.
  É o baralho reduzido ao menor tamanho em que ainda se reconhece.
*/
.etiqueta::before {
  content: "";
  width: 22px;
  height: 12px;
  flex: 0 0 auto;
  background:
    linear-gradient(var(--cor, var(--tinta)), var(--cor, var(--tinta))) 0 0 / 22px 2px no-repeat,
    linear-gradient(var(--cor, var(--tinta)), var(--cor, var(--tinta))) 3px 5px / 19px 2px no-repeat,
    linear-gradient(var(--cor, var(--tinta)), var(--cor, var(--tinta))) 6px 10px / 16px 2px no-repeat;
  opacity: 0.85;
}

/* ---------------------------------------------------------- aparecendo --- */

.revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.revela.dentro { opacity: 1; transform: none; }

/* ------------------------------------------------------------ cabeçalho -- */

.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(243, 245, 244, 0.82);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--linha);
}

.topo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 72px;
}

.marca {
  font-family: "Instrument Serif", serif;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-decoration: none;
}
/* As páginas legais escrevem a marca com <span>; a inicial, com <em>. As duas
   formas precisam pintar igual, senão o "Due" fica sem cor fora da capa. */
.marca em, .marca span { font-style: italic; color: var(--c1); }

.topo__links { display: flex; align-items: center; gap: 30px; }
.topo__links a {
  color: var(--tinta-media);
  text-decoration: none;
  font-size: 0.93rem;
  transition: color 0.2s;
}
.topo__links a:hover { color: var(--tinta); }
.topo__links a.botao { color: var(--papel-alto); }

@media (max-width: 820px) {
  .topo__links a.esconde-no-celular { display: none; }
  .topo__links .botao { padding: 10px 18px; font-size: 0.88rem; }
}

/* --------------------------------------------------------------- botões -- */

/*
  Cantos quase retos (4px), e não pílula.

  A pílula é o botão padrão de todo site de aplicativo, e é o que faz o
  conjunto parecer um modelo pronto. O canto reto pertence à página impressa,
  que é de onde este desenho vem.
*/
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 4px;
  background: var(--tinta);
  color: var(--papel-alto);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid var(--tinta);
  transition: background 0.2s ease, color 0.2s ease;
}
.botao:hover { background: #0d2c33; }

.botao--vazado {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linha-forte);
}
.botao--vazado:hover { background: var(--papel-alto); }
.botao--pequeno { padding: 11px 22px; font-size: 0.92rem; }
.botao--grande { padding: 20px 40px; font-size: 1.08rem; }

.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.nota {
  font-family: "DM Mono", monospace;
  font-size: 0.76rem;
  color: var(--tinta-fraca);
  margin-top: 22px;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- hero -- */

.hero { padding: clamp(56px, 8vw, 110px) 0 clamp(60px, 8vw, 120px); }

.hero__grade {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 960px) { .hero__grade { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- o baralho ---- */

/*
  O ELEMENTO ASSINATURA: as fichas das contas, empilhadas e abertas em leque.
  É o ícone do aplicativo em tamanho grande, e é a tese do produto — um
  aparelho, várias identidades, uma sobre a outra, sem se misturarem.

  Elas ABREM na carga, uma a uma, e param. O movimento acontece uma vez e não
  se repete: o que se quer mostrar é o gesto de abrir o baralho, e não uma
  animação girando para sempre no canto do olho de quem está lendo.
*/
.baralho {
  position: relative;
  /* Garante que o leque não escorregue para dentro da coluna do texto. */
  overflow: visible;
  isolation: isolate;
  height: clamp(400px, 46vw, 540px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ficha {
  position: absolute;
  width: clamp(230px, 27vw, 320px);
  padding: 22px 24px 26px;
  background: var(--papel-alto);
  border-radius: 14px;
  border: 1px solid var(--linha);
  box-shadow: 0 26px 60px -28px rgba(7, 26, 31, 0.5);
  transform-origin: 50% 120%;
  animation: abrir 1s cubic-bezier(0.2, 1.1, 0.3, 1) backwards;
}

/* A faixa da conta, no alto da ficha: a mesma raia que o app desenha. */
.ficha::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  border-radius: 14px 14px 0 0;
  background: var(--cor);
}

.ficha__nome {
  font-family: "Instrument Serif", serif;
  font-size: 1.55rem;
  letter-spacing: -0.01em;
  margin: 6px 0 2px;
}
.ficha__estado {
  font-family: "DM Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
}
.ficha__estado::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--cor);
}

.ficha__linhas { display: flex; flex-direction: column; gap: 8px; }
.ficha__linhas i { display: block; height: 9px; border-radius: 5px; background: #e9edec; }
.ficha__linhas i:nth-child(2) { width: 72%; }
.ficha__linhas i:nth-child(3) { width: 88%; }
.ficha__linhas i:nth-child(4) { width: 54%; }

/*
  O leque abria até -64% e a ficha da ponta invadia a coluna do texto,
  escondendo uma linha inteira do parágrafo. Fechado, ele fica inteiro dentro
  da própria coluna -- e a sobreposição some sem que o gesto se perca.
*/
.ficha--1 { transform: rotate(-13deg) translate(-46%, 6%); animation-delay: 0.05s; z-index: 1; }
.ficha--2 { transform: rotate(-5deg) translate(-16%, -3%); animation-delay: 0.18s; z-index: 2; }
.ficha--3 { transform: rotate(4deg) translate(16%, 2%); animation-delay: 0.31s; z-index: 3; }
.ficha--4 { transform: rotate(12deg) translate(46%, 9%); animation-delay: 0.44s; z-index: 4; }

@keyframes abrir {
  from { transform: rotate(0deg) translate(0, 26%); opacity: 0; }
}

@media (max-width: 620px) {
  .baralho { height: 340px; }
  .ficha { width: 210px; padding: 18px 20px 22px; }
  /* Leque mais fechado: aberto demais, a ficha da ponta saía pela borda e
     o nome dela era cortado. */
  .ficha--1 { transform: rotate(-11deg) translate(-33%, 6%); }
  .ficha--2 { transform: rotate(-4deg) translate(-11%, -2%); }
  .ficha--3 { transform: rotate(4deg) translate(11%, 2%); }
  .ficha--4 { transform: rotate(11deg) translate(33%, 8%); }
}

/* ------------------------------------------------------------- seções --- */

.secao { padding: clamp(72px, 9vw, 150px) 0; border-top: 1px solid var(--linha); }
.secao--limpa { border-top: 0; }

.cabeca { max-width: 24ch; margin-bottom: clamp(44px, 5vw, 72px); }
.cabeca .guia { margin-top: 24px; max-width: 46ch; }

/* --------------------------------------------------------- comparação --- */

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); }
@media (max-width: 780px) { .duas { grid-template-columns: 1fr; } }

.lado__topo {
  font-family: "DM Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  padding-bottom: 16px;
  border-bottom: 2px solid var(--tinta);
  margin-bottom: 6px;
}
.lado--antes .lado__topo { border-bottom-color: var(--linha-forte); }
.lado ul { list-style: none; margin: 0; padding: 0; }
.lado li {
  padding: 20px 0;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta-media);
  line-height: 1.45;
}
.lado--depois li { color: var(--tinta); }

/* --------------------------------------------------------------- passos -- */

/*
  Numeração grande, à esquerda, em serifa. É um dos poucos lugares em que a
  ordem é real — primeiro nomear, depois parear, depois usar —, então o número
  informa em vez de decorar.
*/
.passos { list-style: none; margin: 0; padding: 0; counter-reset: p; max-width: 820px; }
.passos li {
  counter-increment: p;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 20px;
  padding: 34px 0;
  border-top: 1px solid var(--linha);
  align-items: start;
}
.passos li:first-child { border-top: 0; padding-top: 0; }
.passos li::before {
  content: counter(p, decimal-leading-zero);
  font-family: "Instrument Serif", serif;
  font-size: 3.4rem;
  line-height: 0.8;
  color: var(--linha-forte);
}
.passos p { color: var(--tinta-media); margin-top: 8px; font-size: 0.98rem; }

@media (max-width: 620px) {
  .passos li { grid-template-columns: 1fr; gap: 6px; }
  .passos li::before { font-size: 2.4rem; }
}

/* ------------------------------------------------------------ recursos -- */

/*
  Fios de 1px em vez de cartões soltos.

  O fio contínuo é o que uma página impressa faz, e é ele que dá a sensação de
  grade construída em vez de blocos jogados. Cartão com sombra deixaria o
  conjunto com cara de painel de administração.
*/
.grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}
@media (max-width: 900px) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grade { grid-template-columns: 1fr; } }

.celula { background: var(--papel); padding: 38px 32px; }
.celula__marca { width: 20px; height: 3px; background: var(--cor); margin-bottom: 22px; }
.celula h3 { margin-bottom: 10px; }
.celula p { color: var(--tinta-media); font-size: 0.96rem; margin: 0; }

/* -------------------------------------------------------------- planos -- */

.planos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}
@media (max-width: 1020px) { .planos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .planos { grid-template-columns: 1fr; } }

.plano {
  background: var(--papel);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.plano--destaque { background: var(--papel-alto); }
.plano--destaque::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--tinta);
  pointer-events: none;
}

.plano__selo {
  font-family: "DM Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--papel-alto);
  background: var(--tinta);
  padding: 4px 10px;
  align-self: flex-start;
  margin: -36px 0 18px -28px;
}

.plano__nome {
  font-family: "Instrument Serif", serif;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.plano__contas {
  font-family: "DM Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor);
  margin: 0 0 26px;
}
.plano__preco {
  font-family: "Instrument Serif", serif;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 2px;
}
.plano__preco small {
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.86rem;
  color: var(--tinta-fraca);
  letter-spacing: 0;
}
.plano__ano {
  font-family: "DM Mono", monospace;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--tinta-fraca);
  margin: 0 0 22px;
}
.plano__lista {
  list-style: none;
  margin: auto 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--linha);
}
.plano__lista li { font-size: 0.9rem; color: var(--tinta-media); padding: 6px 0; }

.planos__nota { margin-top: 30px; font-size: 0.92rem; color: var(--tinta-fraca); max-width: 66ch; }

/* ---------------------------------------------------------- perguntas --- */

.perguntas { max-width: 820px; }
.pergunta { border-top: 1px solid var(--linha); }
.pergunta:last-child { border-bottom: 1px solid var(--linha); }
.pergunta summary {
  cursor: pointer;
  padding: 28px 46px 28px 0;
  font-family: "Instrument Serif", serif;
  font-size: 1.42rem;
  letter-spacing: -0.01em;
  list-style: none;
  position: relative;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: "+";
  position: absolute; right: 4px; top: 26px;
  font-family: "DM Mono", monospace;
  font-size: 1.3rem;
  color: var(--tinta-fraca);
}
.pergunta[open] summary::after { content: "–"; }
.pergunta__corpo { padding: 0 0 28px; color: var(--tinta-media); max-width: 64ch; }

/* ------------------------------------------------------------- chamada -- */

/*
  A ÚNICA superfície escura do site inteiro, e é a última coisa que se vê.
  Guardar o contraste para o fim é o que faz ele valer alguma coisa.
*/
.chamada {
  background: var(--tinta);
  color: var(--papel);
  padding: clamp(84px, 11vw, 160px) 0;
  text-align: center;
}
.chamada h2 { color: var(--papel-alto); max-width: 16ch; margin: 0 auto 26px; }
.chamada .guia { color: rgba(243, 245, 244, 0.72); margin: 0 auto; }
.chamada .etiqueta { justify-content: center; color: rgba(243, 245, 244, 0.6); }
.chamada .acoes { justify-content: center; }

.loja {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 15px 30px;
  border: 1px solid rgba(243, 245, 244, 0.28);
  border-radius: 4px;
  text-align: left;
}
.loja__marca { font-weight: 600; font-size: 1rem; color: var(--papel-alto); }
.loja__estado {
  font-family: "DM Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c1);
}

/* -------------------------------------------------------------- rodapé -- */

.rodape { background: var(--tinta); color: rgba(243, 245, 244, 0.6); padding: 0 0 46px; }
.rodape a { color: rgba(243, 245, 244, 0.86); text-decoration: none; }
.rodape a:hover { color: var(--papel-alto); }
.rodape .marca { color: var(--papel-alto); }
.rodape .marca em, .rodape .marca span { color: var(--c1); }

.rodape__grade {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 44px;
  padding-top: 56px;
  border-top: 1px solid rgba(243, 245, 244, 0.14);
  margin-bottom: 48px;
}
@media (max-width: 780px) { .rodape__grade { grid-template-columns: 1fr; gap: 32px; } }

.rodape h4 {
  font-family: "DM Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(243, 245, 244, 0.45);
  margin: 0 0 18px;
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 11px; }
.rodape__fim { font-size: 0.84rem; color: rgba(243, 245, 244, 0.42); max-width: 72ch; }

/* ------------------------------------------------- páginas de texto ----- */

.texto { padding: clamp(50px, 7vw, 90px) 0 clamp(70px, 9vw, 120px); }
.texto__folha { max-width: 720px; }
.texto h1 { font-size: clamp(2.6rem, 6vw, 4rem); margin-bottom: 14px; }
.texto .data {
  font-family: "DM Mono", monospace;
  font-size: 0.75rem;
  color: var(--tinta-fraca);
  margin: 0 0 44px;
  letter-spacing: 0.04em;
}
.texto h2 {
  font-size: 1.75rem;
  margin: 50px 0 16px;
  padding-top: 30px;
  border-top: 1px solid var(--linha);
}
.texto h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.texto h3 { margin-top: 30px; margin-bottom: 8px; }
.texto p, .texto li { color: var(--tinta-media); }
.texto strong { color: var(--tinta); }
.texto ul { padding-left: 22px; margin: 0 0 1.1rem; }
.texto li { margin-bottom: 9px; }

.resumo {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--c1);
  padding: 26px 28px;
  margin-bottom: 44px;
}
.resumo p { color: var(--tinta); margin: 0; }

.destaque {
  background: #fdf6ec;
  border: 1px solid #e8d6b4;
  padding: 24px 26px;
  margin-bottom: 40px;
}
.destaque p { color: #6b4f1f; margin: 0; }

.chave { border-left: 3px solid var(--c1); padding: 4px 0 4px 20px; margin: 0 0 1.1rem; }
.chave p { color: var(--tinta); margin: 0; }

.sumario {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  padding: 28px 30px;
  margin: 0 0 50px;
}
.sumario h2 {
  font-family: "DM Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  font-weight: 500;
  border: 0; padding: 0; margin: 0 0 18px;
}
.sumario ol { list-style: none; counter-reset: c; margin: 0; padding: 0; columns: 2; column-gap: 34px; }
@media (max-width: 620px) { .sumario ol { columns: 1; } }
.sumario li {
  counter-increment: c;
  margin: 0 0 9px;
  break-inside: avoid;
  color: var(--tinta-media);
  font-size: 0.93rem;
}
.sumario li::before {
  content: counter(c, decimal-leading-zero);
  font-family: "DM Mono", monospace;
  font-size: 0.72rem;
  color: var(--tinta-fraca);
  margin-right: 10px;
}
.sumario a { color: var(--tinta-media); text-decoration: none; }
.sumario a:hover { color: var(--c1); }

.texto h2[id] { scroll-margin-top: 92px; }

.tabela-envolve { overflow-x: auto; margin: 0 0 26px; }
.tabela { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.9rem; }
.tabela th, .tabela td {
  text-align: left;
  padding: 14px 15px;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
}
.tabela th {
  font-family: "DM Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  font-weight: 500;
  border-bottom-color: var(--linha-forte);
}
.tabela td { color: var(--tinta-media); }
.tabela td:first-child { color: var(--tinta); }

.aviso-lei {
  font-size: 0.87rem;
  color: var(--tinta-fraca);
  border-top: 1px solid var(--linha);
  padding-top: 24px;
  margin-top: 44px;
}