/* O site de vendas do Sigma Ponto.
   ==================================================================
   DE ONDE VEM O DESENHO DESTA PÁGINA.

   O assunto deste produto é O REGISTRO: uma marcação que ganha número
   sequencial, entra numa corrente de verificação e não pode ser alterada por
   ninguém, nem por nós. O ancestral disso não é software: é o cartão de ponto,
   o livro de protocolo, o carimbo. Papel numerado que serve de prova.

   É de lá que vem o vocabulário visual daqui, e ele não é enfeite:

     * o COMPROVANTE aparece inteiro no alto da página, com número de NSR e
       tudo. Não é uma ilustração do produto, é o que o produto faz;
     * as listas de recurso são LINHAS DE UM REGISTRO, separadas por fio, e não
       seis cartões arredondados iguais. Cartão igual para tudo é o desenho que
       toda página de software tem, e ele não diz nada sobre esta;
     * os números são TABULARES em toda parte. Preço, hora, NSR: número que
       dança de largura quebra a leitura de coluna, e esta página é feita de
       colunas de número.

   AS FICHAS DE COR SÃO AS DO PRODUTO, e isso não é economia de trabalho: é a
   promessa sendo cumprida antes de o cliente entrar. Quem vê o marinho e o
   verde aqui e depois abre o painel encontra a mesma casa.

   A TIPOGRAFIA MUDOU, e a decisão antiga merece explicação. Estava escrito
   aqui que nenhuma fonte seria baixada, porque o cliente abre esta página no
   3G de uma padaria. O motivo continua de pé; a conclusão é que mudou. Hoje
   desce UM arquivo de 34 KB, hospedado por nós, só com o alfabeto latino, com
   `font-display: swap`: o texto aparece na hora com a fonte do sistema e é
   trocado quando (e se) a nossa chegar. Nada bloqueia, nada quebra se falhar,
   e a página passa a ter voz própria em vez da voz padrão de todo site.

   NENHUMA COR ESCRITA À MÃO fora do bloco de fichas. É a mesma regra que
   `sem-cor-solta.test.ts` guarda do outro lado. */

/* A fonte dos títulos. Archivo: uma grotesca de traço reto e ombro quadrado,
   desenhada para texto que precisa ser lido em tamanho pequeno e em papel
   barato. É a família de um formulário oficial, e não a de um aplicativo de
   meditação, que é exatamente o registro deste produto. */
@font-face {
  font-family: 'Archivo';
  src: url('fontes/archivo.woff2?v=2673de2b9b') format('woff2');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --marinho: #003273;
  --tinta: #061a33;
  --tinta-alta: #0c2545;
  --verde: #00a38c;
  --verde-fundo: #00806e;
  /* O verde mais escuro da família, e ele nasceu de uma conta.
     `--verde-fundo` tem 4,87:1 com o branco, o que basta para um botão parado.
     Falta o passo seguinte: o hover precisa ser visivelmente mais escuro que
     o repouso e continuar legível, e a pílula de desconto ("-25%") pinta o
     texto sobre um fundo já esverdeado, onde `--verde-fundo` cai para 3,59:1.
     Este tem 6,98:1 no branco e 5,15:1 na pílula. */
  --verde-fundo-forte: #00655a;
  --verde-claro: #5fd3bf;
  --fundo: #f4f7fa;
  --superficie: #ffffff;
  --superficie-alta: #eaeff5;
  --borda: #dde5ee;
  --fio: #c9d4e2;
  /* O fio quando ele deixa de ser fio e vira TEXTO. Os números grandes dos três
     passos eram desenhados em `--fio`, que tem 1,5:1 no branco: o "1", o "2" e
     o "3" praticamente não existiam na tela, e são eles que dizem que aquilo é
     uma sequência. Este tem 3,36:1, o mínimo que a norma pede para texto grande,
     e continua sendo um cinza que não disputa com o título ao lado. */
  --fio-legivel: #7d8da8;
  --texto: #0f1b2d;
  --texto-2: #56657c;
  /* O apoio mais fraco. Escurecido em 05/09/2026: a cor anterior (#8b98ad)
     tinha 2,92:1 no branco e 2,72:1 no fundo da página, contra o mínimo de
     4,5:1 para texto pequeno. Ela é usada justamente na AJUDA DE BAIXO DOS
     CAMPOS do formulário de cadastro, que é o texto que mais precisa ser lido
     na página inteira: é ele que explica o que vai no CNPJ e o tamanho da
     senha, para quem está tentando abrir conta às sete da manhã. Esta tem
     4,92:1 no branco e 4,58:1 no fundo. */
  --texto-3: #647189;
  --sobre-escuro: #e8edf5;
  --sobre-escuro-2: #b3c0d4;
  --atencao: #b45309;
  --erro: #b42318;

  /* O papel do comprovante. Quase branco, com um grão de amarelo: é o que
     separa "documento" de "mais um cartão branco" sem virar textura de papel
     falsa. Usado SÓ no comprovante e na tabela da lei. */
  --papel: #fbfaf6;

  --raio: 14px;
  --raio-controle: 10px;

  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px;
  --e6: 24px; --e8: 32px; --e12: 48px; --e16: 64px; --e24: 96px;

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --fonte-titulo: 'Archivo', var(--fonte);
  /* A LARGURA DA PÁGINA CRESCE COM A TELA, e antes era um número parado.
     1180px foi escolhido pensando num notebook. Num monitor de 1920 isso é
     61% da janela: quase quarenta por cento da tela é margem vazia, e foi o
     que o dono viu no print dele. O piso continua sendo 1180, porque abaixo
     disso a página já usa a tela inteira menos a folga da lateral. O teto de
     1500 não é gosto: as fotos desta página foram salvas com 1600px de
     largura, e a faixa de apoio da seção "Como funciona" ocupa a medida
     inteira. Passando de 1500 ela começaria a ser esticada além do arquivo. */
  --largura: clamp(1180px, 84vw, 1500px);

  color-scheme: light;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Número tabular no documento inteiro. Esta página é feita de colunas de
     número (preço, hora, NSR, prazo), e algarismo que muda de largura faz a
     coluna tremer entre uma linha e outra. */
  font-variant-numeric: tabular-nums;
}

