/* Página /planos — bloco de qualificação "Para quem o Truesail faz sentido".

   Namespace exclusivo `pq-`: nenhuma classe deste arquivo existe em public.css
   nem nas folhas das outras seções. Mesma razão do `ent-` da folha de /entenda
   — public.css é a folha de TODA a superfície pública, e regra nova ali
   obrigaria a subir o cache-buster do base público, alcançando treze páginas
   para servir uma.

   NENHUM token de cor é declarado aqui. Tudo herda de public.css (`--text`,
   `--muted`, `--dim`, `--border`, `--surface`, `--teal`), que segue a única
   fonte da superfície pública: mexer lá alcança este bloco junto, que é o
   comportamento desejado. Carregada só por planos.html, depois de public.css e
   de site.css. */

/* A largura sai de `.section` (1200px), que a página já usa nas outras seções;
   daqui sai só o respiro vertical. A linha de topo é o mesmo separador que
   `.pricing`, `.cta-section` e a seção de dúvidas usam NESTA página: o bloco
   cai entre um cabeçalho centralizado e um corpo alinhado à esquerda, e sem
   ela as duas vozes encostam. */
.pq {
  border-top: 1px solid var(--border);
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}

/* Medida de leitura própria, bem abaixo dos 1200px do container: o conteúdo é
   texto corrido, e na largura cheia a linha passaria de 200 caracteres. Vale
   para os três parágrafos e para os dois grupos de lista, para que a coluna de
   leitura seja uma só de cima a baixo. */
.pq-lede,
.pq-nota,
.pq-fecho,
.pq-grupo { max-width: 46rem; margin-inline: auto; }

.pq-lede {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 2.25rem;
}

/* Perímetro SEM borda: o grupo se separa do fundo por camada tonal
   (`--surface` sobre o `--bg` do corpo) mais raio, nunca por linha de 1px. */
.pq-grupo {
  background: var(--surface);
  border-radius: 14px;
  padding: 1.75rem 2rem;
}

.pq-sub {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 1rem;
}

.pq-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin: 0;
  padding: 0;
}
.pq-lista li {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
/* Mesma marca de confirmação que `.plan-features` usa nos cards logo abaixo: o
   visitante lê as duas listas na mesma rolagem, e um segundo dialeto de
   marcador para o mesmo papel leria como outra coisa. */
.pq-lista li::before {
  content: '\2713';
  color: var(--teal);
  font-weight: 700;
  flex-shrink: 0;
}
/* A lista de exclusão NÃO usa `--error`: não é erro nem bloqueio, é caso fora
   de escopo. `--dim` deixa o marcador legível sem gritar — vermelho aqui
   acusaria o visitante de estar no lugar errado. */
.pq-lista--nao li::before {
  content: '\00D7';
  color: var(--dim);
}

.pq-nota {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 2rem auto;
}

/* O fecho sai do cinza dos outros parágrafos de propósito: é a única linha do
   bloco que pede uma ação do leitor, e ele fica a uma rolagem dos cards. */
.pq-fecho {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text);
  margin-top: 2rem;
}

@media (max-width: 600px) {
  .pq-grupo { padding: 1.5rem 1.25rem; }
}

/* ============================================================
   Bloco "O que acontece depois da contratação"
   ============================================================
   Prefixo próprio (`impl-`) dentro da mesma folha: `pq-` é do bloco de
   qualificação e este é outro componente. Um prefixo único para a página
   inteira obrigaria quem mexesse num bloco a reler o outro para saber se a
   regra alcança os dois. */

.impl {
  border-top: 1px solid var(--border);
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}

/* Mesma medida de leitura do bloco de qualificação: os dois são texto corrido
   e a coluna tem de ser uma só de cima a baixo da página. */
.impl-lede,
.impl-passos,
.impl-fecho { max-width: 46rem; margin-inline: auto; }

.impl-lede {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 2.25rem;
}

/* Sequência NUMERADA, e não o mesmo marcador do bloco de cima: os seis passos
   acontecem em ordem, e o número é informação, não enfeite.

   Contador próprio em vez de `list-style: decimal` porque o reset global de
   public.css zera o padding de toda lista — com o marcador nativo, que mora
   nesse padding, os números sairiam cortados na borda do container. */