/* `height: auto` NÃO É DETALHE, e a falta dele foi o pior defeito visual que
   este site já teve. As fotos trazem `width` e `height` no HTML, que existem
   para o navegador reservar o espaço antes de a imagem chegar. Sem esta linha,
   quando `max-width: 100%` encolhe a largura para caber na coluna, a ALTURA
   continua valendo o número escrito no atributo: a foto da gestora, de
   1600x1073, era desenhada com 358px de largura e 1073px de altura no celular,
   esticada quatro vezes e ocupando a tela inteira. Aparecia deformada nas três
   larguras, e no computador também. */
img { max-width: 100%; height: auto; display: block; }

.dentro {
  width: min(var(--largura), calc(100% - var(--e8)));
  margin-inline: auto;
}
/* A FAIXA LARGA, e ela existe para uma seção só: a dos preços.
   São cinco cartões lado a lado, e cinco colunas legíveis não cabem nos 1180px
   que servem bem a um parágrafo. Com 1400px os cinco cabem inteiros num monitor
   comum e a fita não precisa deslizar; abaixo disso ela desliza, que é o
   comportamento pretendido e não uma falha. O texto da seção não fica largo
   demais junto porque a cabeça e o rodapé dela têm medida própria.

   Ela cresce pelo mesmo motivo que a medida normal cresceu, e sempre um pouco
   à frente dela: aqui não há foto para esticar, só cartão, e cartão de preço
   com mais folga é cartão que respira. O teto de 1620 mantém os cinco cartões
   com cerca de 300px cada num monitor de 1920, que é onde eles ficam largos o
   bastante para o preço e a lista de itens sem virar coluna vazia. */
.dentro.largo { width: min(clamp(1400px, 90vw, 1620px), calc(100% - var(--e8))); }

/* ---------------------------------------------------------- tipografia */
h1, h2, h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  /* QUANDO O TÍTULO PRECISAR QUEBRAR, QUE QUEBRE EM LINHAS IGUAIS.
     A quebra normal enche a primeira linha até o fim e joga o que sobrou na
     segunda: "O que a lei pede, e o que o sistema" em cima e "entrega." sozinho
     embaixo. O navegador que não conhece esta linha simplesmente quebra como
     sempre quebrou, e nada se perde. */
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.1rem; letter-spacing: -0.012em; font-weight: 650; }
/* `pretty` evita a palavra órfã na última linha do parágrafo. É o único efeito
   dele aqui, e onde o navegador não conhece a propriedade o texto quebra como
   sempre quebrou. */
p { margin: 0; text-wrap: pretty; }

/* A MEDIDA DE LEITURA MORA NO ELEMENTO QUE CARREGA O TEXTO, E NUNCA NO PAI.
   Esta é a regra que este arquivo tinha quebrado, e ela custou caro.

   `ch` vale a largura do algarismo "0" DA FONTE DO PRÓPRIO ELEMENTO onde a
   regra está escrita. Escrever `max-width: 56ch` num `div` que herda o corpo do
   texto, de 17px, e pendurar dentro dele um `h2` de 41,6px, é medir com a régua
   do texto miúdo e cortar o título com ela: os "56 caracteres" viravam 600px de
   caixa, e naquele tamanho de letra cabiam 22 caracteres por linha. O título da
   seção da lei quebrava em duas linhas ocupando 41% de um monitor de 1470px,
   com a página inteira vazia à direita.

   Então: título tem medida de título, parágrafo tem medida de parágrafo, e cada
   uma é declarada no próprio elemento. `.medida` é a do parágrafo. */
.medida { max-width: 60ch; }
.chamada { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--texto-2); }
.miudo { font-size: 0.9rem; color: var(--texto-2); }

/* ------------------------------------------------------------- botões */
/* A ESCALA DOS BOTÕES, e ela tem dois degraus de propósito.
   Antes existia um tamanho só, com 14px de recheio em cima e embaixo sobre uma
   linha de 1,6: 57px de altura para tudo, do menu do topo ao cartão de preço.
   Botão de barra de navegação com a mesma altura do botão de chamada principal
   faz os dois parecerem grandes demais e nenhum parecer mais importante.

   O DEGRAU DE BAIXO (`.botao`) é o tamanho normal, e é onde ficam o botão da
   barra, os dos cartões de plano e os do rodapé. 44px de altura mínima, que é o
   piso do alvo de toque no celular e não um número escolhido no olho.

   O DEGRAU DE CIMA (`.botao.grande`) é reservado às duas chamadas que a página
   quer que a pessoa aperte: começar o teste, no herói, e criar a conta, no
   formulário. Elas são maiores porque são mais importantes, e não porque todo
   botão precisa ser grande.

   `line-height: 1.25` no lugar do 1,6 herdado do corpo: entrelinha de parágrafo
   dentro de um rótulo de uma linha só vira altura sobrando. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 11px 20px;
  min-height: 44px;
  font-size: 0.95rem;
  line-height: 1.25;
  border-radius: var(--raio-controle);
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 120ms ease, background 120ms ease;
}
.botao.grande {
  padding: 15px 28px;
  min-height: 54px;
  font-size: 1.04rem;
}
/* O FUNDO DO BOTÃO É `--verde-fundo`, e não o verde da marca. Branco sobre
   `--verde` dá 3,17:1, abaixo dos 4,5:1 que a norma pede: era o botão mais
   importante da página, repetido seis vezes, com o rótulo mais difícil de ler
   dela. O verde da marca continua vivo nos marcadores das listas, na borda do
   plano em destaque e no anel de foco, onde ele é forma e não texto. */
.botao.principal { background: var(--verde-fundo); color: #fff; }
.botao.principal:hover { background: var(--verde-fundo-forte); }
.botao.contorno {
  background: transparent;
  color: var(--sobre-escuro);
  border-color: rgb(255 255 255 / 32%);
}
.botao.contorno:hover { background: rgb(255 255 255 / 10%); }
.botao.claro { background: var(--superficie); color: var(--marinho); }
.botao.claro:hover { background: var(--superficie-alta); }
.botao:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.botao:disabled { opacity: 0.6; cursor: not-allowed; }

/* -------------------------------------------------------------- topo */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--tinta) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}
.topo .dentro {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding-block: var(--e3);
}
.marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-right: auto;
  padding-block: 8px;
  text-decoration: none;
}
.marca img { height: 28px; width: auto; }
.marca span {
  color: #fff;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  /* O nome do produto não quebra em duas linhas. Quebrado, ele dobra a altura
     da barra fixa e come uma faixa da tela em todo rolamento. */
  white-space: nowrap;
}

/* O rótulo do botão muda de tamanho conforme a tela, e não o botão de lugar.
   Em 390px, "Testar 30 dias grátis" ocupava metade da largura e empurrava a
   marca para duas linhas. */
.so-no-celular { display: none; }
@media (max-width: 620px) {
  .so-no-computador { display: none; }
  .so-no-celular { display: inline; }
  .topo .botao { padding: 11px 16px; font-size: 0.92rem; }
  .topo .dentro { gap: var(--e3); }
}
/* O ANDAR MAIS APERTADO DA BARRA. Num iPhone SE ou num Android de 360px, a
   marca, o "Entrar" e o botão somavam mais que os 328px úteis, e o rótulo do
   botão quebrava em duas linhas: a barra fixa dobrava de altura e passava a
   comer uma faixa da tela em todo rolamento. Aqui a barra economiza nos dois
   lugares onde não custa leitura, o recheio do botão e o corpo do nome. */
@media (max-width: 400px) {
  .topo .botao { padding: 11px 12px; font-size: 0.88rem; }
  .topo .dentro { gap: var(--e2); }
  .marca { gap: var(--e2); }
  .marca span { font-size: 0.98rem; }
}
/* `padding-block` para o alvo de toque, e não para o desenho. "Entrar" tinha
   24px de altura clicável: no dedo de quem está em pé no balcão, isso erra. Os
   44px são o mínimo que se acerta sem olhar, e o recheio não muda nada na
   aparência da barra, porque ela já é mais alta que isso. */
.topo a.texto {
  color: var(--sobre-escuro);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.95rem;
  padding-block: 10px;
}
.topo a.texto:hover { color: #fff; }

/* -------------------------------------------------------------- herói

   A FOTO E O COMPROVANTE JUNTOS. A foto é para a pessoa se reconhecer; o
   comprovante é a prova de que aquilo vira documento. Sozinha, a foto é banco
   de imagem; sozinho, o comprovante não diz para quem serve. */
.heroi {
  background: var(--tinta);
  color: #fff;
  padding-block: var(--e16);
  position: relative;
  overflow: hidden;
}
.heroi .dentro {
  display: grid;
  /* A coluna do texto ganhou um pouco da coluna da foto. O `h1` do herói é o
     maior tipo da página, 64px, e em 594px ele escrevia 17 caracteres por
     linha: uma manchete cortada em três pedaços curtos. A foto perde uns 60px
     de largura e não perde nada de assunto, porque ela é um recorte 4/3 de uma
     pessoa com o celular na mão. */
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--e12);
  align-items: center;
}
.heroi h1 { color: #fff; }
.heroi .chamada { color: var(--sobre-escuro); }
.heroi-acoes { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e8); }
.heroi-texto > * + * { margin-top: var(--e4); }

.selo-teste {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--verde) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--verde) 45%, transparent);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 650;
}

.heroi-palco { position: relative; }
.heroi-foto {
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 24px 60px rgb(0 0 0 / 45%);
  aspect-ratio: 4 / 3;
  margin: 0;
}
/* `<picture>` SOME DA CONTA DO LAYOUT, e esta linha é o que impede um estrago
   silencioso. Desde 06/09/2026 as fotos vêm embrulhadas em `<picture>`, para o
   navegador escolher entre AVIF, WebP e o original. O problema: `<picture>` é
   um elemento de verdade, e ele passa a ser o filho direto dos contêineres que
   dimensionam a foto — `.heroi-foto`, `.foto-de-apoio`, `.tela`. Regras como
   `height: 100%` no `img` passariam a medir a altura do `<picture>`, que não
   tem altura nenhuma, e a foto colapsaria para o tamanho natural dela dentro
   de uma moldura de proporção fixa: recorte errado em toda foto do site.

   `display: contents` faz o `<picture>` desaparecer da árvore de caixas sem
   desaparecer do HTML: a `<img>` volta a ser, para o layout, filha direta de
   quem sempre foi. Nenhuma outra regra deste arquivo precisou mudar. */
picture { display: contents; }

.heroi-foto img { width: 100%; height: 100%; object-fit: cover; }

/* O COMPROVANTE, e ele é o único gesto forte da página inteira.
   Encostado no canto de baixo da foto, saindo um pouco dela: é o documento
   que aquela pessoa acabou de gerar, e não um cartão flutuando ao lado. */