.impl-passos {
  list-style: none;
  counter-reset: passo;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.impl-passos > li {
  counter-increment: passo;
  position: relative;
  padding-left: 2.5rem;
}
/* Numeral em sienna: é marcador de estrutura, do mesmo time do rótulo de seção
   logo acima. Não compete com o teal das listas do bloco de qualificação —
   outro componente, outra forma, sem destaque simultâneo no mesmo lugar. */
.impl-passos > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sienna);
}
.impl-passos p {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--muted);
}
.impl-passos strong {
  color: var(--text);
  font-weight: 700;
}

/* O parágrafo solto do terceiro passo é um caso à parte, não a continuação da
   frase: camada tonal mais respiro o separam sem virar um card dentro do item.
   Especificidade de duas classes vence `.impl-passos p` acima sem `!important`. */
.impl-passos .impl-nota {
  margin-top: .875rem;
  padding: .875rem 1.125rem;
  background: var(--surface);
  border-radius: 10px;
  font-size: .9rem;
}

.impl-fecho {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text);
  margin-top: 2.25rem;
}

@media (max-width: 600px) {
  .impl-passos > li { padding-left: 1.75rem; }
  .impl-passos .impl-nota { padding: .75rem .875rem; }
}

/* ============================================================
   Bloco "Comparativo entre os planos"
   ============================================================ */

.cmp {
  border-top: 1px solid var(--border);
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}
.cmp-lede {
  max-width: 46rem;
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 2.25rem;
}

/* Rótulo só para leitor de tela: o canto vazio do cabeçalho e o significado do
   travessão. `clip-path` além do `clip` porque o segundo está obsoleto e o
   primeiro ainda não é universal — os dois juntos cobrem o parque. */
.cmp-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A rolagem mora na PRÓPRIA tabela, mesmo tratamento de `.ent-artigo table`:
   `width: max-content` com `max-width: 100%` deixa a tabela estreita no tamanho
   natural dela e faz só a larga rolar dentro de si, em vez de empurrar a página
   inteira para o lado. Página que rola na horizontal é defeito conhecido desta
   base. `display: block` é o que habilita a rolagem; `thead` e `tbody` são
   irmãos consecutivos e voltam a formar UMA tabela anônima dentro dela, então
   as colunas seguem alinhadas entre cabeçalho e corpo.

   A tabela mora na coluna de leitura de 46rem, com a mesma borda esquerda da
   etiqueta e do título. Corpo de 14px e respiro lateral de 12px por célula
   são o que a faz caber: 723px medidos em 1440, contra 736 da coluna. Com o
   corpo de 15px ela passava a 783px. `--recuo` é a margem que a coluna
   centrada deixa de cada lado; zera quando o contêiner fica mais estreito que
   a coluna, e aí a tabela volta a 100% com rolagem interna. */
.cmp-tabela {
  --recuo: max(0px, (100% - 46rem) / 2);
  display: block;
  width: max-content;
  margin-inline-start: var(--recuo);
  max-width: min(100%, 46rem);
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .875rem;
  line-height: 1.5;
}
/* Camada tonal marca o cabeçalho, não uma barra de cor: a tabela é leitura, e
   destaque forte aqui rouba a atenção dos cards logo acima. */
.cmp-tabela thead th {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
/* Divisória de linha é interior de conteúdo, não perímetro de card — o que a
   regra de não-linha proíbe é a moldura em volta, não a separação entre linhas
   de dado. */
.cmp-tabela th,
.cmp-tabela td {
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}
.cmp-tabela td {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cmp-tabela tbody th[scope="row"] {
  font-weight: 400;
  color: var(--text);
}
.cmp-tabela tbody tr:last-child th,
.cmp-tabela tbody tr:last-child td { border-bottom: 0; }

/* Faixa de grupo: mesma camada tonal do cabeçalho de coluna, porque é a mesma
   função — estrutura, não dado. */
.cmp-grupo th {
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Recurso ausente no mesmo vocabulário da lista de exclusão do bloco de
   público-alvo: `--dim`, nunca `--error`. Não é erro nem bloqueio, é recurso que
   aquele plano não inclui — vermelho aqui acusaria o plano mais barato. */
.cmp-ausente { color: var(--dim); }

@media (max-width: 600px) {
  /* No estreito a tabela é sempre a peça mais larga da página. Respiro menor
     por célula cabe mais coluna antes de a rolagem começar. O corpo já é de
     14px na regra base e não desce mais. */
  .cmp-tabela th,
  .cmp-tabela td { padding: .5rem .625rem; }
}