.comprovante {
  position: absolute;
  left: calc(var(--e8) * -1);
  bottom: calc(var(--e8) * -1);
  width: min(280px, 74%);
  background: var(--papel);
  color: var(--texto);
  border-radius: 6px;
  padding: var(--e4) var(--e4) var(--e3);
  box-shadow: 0 18px 44px rgb(0 0 0 / 40%);
  font-size: 0.86rem;
  line-height: 1.45;
}
.comprovante dl { margin: var(--e3) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px var(--e3); }
.comprovante dt { color: var(--texto-2); }
.comprovante dd { margin: 0; text-align: right; font-weight: 600; }
.comprovante .titulo-do-comprovante {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e3);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--fio);
}
.comprovante .nsr { color: var(--verde-fundo); font-weight: 700; }
.comprovante .selado {
  margin-top: var(--e3);
  padding-top: var(--e2);
  border-top: 1px dashed var(--fio);
  color: var(--texto-2);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ seções */
/* O TOPO É FIXO, e por isso toda âncora precisa de folga. Sem isto, clicar em
   "Preços" no menu para a página com o título da seção ESCONDIDO atrás da barra
   de cima, e quem clicou acha que caiu no lugar errado. */
.secao, .heroi { scroll-margin-top: 76px; }
.secao { padding-block: var(--e24); }
.secao.clara { background: var(--superficie); }
.secao.escura { background: var(--tinta); color: #fff; }
.secao.escura h2, .secao.escura h3 { color: #fff; }
.secao.escura .chamada, .secao.escura .miudo { color: var(--sobre-escuro-2); }
.cabeca-de-secao { margin-bottom: var(--e12); }
/* Os dois filhos medidos separadamente, cada um na régua da sua própria fonte.
   46ch no tamanho do `h2` dá cerca de 1050px, o suficiente para todo título
   desta página caber numa linha só num monitor grande, e continua sendo um
   teto: título mais comprido que isso quebra, e quebra equilibrado. */
.cabeca-de-secao > h2 { max-width: 46ch; }
.cabeca-de-secao > p { max-width: 62ch; }
.cabeca-de-secao h2 + p { margin-top: var(--e4); }

/* `min(Xpx, 100%)` NO PISO DE TODA GRADE, e não o número solto.
   `minmax(340px, 1fr)` quer dizer "esta coluna nunca fica menor que 340px",
   inclusive quando a tela tem 320. A coluna então estoura para fora e a PÁGINA
   INTEIRA passa a rolar de lado, com a barra do topo escorregando junto. Era o
   que acontecia na seção "Prefere falar com gente?" num iPhone SE.
   Com `min(340px, 100%)`, o piso vira "340px, ou a largura disponível, o que for
   menor": a intenção de não espremer continua valendo onde há espaço, e some
   onde não há. */
.grade { display: grid; gap: var(--e6); }
.grade.tres { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grade.dois { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e8);
}
.cartao > * + * { margin-top: var(--e3); }
.cartao > .fita + * { margin-top: 0; }
.secao.clara .cartao { background: var(--fundo); }

/* ------------------------------------------------- as três exceções

   A regra que separa este produto dos outros. Em fundo escuro e SEM cartão:
   três colunas separadas por fio, como as três entradas de um registro. */
.excecoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 0;
  margin-top: var(--e12);
  border-top: 1px solid rgb(255 255 255 / 16%);
}
.excecao {
  padding: var(--e8) var(--e6) 0 0;
  border-right: 1px solid rgb(255 255 255 / 12%);
}
.excecao:last-child { border-right: none; }
.excecao h3 { margin-bottom: var(--e2); }
.excecao p { color: var(--sobre-escuro-2); font-size: 0.96rem; }
@media (max-width: 860px) {
  /* O recheio da direita servia para afastar o texto do fio vertical. Sem o
     fio, ele vira uma faixa de 24px que só encurta a linha. */
  .excecao {
    border-right: none;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
    padding-right: 0;
    padding-bottom: var(--e6);
  }
  .excecao:last-child { border-bottom: none; }
}

/* --------------------------------------------------------- os passos
   São uma sequência de verdade, e por isso são numerados. O número é
   tipográfico e grande, e não uma bolinha colorida: ele é a estrutura da
   seção, não um marcador decorativo. */
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--e8); }
.passo { border-top: 2px solid var(--fio); padding-top: var(--e4); }
.passo-numero {
  font-family: var(--fonte-titulo);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--fio-legivel);
  display: block;
  margin-bottom: var(--e3);
}
.passo h3 + p { margin-top: var(--e2); }

/* ---------------------------------------------- o que a empresa recebe
   LINHAS DE UM REGISTRO, e não seis cartões iguais. Duas colunas: o nome do
   documento e o que ele é. É a forma de uma tabela de conteúdo, que é
   exatamente o que este bloco é. */
.entregas { border-top: 1px solid var(--fio); }
.entrega {
  display: grid;
  grid-template-columns: minmax(min(190px, 100%), 0.32fr) 1fr;
  gap: var(--e3) var(--e8);
  padding: var(--e6) 0;
  border-bottom: 1px solid var(--fio);
  align-items: baseline;
}
.entrega h3 { font-size: 1.05rem; }
/* A MEDIDA DA LINHA. Em 1440px a coluna da direita ficava com 890px, e o olho
   perdia o começo da linha seguinte lendo textos de mais de 100 caracteres. */
.entrega p { color: var(--texto-2); max-width: 68ch; }
@media (max-width: 720px) {
  .entrega { grid-template-columns: 1fr; gap: var(--e2); }
}

/* -------------------------------------------------------- a lei

   TABELA DE VERDADE, porque o conteúdo É uma tabela: de um lado o que a norma
   exige, do outro o que o sistema entrega. Qualquer outro formato obrigaria o
   leitor a casar as duas listas de cabeça. */
.quadro-da-lei {
  width: 100%;
  border-collapse: collapse;
  background: var(--papel);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  overflow: hidden;
  font-size: 0.97rem;
}
.quadro-da-lei th, .quadro-da-lei td {
  text-align: left;
  padding: var(--e4) var(--e6);
  border-bottom: 1px solid var(--fio);
  vertical-align: top;
}
.quadro-da-lei thead th {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.92rem;
  background: color-mix(in srgb, var(--fio) 26%, transparent);
}
.quadro-da-lei tbody tr:last-child th,
.quadro-da-lei tbody tr:last-child td { border-bottom: none; }
.quadro-da-lei tbody th { font-weight: 600; width: 38%; }
.quadro-da-lei td { color: var(--texto-2); }
.rolagem-do-quadro { overflow-x: auto; }

/* NO CELULAR A TABELA DEIXA DE SER TABELA, e a decisão de cima continua de pé:
   o conteúdo É uma tabela, e é assim que ele aparece em qualquer tela onde
   caibam duas colunas. O que não cabe é o desenho em 390px. Ali as duas colunas
   tinham 136px e 150px, e cada resposta descia em quinze linhas de duas
   palavras: "Nenhum registro é / recusado. Sem / internet, sem / conferir o
   rosto ou". Ninguém lê isso, e é a seção que mais precisa ser lida.

   Empilhado, cada exigência vira um bloco: a norma em cima, em negrito, e a
   resposta do sistema embaixo, com um risco verde na lateral. O verde é o mesmo
   que marca "o que o sistema faz" na página inteira, e por isso o par se
   entende na primeira linha sem precisar repetir um rótulo oito vezes.

   A MARCAÇÃO CONTINUA SENDO `<table>`, com `<th scope>` e `<thead>`: só a
   apresentação muda. Quem lê com leitor de tela continua ouvindo os cabeçalhos,
   que ficam escondidos aos olhos e não removidos. */
@media (max-width: 620px) {
  .quadro-da-lei,
  .quadro-da-lei tbody,
  .quadro-da-lei tr,
  .quadro-da-lei tbody th,
  .quadro-da-lei td { display: block; width: auto; }

  /* Escondido para o olho, presente para o leitor de tela. `display: none`
     apagaria os cabeçalhos da tabela também para quem depende deles.

     `left: -9999px` E NÃO SÓ `clip-path`: recortar é efeito visual, e o
     navegador continua contando a largura real do que foi recortado. Numa tela
     de 320px, o cabeçalho recortado esticava a página para 356px e ela passava a
     rolar de lado inteira. Empurrado para fora pela ESQUERDA, ele não soma
     largura nenhuma, porque rolagem para a esquerda não existe. */
  .quadro-da-lei thead {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
    white-space: nowrap;
  }

  .quadro-da-lei tbody tr {
    border-bottom: 1px solid var(--fio);
    padding: var(--e4) 0;
  }
  .quadro-da-lei tbody tr:last-child { border-bottom: none; }
  .quadro-da-lei tbody th {
    width: auto;
    padding: 0 var(--e4) var(--e2);
    border-bottom: none;
    color: var(--texto);
  }
  .quadro-da-lei td {
    padding: 0 var(--e4);
    border-bottom: none;
    border-left: 3px solid var(--verde);
    margin-left: var(--e4);
  }
}

.ressalva {
  margin-top: var(--e6);
  padding: var(--e6);
  border-left: 3px solid var(--atencao);
  background: color-mix(in srgb, var(--atencao) 7%, transparent);
  font-size: 0.93rem;
  color: var(--texto-2);
  max-width: 78ch;
}
.ressalva strong { color: var(--texto); }

/* --------------------------------------------------------------- telas */
.telas { display: grid; gap: var(--e6); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.tela {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--superficie);
  display: flex;
  flex-direction: column;
  margin: 0;
}
/* ALTURA FIXA NO BLOCO DE IMAGEM, e não proporção. Duas capturas são de painel
   (largas) e uma é de celular (alta): qualquer proporção comum ou espreme uma
   ou estica a outra. Com altura fixa e `contain`, as três ocupam o mesmo
   retângulo e cada uma se acomoda no tamanho que couber.

   `contain` e nunca `cover`: recortar uma captura de tela para preencher é
   apagar justamente o que se quer mostrar. */
.tela img {
  width: 100%;
  height: 300px;
  object-fit: contain;
  background: var(--tinta);
  padding: var(--e4);
}
.tela figcaption {
  margin-top: auto;
  padding: var(--e4) var(--e6) var(--e6);
  color: var(--texto-2);
  font-size: 0.95rem;
}
.tela figcaption strong { color: var(--texto); display: block; margin-bottom: var(--e1); }

/* --------------------------------------------------------------- preços */

/* O seletor de período. Três abas, não um interruptor de dois estados: são
   três opções, e um interruptor obrigaria a esconder uma delas. */
/* `flex-wrap` E `max-width` SÃO A TRAVA DE SEGURANÇA. As três abas somavam
   430px numa tela de 390px: elas não eram só cortadas, elas faziam a PÁGINA
   INTEIRA rolar de lado, e a barra do topo e todas as seções passavam a
   escorregar junto. Um seletor que ganha uma aba nova, ou um idioma com
   palavra mais comprida, volta a estourar sem esta linha. */
.periodos {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  margin-bottom: var(--e8);
}
.periodo {
  border: none;
  background: none;
  font: inherit;
  font-weight: 650;
  font-size: 0.94rem;
  color: var(--texto-2);
  padding: 11px 20px;
  /* 44px é o alvo de toque mínimo. Estas abas tinham 42px, e são o controle que
     o cliente mais usa nesta seção: é aqui que ele compara mensal com anual. */
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}
/* NO CELULAR AS TRÊS ABAS DIVIDEM A LARGURA EM PARTES IGUAIS.
   Com o recheio do computador elas somavam 406px numa faixa de 358 e quebravam
   em duas linhas, deixando a pílula com um recorte torto e o "Anual", que é a
   aba escolhida por padrão, sozinho embaixo. Em partes iguais elas cabem numa
   linha e o alvo de toque continua com os 44px de altura. */
@media (max-width: 620px) {
  .periodos { display: flex; width: 100%; justify-content: center; }
  .periodo {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 6px;
    font-size: 0.86rem;
    justify-content: center;
    gap: var(--e1);
  }
  .periodo .desconto { font-size: 0.72rem; padding: 2px 5px; }
}

.periodo[aria-selected='true'] { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgb(15 27 45 / 14%); }
.periodo:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.periodo .desconto {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--verde-fundo-forte);
  background: color-mix(in srgb, var(--verde) 16%, transparent);
  padding: 2px 7px;
  border-radius: 999px;
}

/* OS CINCO PLANOS SÃO UMA FITA, e não uma grade que quebra linha.

   O QUE ACONTECIA. Com `auto-fit` de piso 250px, em 1180px cabiam quatro
   colunas: os quatro primeiros formavam uma fileira e o "Rede", a faixa de cem
   funcionários, caía sozinho na linha de baixo com três colunas de vazio ao
   lado. Quem batia o olho concluía que a página tinha quatro planos, e a faixa
   que mais paga era a que ninguém via.

   COMO É AGORA. Uma fileira só, na ordem que o servidor mandou. Onde os cinco
   cabem, eles simplesmente cabem: `flex-grow: 1` faz os cartões dividirem a
   largura e a fita não rola. Onde não cabem, `flex-shrink: 0` impede que
   encolham até ficarem ilegíveis, e a fita passa a deslizar de lado.

   O CARTÃO SEGUINTE APARECE CORTADO NA BORDA, e isso é o aviso. Fita que
   termina exatamente na borda da tela parece que acabou, e metade das pessoas
   nunca descobre que existe mais coisa. O corte parcial diz "tem mais aqui" sem
   precisar de uma seta nem de uma frase.

   `scroll-snap` encaixa por cartão, para a fita nunca parar exibindo duas
   metades. A rolagem suave já é desligada por `prefers-reduced-motion` no alto
   deste arquivo, junto com o resto do movimento da página.

   O RECHEIO DE CIMA existe por causa da fita "Mais escolhido", que sai 12px
   para fora do topo do cartão em destaque: um contêiner com `overflow-x` corta
   o que passa da borda, e sem esta folga o selo seria decepado.

   POR QUE NÃO ESCONDER O "REDE". Ele é o último da fita e não tem selo nem
   borda acesa, e é só isso que "discreto" precisa significar aqui. Preço que
   existe e não se enxerga é problema de confiança, e o cliente de cem pessoas é
   justamente o que mais paga. */
.planos {
  display: flex;
  gap: var(--e6);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: var(--e4) 2px var(--e6);
  scroll-padding-inline: 2px;
}
/* A fita recebe foco pelo teclado, e aí as setas andam com ela. Sem isto, quem
   não usa mouse nem toque só alcançaria os planos do fim tabulando pelos links
   de dentro, e não conseguiria enxergar a fileira antes de escolher. */
.planos:focus-visible { outline: 3px solid var(--verde); outline-offset: 4px; }
.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 0 250px;
  scroll-snap-align: start;
}
@media (max-width: 620px) {
  /* No celular o cartão é medido em tela, e não em pixels: 76vw deixa o
     seguinte espiando com uma tira de quase um quarto da largura. */
  .plano { flex-basis: 76vw; }
}
.plano > .miudo { min-height: calc(4 * 1.6 * 0.9rem); }
.plano .preco {
  font-family: var(--fonte-titulo);
  /* 2,05rem, e a conta é do maior valor que cabe na coluna mais estreita.
     A conta era apertada quando os cartões dividiam 1180px em quatro colunas de
     277px: sobravam 213px úteis, e "R$ 216,75/mês" em 2,5rem pedia 231px e
     empurrava o "/mês" para a linha de baixo em dois dos quatro cartões.
     Com a fileira em três e dois, o cartão passou a ter 360px no máximo e
     sobram cerca de 296px, folga de sobra para 2,05rem. O tamanho fica como
     está: aumentar a fonte agora seria desfazer, pelo outro lado, o mesmo
     desequilíbrio de tamanho que o resto desta revisão veio corrigir. */
  font-size: clamp(1.7rem, 2.4vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  /* O valor e a unidade são uma coisa só. Quebrados em duas linhas, o número
     grande fica parecendo o preço final e o "/mês" vira legenda solta. */
  white-space: nowrap;
}
.plano .preco small { font-size: 0.9rem; font-weight: 500; color: var(--texto-2); letter-spacing: 0; }
.plano .cobranca { color: var(--texto-2); font-size: 0.88rem; }
.plano .economia { color: var(--verde-fundo); font-weight: 650; font-size: 0.9rem; }
/* `--verde-fundo`, e não `--verde`: o verde da marca tem 3,17:1 no branco, o
   que serve para um botão preenchido e não para texto pequeno. Este tem
   4,87:1 e continua sendo verde. */
.plano .por-cabeca { color: var(--verde-fundo); font-weight: 650; font-size: 0.95rem; }
.plano ul { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; gap: var(--e2); }
.plano li { padding-left: 24px; position: relative; color: var(--texto-2); font-size: 0.95rem; }
.plano li::before {
  content: "";
  position: absolute; left: 3px; top: 9px;
  width: 7px; height: 7px; border-radius: 999px; background: var(--verde);
}
.plano .botao { margin-top: auto; }
.plano.destaque { border-color: var(--verde); box-shadow: 0 12px 34px rgb(0 163 140 / 16%); }
.fita {
  position: absolute; top: -12px; left: var(--e8);
  /* Mesmo motivo do botão: branco sobre o verde da marca dá 3,17:1, e esta
     fita é escrita em 0,78rem, que é o tamanho onde a norma menos perdoa. */
  background: var(--verde-fundo); color: #fff;
  padding: 4px 12px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700;
}

/* ------------------------------------------------------------- cadastro */
.cadastro { background: var(--marinho); color: #fff; }
.cadastro h2 { color: #fff; }
.cadastro .chamada { color: var(--sobre-escuro); }

/* A SEÇÃO ONDE O DINHEIRO ENTRA OCUPA A LARGURA INTEIRA.
   O formulário era um cartão de 780px preso à esquerda, com quatrocentos pixels
   de azul vazio sobrando à direita num monitor comum: a tela mais importante do
   site parecia a menos importante dele.

   A saída NÃO É esticar os campos. Campo de texto com mil pixels de largura é
   pior que campo estreito: o olho perde a ligação entre o rótulo e a caixa, e
   ninguém escreve um CNPJ que ocupe a tela. Então a largura é preenchida por
   DUAS COLUNAS DE ASSUNTO: o argumento de venda à esquerda, o cartão do
   formulário à direita, e dentro dele os campos continuam com a mesma largura
   confortável de sempre.

   A coluna do formulário vem por último no HTML e, no celular, isso vira a
   ordem certa sozinha: primeiro a pessoa lê por que vale a pena, depois
   encontra os campos. */
/* `min-width: 0` NOS DOIS FILHOS, e sem isso a conta não fecha.
   Uma coluna `1fr` nunca encolhe abaixo do min-content do que está dentro dela,
   e o min-content de um `<input>` é a largura intrínseca dele, uns 248px, que o
   `width: 100%` não desfaz. Somados os 64px de recheio do cartão, a coluna
   pedia 312px numa tela de 288: o formulário empurrava a página para fora e ela
   rolava de lado. */
.cadastro-grade > * { min-width: 0; }
.cadastro-grade {
  display: grid;
  grid-template-columns: minmax(min(320px, 100%), 0.85fr) minmax(min(420px, 100%), 1fr);
  gap: var(--e12);
  align-items: start;
}
.cadastro-grade .cabeca-de-secao { margin-bottom: var(--e6); }
.cadastro-argumento > * + * { margin-top: var(--e6); }
/* O aviso do pré-pago saiu de dentro do cartão branco e virou argumento, então
   ele precisa da cor de texto sobre fundo escuro. */
.cadastro-argumento .pre-pago { color: var(--sobre-escuro); }
.cadastro-argumento .pre-pago strong { color: #fff; }

.formulario {
  background: var(--superficie);
  color: var(--texto);
  border-radius: var(--raio);
  padding: var(--e8);
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

@media (max-width: 900px) {
  .cadastro-grade { grid-template-columns: 1fr; gap: var(--e8); }
}
.campo { display: flex; flex-direction: column; gap: var(--e1); }
.campo.largo { grid-column: 1 / -1; }
.campo label { font-size: 0.86rem; font-weight: 650; color: var(--texto-2); }
.campo input, .campo select {
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  background: var(--superficie);
  color: var(--texto);
  width: 100%;
  /* Mesmo motivo: o campo precisa poder encolher junto com a coluna. */
  min-width: 0;
}
.campo input:focus-visible, .campo select:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 1px;
}
.campo .ajuda { font-size: 0.82rem; color: var(--texto-3); }
.formulario .botao { grid-column: 1 / -1; justify-self: start; }
.recado { grid-column: 1 / -1; border-radius: var(--raio-controle); padding: var(--e4); font-size: 0.95rem; }
.recado.ruim { background: color-mix(in srgb, var(--erro) 10%, transparent); color: var(--erro); }
.recado.bom { background: color-mix(in srgb, var(--verde) 12%, transparent); color: var(--verde-fundo); }
.recado[hidden] { display: none; }

/* --------------------------------------------------------------- rodapé */
.rodape { background: var(--tinta); color: var(--sobre-escuro); padding-block: var(--e16) var(--e12); }
.rodape a { color: #fff; }
.rodape .grade { align-items: start; }
.rodape h3 { color: #fff; margin-bottom: var(--e3); }
.rodape .miudo { color: var(--sobre-escuro-2); }
.aviso-legal {
  margin-top: var(--e12);
  padding-top: var(--e6);
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: 0.85rem;
  color: var(--sobre-escuro-2);
  max-width: 80ch;
}

/* O vídeo. Moldura igual à das telas, para ele fazer parte da mesma família
   visual em vez de parecer um bloco colado de outro lugar. */
/* A COR AQUI É PARA O TEXTO DE RESERVA. Dentro do `<video>` existe uma frase
   que só aparece em navegador que não abre vídeo, com o link para baixar o
   arquivo. Ela herdava a cor de texto escuro sobre este fundo marinho: 1,01:1,
   ou seja, invisível justamente para quem não tinha outra saída. */
.demonstracao {
  width: 100%;
  height: auto;
  display: block;
  color: var(--sobre-escuro);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--tinta);
  box-shadow: 0 18px 48px rgb(15 27 45 / 12%);
}

/* ------------------------------------------------------------- celular */
@media (max-width: 900px) {
  /* A FOLGA ENTRE O TEXTO E A FOTO ENCOLHE quando a grade vira uma coluna só.
     Empilhados com 64px no meio, o alto da foto ficava exatamente na dobra de
     um iPhone: quem abria o site pelo WhatsApp via o texto e uma faixa de nada
     embaixo, sem pista de que a página continuava. Com 48px, uma tira da foto
     aparece na primeira tela e diz que tem mais coisa para rolar. */
  .heroi .dentro { grid-template-columns: 1fr; gap: var(--e12); }
  .heroi { padding-block: var(--e12) var(--e16); }
  .secao { padding-block: var(--e16); }
  .formulario { padding: var(--e8); }
  .topo a.texto.some-no-celular { display: none; }

  /* NO CELULAR O COMPROVANTE SAI DE CIMA DA FOTO e desce para baixo dela.
     Sobreposto numa tela de 390px ele cobria a foto quase inteira: não se via
     a pessoa nem o documento direito, e o retângulo ficava boiando sobre um
     fundo que ninguém reconhecia. Empilhados, as duas coisas se leem, e a
     margem negativa mantém a ideia de que um saiu do outro. */
  .comprovante {
    /* `relative`, e não `static`: sem contexto de empilhamento próprio, o canto
       arredondado da foto passava POR CIMA do papel branco e cortava a linha do
       NSR ao meio. */
    position: relative;
    z-index: 2;
    /* Os deslocamentos do computador precisam ser DESFEITOS um a um: com
       `position: relative`, o `left: -32px` de lá deixa de posicionar e passa a
       EMPURRAR, e o papel sai pela lateral da tela. */
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    margin: calc(var(--e6) * -1) var(--e4) 0;
  }
}

/* A foto de apoio da seção "Como funciona".

   Ela vem ANTES dos três passos, e não depois: quem chega nessa seção acabou
   de ler que o funcionário registra pelo celular, e a foto responde "com essa cara
   aqui" antes de a pessoa começar a ler a explicação. Depois dos passos, ela
   seria enfeite de fim de seção. */
.foto-de-apoio {
  margin: 0 0 var(--e12);
  border-radius: var(--raio);
  overflow: hidden;
  /* Recorte em faixa: a foto inteira empurraria os três passos para fora da
     primeira tela, e são eles que respondem à pergunta da seção. */
  aspect-ratio: 21 / 9;
}
.foto-de-apoio img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
@media (max-width: 720px) {
  .foto-de-apoio { aspect-ratio: 3 / 2; }
}

/* A FOTO AO LADO DO TEXTO, no bloco "Prefere falar com gente?".

   Ela estava escrita à mão no atributo `style` do HTML, sem proporção nenhuma,
   e era a foto que o dono viu deformada no iPhone. O conserto de verdade é o
   `height: auto` lá em cima; esta classe existe pelos outros dois motivos.

   O PRIMEIRO É O ENQUADRAMENTO. A foto original é larga, com a mulher à
   esquerda e uma parede de escritório à direita. Recortada pelo centro
   geométrico, o assunto do quadro passa a ser a parede. `object-position`
   puxa o corte para o rosto, que é o que a foto tem para dizer.

   O SEGUNDO É A ALTURA. Sem proporção, a foto e a coluna de texto ao lado
   terminavam em alturas diferentes e o bloco ficava torto. Em 4/3 as duas
   colunas fecham juntas, e no celular a faixa 3/2 impede que a foto empurre o
   botão do WhatsApp para fora da tela. */
.foto-lateral {
  margin: 0;
  border-radius: var(--raio);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.foto-lateral img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 38%;
}
@media (max-width: 720px) {
  .foto-lateral { aspect-ratio: 3 / 2; }
}

/* ==================================================================
   O PLANO SUGERIDO DENTRO DO FORMULÁRIO DE CADASTRO

   Acrescentado em 05/09/2026, quando o formulário passou a perguntar quantas
   pessoas vão registrar o ponto. Este bloco é a resposta que aparece enquanto
   a pessoa digita: qual plano atende, e quanto ele custa.

   POR QUE ELE NÃO É UM CARTÃO DE PLANO IGUAL AOS DA TABELA. Os cartões de
   cima são cinco opções lado a lado, e o desenho deles existe para comparar.
   Aqui não há comparação: já foi decidido qual atende. Um cartão com fita,
   lista de recursos e botão faria a pessoa achar que precisa escolher de novo,
   dentro do formulário que ela está preenchendo para escolher.

   POR QUE O FUNDO É O PAPEL, E NÃO O BRANCO DO FORMULÁRIO. Ele precisa se
   destacar do campo que está logo acima sem virar um segundo cartão branco em
   cima de um cartão branco. `--papel` é a mesma ficha do comprovante: o
   vocabulário desta página inteira é o de documento, e este bloco é a
   confirmação do que foi escolhido.

   O número do preço é tabular como todos os outros números da página: preço
   que dança de largura enquanto a pessoa digita parece o site tremendo. */
.plano-sugerido {
  grid-column: 1 / -1;
  background: var(--papel);
  border: 1px solid var(--fio);
  border-radius: var(--raio-controle);
  padding: var(--e4);
  display: grid;
  gap: var(--e1);
}
.plano-sugerido-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1rem;
  color: var(--texto);
  margin: 0;
}
.plano-sugerido-preco {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--marinho);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.plano-sugerido-preco small {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto-2);
}
.plano-sugerido p { margin: 0; }
/* `display: grid` acima vence o `display: none` que o navegador dá ao atributo
   `hidden`, porque classe tem mais peso que regra de folha do navegador. Sem
   esta linha o bloco nasceria VAZIO e VISÍVEL: uma caixa de papel em branco no
   meio do formulário, que parece defeito. */
.plano-sugerido[hidden] { display: none; }

/* O CAMPO DA QUANTIDADE PERDE AS SETINHAS DO NAVEGADOR.
   Elas mudam o número de um em um, o que não serve para ninguém que precise
   digitar 40, e no Safari elas cobrem o fim do campo. O teclado numérico do
   celular continua vindo, porque quem o traz é o `inputmode`, e não a setinha. */
#funcionarios { -moz-appearance: textfield; appearance: textfield; }
#funcionarios::-webkit-outer-spin-button,
#funcionarios::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ==================================================================
   AS PÁGINAS DE TEXTO
   ==================================================================
   Entraram em 06/09/2026, quando o site deixou de ter uma página só. Elas
   respondem a quem chegou por uma busca sobre a norma ("portaria 671",
   "espelho de ponto", "arquivo AFD") e ainda não sabe que este produto existe.

   A REGRA DE OURO AQUI É A LARGURA DA LINHA. A página inicial é feita de
   blocos curtos lado a lado; estas são feitas de parágrafos que a pessoa lê do
   começo ao fim. Linha comprida demais faz o olho perder onde estava ao voltar
   para a esquerda, e quem perde a linha três vezes fecha a aba. `70ch` é a
   medida em que isso para de acontecer, e ela é em `ch` (a largura do
   caractere) e não em pixels: se a fonte mudar de tamanho, a medida acompanha.
   ================================================================== */
.pagina-de-texto { padding-block: var(--e12) var(--e16); }
.pagina-de-texto article { max-width: 70ch; }

/* A trilha do topo. Ela repete no HTML o que o dado estruturado diz ao Google,
   e serve para a mesma coisa dos dois lados: dizer onde a pessoa está e dar o
   caminho de volta em um clique. */
.trilha {
  font-size: 0.85rem;
  color: var(--texto-3);
  margin-bottom: var(--e6);
}
.trilha a { color: var(--texto-2); }
.trilha span { margin-inline: var(--e1); }

.pagina-de-texto h1 { margin-bottom: var(--e4); }
.pagina-de-texto .chamada { margin: 0 0 var(--e4); }
.data-da-pagina {
  margin: 0 0 var(--e12);
  padding-bottom: var(--e6);
  border-bottom: 1px solid var(--borda);
}
.pagina-de-texto h2 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  margin-top: var(--e16);
  margin-bottom: var(--e4);
}
.pagina-de-texto h3 {
  font-size: 1.08rem;
  margin-top: var(--e8);
  margin-bottom: var(--e2);
}
.pagina-de-texto p { margin: 0 0 var(--e4); line-height: 1.7; }
.pagina-de-texto ul, .pagina-de-texto ol { margin: 0 0 var(--e4); padding-left: var(--e6); line-height: 1.7; }
.pagina-de-texto li { margin-bottom: var(--e2); }
.pagina-de-texto a { color: var(--marinho); }

/* O QUADRO DE DESTAQUE, e ele tem um trabalho só: separar o que é a norma do
   que é o produto. Numa página que explica a lei e é assinada por quem vende
   software, misturar as duas coisas é o jeito mais rápido de perder a
   confiança de quem está lendo justamente para se informar. */
.nota {
  border-left: 3px solid var(--verde);
  background: var(--papel);
  padding: var(--e6);
  border-radius: 0 var(--raio) var(--raio) 0;
  margin: var(--e8) 0;
}
.nota > :last-child { margin-bottom: 0; }
.nota strong { color: var(--texto); }

/* A ressalva jurídica, no fim de toda página que fala de norma. Fundo neutro e
   não colorido: ela é para ser lida, não para chamar atenção. */
.pagina-de-texto .aviso-de-pagina {
  margin-top: var(--e16);
  padding-top: var(--e6);
  border-top: 1px solid var(--borda);
  font-size: 0.85rem;
  color: var(--texto-3);
}

/* A tabela dentro do texto herda o desenho do quadro da lei da página inicial,
   e rola de lado no celular pelo mesmo motivo: duas colunas de texto não cabem
   em 390 pixels sem virar uma coluna de letras soltas. */
.pagina-de-texto table { width: 100%; border-collapse: collapse; margin-bottom: var(--e4); }
.pagina-de-texto th, .pagina-de-texto td {
  text-align: left;
  vertical-align: top;
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borda);
  font-size: 0.95rem;
  line-height: 1.6;
}
.pagina-de-texto thead th { color: var(--texto); border-bottom: 2px solid var(--fio); }
.pagina-de-texto tbody th { font-weight: 600; color: var(--texto); }

/* A chamada no pé de toda página interna. Quem chegou por uma busca sobre a
   norma está a um clique de virar cliente; a página que só explica e não
   convida desperdiça a visita mais cara de conseguir. */
.chamada-de-pagina { background: var(--superficie-alta); }
.chamada-de-pagina .cabeca-de-secao { margin-bottom: 0; }
.chamada-de-pagina .heroi-acoes { margin-top: var(--e8); }

/* Quatro colunas no rodapé, desde 06/09/2026, quando entraram as páginas de
   conteúdo. Mesma regra da `.grade.tres`, com a mínima menor: quatro colunas de
   280px não caberiam nos 1180px do contêiner e a quarta cairia sozinha numa
   segunda linha, o que fica pior que quatro colunas um pouco mais estreitas. */
.grade.quatro { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }