/* ===========================================================================
   A FOLHA DAS PÁGINAS PÚBLICAS
   ===========================================================================

   O nome do arquivo continua `home.css` porque ele já está no
   `staticfiles.json`. Trocar por um nome melhor exigiria um caminho estático
   novo, e o `CompressedManifestStaticFilesStorage` derruba a página inteira
   com `ValueError` quando o arquivo apontado ainda não foi coletado. Nome
   feio custa nada; página branca custa a visita.

   O QUE ELE ERA: o CSS da tela de login, que hoje tem estilo próprio inline.
   Todas as regras `.login-*` daqui estavam mortas havia meses. A única viva
   era `.form-group`, usada pelo formulário de assinatura, e ela continua
   existindo mais abaixo.

   A IDEIA DO DESENHO: o produto trata de tempo que chega sozinho, que é
   competência, vencimento e prazo. Então a página é construída sobre a grade
   de um mês. Não como enfeite: a grade é o argumento. O roxo marca o que já
   está feito, o laranja marca o que vence, e nada mais usa laranja. Um acento
   que aparece em todo lugar deixa de significar alguma coisa.

   Carregada DEPOIS do Tailwind, então vence sem precisar de `!important`.
   =========================================================================== */

:root {
  /* A marca. Os mesmos valores do `tarefix-ui.css`, repetidos aqui porque
     esta folha não pode depender da ordem de carga das duas. */
  --roxo:          #4c2882;
  --roxo-escuro:   #3b1f66;
  --roxo-claro:    #5e3d91;
  --roxo-fundo:    #f4f1fa;
  --roxo-linha:    #e0d8f0;

  /* O laranja é SINAL DE PRAZO, nunca decoração. */
  --laranja:       #f7941d;
  --laranja-fundo: #fff6e9;

  --papel:         #ffffff;
  --papel-fundo:   #faf9fc;
  --papel-sutil:   #f2f0f7;
  --tinta:         #171422;
  --tinta-media:   #4b4658;
  --tinta-fraca:   #857f96;
  --linha:         #e7e4ef;
  --linha-forte:   #d3cee0;

  --fonte-titulo: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --fonte-texto:  'Inter', 'Segoe UI', system-ui, sans-serif;
  --fonte-dado:   'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --largura: 1180px;
  --raio:    14px;
  --raio-mini: 8px;
}

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

body.tpx-publica {
  margin: 0;
  background: var(--papel-fundo);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.tpx-publica * { box-sizing: border-box; }
.tpx-publica img { max-width: 100%; height: auto; }

.tpx-faixa {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}

/* O PULO PARA O CONTEÚDO. Invisível até receber foco pelo teclado, que é
   quando ele passa a ser a coisa mais importante da tela. */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  background: var(--roxo);
  color: #fff;
  border-radius: 0 0 var(--raio-mini) 0;
  font-weight: 600;
  text-decoration: none;
}
.pular-para-conteudo:focus { left: 0; }

/* --- Tipografia ---------------------------------------------------------- */

.tpx-publica h1, .tpx-publica h2, .tpx-publica h3 {
  font-family: var(--fonte-titulo);
  color: var(--tinta);
  margin: 0;
  text-wrap: balance;
}

/* O TÍTULO GIGANTE. `clamp` com 8vw no meio: no telefone ele encolhe até
   caber, no monitor grande ele para de crescer antes de virar cartaz de
   estrada. A entrelinha abaixo de 1 é o que dá o bloco compacto; com o
   padrão, duas linhas de 6rem ficariam com um vão no meio. */
.tpx-titulo-gigante {
  font-size: clamp(2.4rem, 6.4vw, 5.2rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.035em;
}
.tpx-titulo-secao {
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.tpx-titulo-bloco {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
}

/* O RÓTULO em monoespaçada é a assinatura tipográfica da página: repete em
   toda seção e é o que amarra o conjunto. */
.tpx-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fonte-dado);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--roxo);
}
.tpx-rotulo::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--laranja);
}
.tpx-rotulo--claro { color: rgba(255, 255, 255, .74); }

.tpx-apoio {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--tinta-media);
  max-width: 62ch;
}
.tpx-apoio--claro { color: rgba(255, 255, 255, .74); }

/* --- Botões -------------------------------------------------------------- */

.tpx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--fonte-texto);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.tpx-btn--cheio {
  background: var(--roxo);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(76, 40, 130, .8);
}
.tpx-btn--cheio:hover {
  background: var(--roxo-escuro);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -14px rgba(76, 40, 130, .9);
}
.tpx-btn--fantasma {
  background: transparent;
  color: var(--tinta-media);
  border-color: var(--linha-forte);
}
.tpx-btn--fantasma:hover { color: var(--roxo); border-color: var(--roxo); }
.tpx-btn--claro { background: #fff; color: var(--roxo); }
.tpx-btn--claro:hover { background: #fff; color: var(--roxo-escuro); transform: translateY(-1px); }
.tpx-btn--grande { padding: 17px 30px; font-size: 17px; }
.tpx-btn:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }

/* --- A barra do topo ----------------------------------------------------- */

.tpx-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 14px max(24px, calc((100vw - var(--largura)) / 2 + 24px));
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}
/* Sobre o herói ela flutua; assim que a página rola, ganha chão. Sem isso o
   texto passa por baixo dos links e os dois ficam ilegíveis ao mesmo tempo. */
.tpx-nav.e-rolada {
  background: rgba(250, 249, 252, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--linha);
}
.tpx-nav-marca { display: inline-flex; align-items: center; flex: none; }
.tpx-nav-marca img { height: 34px; width: auto; display: block; }

.tpx-nav-links { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.tpx-nav-links a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--tinta-media);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.tpx-nav-links a:hover { background: var(--roxo-fundo); color: var(--roxo); }

.tpx-nav-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.tpx-nav-sanduiche {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-mini);
  background: var(--papel);
  color: var(--roxo);
  font-size: 18px;
  cursor: pointer;
}

.tpx-nav-movel {
  position: sticky;
  top: 62px;
  z-index: 59;
  display: flex;
  flex-direction: column;
  padding: 8px 24px 18px;
  background: rgba(250, 249, 252, .97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
}
.tpx-nav-movel a {
  padding: 13px 4px;
  color: var(--tinta);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
}
.tpx-nav-movel a:last-child { border: 0; margin-top: 12px; justify-content: center; }
.tpx-nav-movel.hidden { display: none; }

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

.tpx-rodape {
  padding: 56px 24px 32px;
  background: var(--roxo-escuro);
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
}
.tpx-rodape-corpo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  max-width: var(--largura);
  margin: 0 auto;
}
.tpx-rodape-marca { display: flex; flex-direction: column; gap: 4px; }
.tpx-rodape-marca b {
  font-family: var(--fonte-titulo);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}
.tpx-rodape-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.tpx-rodape-links a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.tpx-rodape-links a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.tpx-rodape-fim {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--largura);
  margin: 30px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--fonte-dado);
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .5);
}

/* ===========================================================================
   O HERÓI
   ===========================================================================
   O canvas fica ATRÁS do texto e é decorativo: se o script não rodar, resta
   um degradê e a página continua inteira. Nenhuma palavra depende dele.
   =========================================================================== */

.tpx-heroi {
  position: relative;
  isolation: isolate;
  padding: clamp(48px, 9vw, 104px) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.tpx-heroi-fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 78% 8%, var(--roxo-fundo) 0%, transparent 60%),
    radial-gradient(90% 60% at 8% 100%, var(--laranja-fundo) 0%, transparent 55%),
    var(--papel-fundo);
}
.tpx-heroi-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .92;
}

.tpx-heroi-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}

.tpx-heroi h1 { margin: 18px 0 0; }
/* A SEGUNDA LINHA DO TÍTULO É A PROMESSA, e por isso é a única em roxo. */
.tpx-heroi h1 em { font-style: normal; color: var(--roxo); }

.tpx-heroi-apoio { margin-top: 22px; }
.tpx-heroi-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.tpx-heroi-selo {
  margin-top: 16px;
  font-size: 14px;
  color: var(--tinta-fraca);
}

/* --- A faixa das siglas -------------------------------------------------- */
/* O contador reconhece todas. A faixa lê como a enxurrada que ele vive, e é
   por isso que ela corre sem parar: o mês não para. Animação de CSS pura,
   então continua rodando mesmo se nenhum script carregar. */

.tpx-faixa-siglas {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
  padding: 14px 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  background: var(--papel);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tpx-faixa-trilho {
  display: flex;
  width: max-content;
  animation: tpx-correr 42s linear infinite;
}
.tpx-faixa-trilho:hover { animation-play-state: paused; }
.tpx-faixa-grupo {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
}
.tpx-faixa-grupo span {
  font-family: var(--fonte-dado);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.tpx-faixa-grupo span::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 34px;
  border-radius: 50%;
  background: var(--laranja);
  vertical-align: middle;
}
@keyframes tpx-correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- O cartão do mês, ao lado do título ---------------------------------- */

.tpx-mes {
  padding: 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 30px 70px -34px rgba(23, 20, 34, .4);
}
.tpx-mes-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.tpx-mes-nome {
  font-family: var(--fonte-titulo);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.tpx-mes-conta { font-family: var(--fonte-dado); font-size: 12px; color: var(--tinta-fraca); }

.tpx-mes-semana,
.tpx-mes-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tpx-mes-semana {
  margin-bottom: 6px;
  font-family: var(--fonte-dado);
  font-size: 11px;
  color: var(--tinta-fraca);
  text-align: center;
}
.tpx-dia {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--papel);
  font-family: var(--fonte-dado);
  font-size: 12px;
  color: var(--tinta-fraca);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.tpx-dia.e-vazio { border-color: transparent; background: transparent; }
/* Feito: roxo. Vence: laranja. São os dois únicos estados, e é essa economia
   que faz a legenda ser lida uma vez e valer para a página inteira. */
.tpx-dia.e-feito {
  background: var(--roxo);
  border-color: var(--roxo);
  color: #fff;
}
.tpx-dia.e-vence {
  background: var(--laranja-fundo);
  border-color: var(--laranja);
  color: #8a5200;
  font-weight: 700;
}
.tpx-mes-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--tinta-fraca);
}
.tpx-mes-legenda i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: -1px;
}
.tpx-mes-legenda .e-roxo { background: var(--roxo); }
.tpx-mes-legenda .e-laranja { background: var(--laranja); border: 1px solid var(--laranja); }

/* ===========================================================================
   A VIRADA DA COMPETÊNCIA
   ===========================================================================
   O único trecho escuro da página, e é de propósito: é o momento em que a
   promessa acontece. A seção se fixa e a rolagem preenche o mês.

   SE O SCRIPT NÃO RODAR, a grade nasce preenchida e o texto continua fazendo
   sentido. O movimento explica mais rápido; ele não é a explicação.
   =========================================================================== */

.tpx-virada {
  position: relative;
  background: var(--roxo-escuro);
  color: #fff;
  overflow: clip;
}
.tpx-virada::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 70% 0%, rgba(94, 61, 145, .8) 0%, transparent 60%);
  pointer-events: none;
}
.tpx-virada-palco {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 110px) 24px;
}
.tpx-virada h2 { color: #fff; margin-top: 16px; }

/* O CONTADOR. Números tabulares porque ele muda depressa: sem isso a largura
   dança a cada quadro e a linha inteira treme. */
.tpx-virada-conta {
  margin-top: 26px;
  font-family: var(--fonte-titulo);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--laranja);
}
.tpx-virada-conta small {
  display: block;
  margin-top: 8px;
  font-family: var(--fonte-texto);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .7);
}

.tpx-virada-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--raio);
  background: rgba(0, 0, 0, .18);
}
.tpx-celula {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  font-family: var(--fonte-dado);
  font-size: 12px;
  color: rgba(255, 255, 255, .45);
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.tpx-celula.e-acesa {
  background: var(--roxo-claro);
  border-color: var(--roxo-claro);
  color: #fff;
}
.tpx-celula.e-prazo {
  background: var(--laranja);
  border-color: var(--laranja);
  color: #2b1a00;
  font-weight: 700;
}

/* ===========================================================================
   RECURSOS, com o produto à vista
   ===========================================================================
   Eram nove cartões iguais. Nove cartões iguais são uma parede: quem chega
   lê dois, entende que são todos parecidos e rola até o fim sem ler nenhum.
   Agora são quatro blocos grandes, cada um com a tela de verdade ao lado.
   =========================================================================== */

.tpx-secao { padding: clamp(56px, 8vw, 104px) 0; }
.tpx-secao--papel { background: var(--papel); }
.tpx-secao-cabeca { max-width: var(--largura); margin: 0 auto 48px; padding: 0 24px; }
.tpx-secao-cabeca h2 { margin-top: 14px; }
.tpx-secao-cabeca .tpx-apoio { margin-top: 16px; }

.tpx-blocos {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 7vw, 92px);
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}
.tpx-bloco {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
/* Alterna o lado a cada bloco. Quatro blocos com a imagem sempre à direita
   viram uma coluna de texto com enfeites; alternando, o olho atravessa. */
.tpx-bloco:nth-child(even) .tpx-bloco-texto { order: 2; }
.tpx-bloco-numero {
  font-family: var(--fonte-dado);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--tinta-fraca);
}
.tpx-bloco h3 { margin: 10px 0 14px; }
.tpx-bloco p { margin: 0; color: var(--tinta-media); }
.tpx-bloco-lista {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.tpx-bloco-lista li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  color: var(--tinta-media);
}
.tpx-bloco-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--roxo);
}

/* A MOLDURA DA TELA. O print é de um navegador, então a moldura repete um
   navegador: sem a barra de cima ele lê como imagem solta, e com ela lê como
   "isto é o produto rodando". */
.tpx-tela {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
  box-shadow: 0 40px 80px -40px rgba(23, 20, 34, .45);
  overflow: hidden;
}
.tpx-tela-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--papel-sutil);
  border-bottom: 1px solid var(--linha);
}
.tpx-tela-barra i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--linha-forte);
}
.tpx-tela-barra span {
  margin-left: 10px;
  font-family: var(--fonte-dado);
  font-size: 11px;
  color: var(--tinta-fraca);
}
.tpx-tela img { display: block; width: 100%; }

/* ===========================================================================
   PASSOS, SEGURANÇA E CHAMADA FINAL
   =========================================================================== */

.tpx-passos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}
.tpx-passo {
  position: relative;
  padding: 30px 26px 28px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
}
/* O número grande é o ritmo da seção. Fica atrás do texto, em roxo bem
   diluído: ele ordena sem competir com o que precisa ser lido. */
.tpx-passo-n {
  position: absolute;
  top: 8px;
  right: 18px;
  font-family: var(--fonte-titulo);
  font-size: 74px;
  font-weight: 900;
  line-height: 1;
  color: var(--roxo);
  opacity: .09;
  pointer-events: none;
}
.tpx-passo h3 { margin: 0 0 10px; font-size: 1.2rem; }
.tpx-passo p { margin: 0; font-size: 15px; color: var(--tinta-media); }

.tpx-seguranca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}
.tpx-seguranca-itens {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tpx-seguranca-itens li {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-mini);
  background: var(--papel);
  font-size: 15px;
  color: var(--tinta-media);
}
.tpx-seguranca-itens b { color: var(--tinta); }
.tpx-seguranca-itens i { color: var(--roxo); font-size: 17px; margin-top: 2px; }

/* O endereço do escritório, escrito como endereço. É a prova visual do
   isolamento por cliente, e vale mais que a frase que o explica. */
.tpx-endereco {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 18px;
  padding: 12px 16px;
  border: 1px dashed var(--roxo-linha);
  border-radius: var(--raio-mini);
  background: var(--roxo-fundo);
  font-family: var(--fonte-dado);
  font-size: clamp(13px, 1.6vw, 16px);
  color: var(--roxo);
}
.tpx-endereco b { font-weight: 700; color: var(--roxo-escuro); }
.tpx-endereco span { color: var(--tinta-fraca); }

.tpx-final {
  position: relative;
  margin: 0;
  padding: clamp(56px, 9vw, 110px) 24px;
  background: var(--roxo);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.tpx-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 0%, rgba(247, 148, 29, .22) 0%, transparent 60%);
  pointer-events: none;
}
.tpx-final-corpo { position: relative; max-width: 760px; margin: 0 auto; }
.tpx-final h2 { color: #fff; margin: 16px 0 0; }
.tpx-final .tpx-apoio { margin: 18px auto 0; text-align: center; }
.tpx-final-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.tpx-final-selo {
  margin-top: 16px;
  font-family: var(--fonte-dado);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .6);
}

/* ===========================================================================
   A TELA DE PLANOS
   ===========================================================================
   Redesenho de apresentação apenas. Todo `id`, todo `name` e todo `data-`
   continuam como estavam: é por esta tela que entra dinheiro, e o formulário
   tem partes móveis demais (documento, subdomínio, cupom, Turnstile) para
   trocar de roupa e de mecânica no mesmo dia.
   =========================================================================== */

.tpx-planos-topo {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) 24px clamp(28px, 4vw, 44px);
  text-align: center;
}
.tpx-planos-topo h1 { margin-top: 14px; }
.tpx-planos-topo .tpx-apoio { margin: 18px auto 0; }
.tpx-planos-topo .grad { color: var(--roxo); }

#grade-planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
  align-items: stretch;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
  text-align: left;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.plan-card:hover {
  border-color: var(--roxo-linha);
  transform: translateY(-3px);
  box-shadow: 0 26px 54px -30px rgba(23, 20, 34, .4);
}
/* O DESTAQUE TEM PESO DE VERDADE. Antes era uma borda um pouco mais escura,
   que ninguém enxergava; o plano recomendado precisa ganhar a disputa no
   primeiro olhar, senão o selo "popular" está mentindo. */
.plan-card.destaque-visual {
  border-color: var(--roxo);
  box-shadow: 0 0 0 1px var(--roxo), 0 30px 60px -34px rgba(76, 40, 130, .6);
}
.plan-card.selecionado {
  border-color: var(--roxo);
  box-shadow: 0 0 0 2px var(--roxo);
}
.selo-popular {
  position: absolute;
  top: -11px;
  left: 26px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--laranja);
  color: #2b1a00;
  font-family: var(--fonte-dado);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.plan-card h3 {
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 4px;
}
.plan-card .plan-sub { margin: 0 0 22px; font-size: 14px; color: var(--tinta-fraca); }
.plan-preco {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--fonte-titulo);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--tinta);
}
.plan-preco .moeda { font-size: 1.1rem; font-weight: 700; color: var(--tinta-fraca); }
.plan-preco .inteiro { font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; }
.plan-preco .centavos { font-size: 1.2rem; font-weight: 700; }
/* "POR MÊS" NUMA LINHA PRÓPRIA, sempre. Ao lado do número ele quebrava em
   "por / mês" nos cartões mais estreitos, e só neles: o preço ficava
   desalinhado de um cartão para o outro justamente na hora em que a pessoa
   está comparando os três. */
.plan-preco {
  flex-wrap: wrap;
  row-gap: 2px;
}
.plan-preco .por-mes {
  flex-basis: 100%;
  margin-left: 2px;
  font-family: var(--fonte-texto);
  font-size: 14px;
  font-weight: 500;
  color: var(--tinta-fraca);
}
.plan-preco--contato { font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--roxo); }
.plan-features {
  margin: 22px 0 24px;
  padding: 22px 0 0;
  border-top: 1px solid var(--linha);
  list-style: none;
  display: grid;
  gap: 11px;
  flex-grow: 1;
}
.plan-features li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--tinta-media);
}
.plan-features li i {
  position: absolute;
  left: 0;
  top: .2em;
  color: var(--roxo);
  font-size: 15px;
}
.plan-escolher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--papel-sutil);
  color: var(--roxo);
  font-size: 15px;
  font-weight: 600;
  transition: background .18s ease, color .18s ease;
}
.plan-card:hover .plan-escolher,
.plan-card.destaque-visual .plan-escolher { background: var(--roxo); color: #fff; }

/* --- O formulário de assinatura ------------------------------------------ */

.tpx-form-caixa {
  max-width: 720px;
  margin: clamp(40px, 6vw, 72px) auto 0;
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
  box-shadow: 0 30px 70px -40px rgba(23, 20, 34, .35);
  text-align: left;
}
.tpx-form-cabeca { margin-bottom: 26px; }
.tpx-form-cabeca h2 { font-size: 1.6rem; margin: 10px 0 8px; }
.tpx-form-cabeca p { margin: 0; font-size: 15px; color: var(--tinta-media); }

/* O FORMULÁRIO RESPIRA EM ETAPAS. Era um bloco só de doze campos, e um bloco
   só de doze campos é uma parede: quem chega decide se vai preencher antes de
   ler o primeiro rótulo. */
.tpx-form-etapa {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--linha);
}
.tpx-form-etapa:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.tpx-form-etapa-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--fonte-dado);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.tpx-form-etapa-titulo b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--roxo-fundo);
  color: var(--roxo);
  font-size: 12px;
}

.tpx-form-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* `.form-group` É A ÚNICA CLASSE QUE SOBREVIVEU da folha antiga, e ela
   sobrevive porque o formulário de assinatura a usa dezenove vezes. Perdeu o
   recuo de 2.5rem que existia para um ícone que este formulário nunca teve. */
.form-group { position: relative; margin-bottom: 16px; }
.form-group:last-child { margin-bottom: 0; }

.tpx-publica label,
.tpx-publica .rotulo-campo {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
}
.tpx-publica .form-control,
.tpx-publica input[type="text"],
.tpx-publica input[type="email"],
.tpx-publica input[type="password"],
.tpx-publica input[type="tel"],
.tpx-publica input[type="number"],
.tpx-publica textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-mini);
  background: var(--papel);
  font-family: var(--fonte-texto);
  font-size: 16px;   /* 16px impede o iPhone de dar zoom ao focar o campo */
  color: var(--tinta);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.tpx-publica .form-control:focus,
.tpx-publica input:focus,
.tpx-publica textarea:focus {
  outline: none;
  border-color: var(--roxo);
  box-shadow: 0 0 0 3px var(--roxo-fundo);
}
.tpx-publica small { font-size: 13px; }

/* A escolha entre empresa e pessoa: dois alvos grandes, e não dois botões de
   rádio de 13px que o dedo erra. */
.tpx-tipo-pessoa { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tpx-publica label.tpx-tipo-opcao {
  display: flex;
  margin-bottom: 0;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-mini);
  background: var(--papel);
  cursor: pointer;
  font-weight: 600;
  color: var(--tinta-media);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.tpx-tipo-opcao:hover { border-color: var(--roxo-linha); }

/* O ESTADO SEGUE O RÁDIO, e não uma classe posta à mão no HTML.

   Estava escrito `class="... ativo"` fixo na opção de empresa: quem escolhia
   pessoa física via o campo trocar de CNPJ para CPF e a opção de empresa
   continuar acesa. `:has()` lê o rádio de verdade, que é quem sabe a
   resposta, e o mesmo seletor cobre o carregamento, o clique e o teclado.

   A especificidade precisa alcançar `.tpx-publica label.tpx-tipo-opcao`, que
   é quem pinta a borda e o fundo no estado de repouso. Sem os três níveis
   aqui, o repouso ganharia e o ativo não apareceria. */
.tpx-publica label.tpx-tipo-opcao.ativo,
.tpx-publica label.tpx-tipo-opcao:has(input:checked) {
  border-color: var(--roxo);
  background: var(--roxo-fundo);
  color: var(--roxo);
}
.tpx-tipo-opcao i { font-size: 17px; }

.tpx-sub-campo { display: flex; align-items: stretch; }
.tpx-sub-campo input { border-radius: var(--raio-mini) 0 0 var(--raio-mini); text-align: right; }
.tpx-sub-sufixo {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--linha-forte);
  border-left: 0;
  border-radius: 0 var(--raio-mini) var(--raio-mini) 0;
  background: var(--papel-sutil);
  font-family: var(--fonte-dado);
  font-size: 14px;
  color: var(--tinta-fraca);
  white-space: nowrap;
}

.tpx-publica label.tpx-aceite {
  display: flex;
  margin-bottom: 0;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--tinta-media);
}
.tpx-aceite a { color: var(--roxo); }

.tpx-form-envio { width: 100%; margin-top: 8px; }

/* ===========================================================================
   RESPONSIVO
   =========================================================================== */

@media (max-width: 980px) {
  .tpx-heroi-corpo,
  .tpx-virada-palco,
  .tpx-bloco,
  .tpx-seguranca { grid-template-columns: minmax(0, 1fr); }
  .tpx-bloco:nth-child(even) .tpx-bloco-texto { order: 0; }
  .tpx-passos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .tpx-nav-links, .tpx-nav-acoes { display: none; }
  .tpx-nav-sanduiche { display: grid; place-items: center; }
  .tpx-nav { padding-left: 20px; padding-right: 20px; }
}

@media (min-width: 861px) {
  .tpx-nav-movel { display: none; }
}

@media (max-width: 620px) {
  body.tpx-publica { font-size: 16px; }
  .tpx-form-dupla, .tpx-tipo-pessoa { grid-template-columns: minmax(0, 1fr); }
  .tpx-rodape-fim { flex-direction: column; gap: 6px; }
  .tpx-mes { padding: 16px; }
}

/* ===========================================================================
   MOVIMENTO REDUZIDO
   ===========================================================================
   Quem pediu para o sistema parar de mexer não deve perder nada: tudo o que
   é animado nasce no estado final, e só o movimento some.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tpx-publica *,
  .tpx-publica *::before,
  .tpx-publica *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .tpx-faixa-trilho { animation: none; }
  .tpx-heroi-canvas { display: none; }
}

/* --- A fixação da virada -------------------------------------------------- */
/* A SEÇÃO SE FIXA POR `sticky`, NÃO POR SCRIPT. Um trilho alto por fora e um
   palco grudado por dentro: se nenhum script rodar, a seção continua sendo
   uma seção comum e o trecho alto vira apenas espaço. Fixar por JS custaria
   medir altura, travar o corpo e devolver tudo no fim, e é assim que uma
   página trava a rolagem de alguém no meio do argumento. */
.tpx-virada-trilho { height: 260vh; }
.tpx-virada-palco {
  position: sticky;
  top: 0;
  min-height: 100vh;
  align-content: center;
}
/* No telefone o palco fixo custa mais do que entrega: a grade fica pequena e
   a pessoa rola duas telas e meia para ver uma animação. Vira seção comum. */
@media (max-width: 980px) {
  .tpx-virada-trilho { height: auto; }
  .tpx-virada-palco { position: static; min-height: 0; }
}

/* As células só nascem apagadas quando existe script para acendê-las. Sem
   ele, a grade chega pronta e o texto continua verdadeiro. */
.tpx-virada.js-ativo .tpx-celula {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .45);
}
.tpx-virada.js-ativo .tpx-celula.e-acesa {
  background: var(--roxo-claro);
  border-color: var(--roxo-claro);
  color: #fff;
}
.tpx-virada.js-ativo .tpx-celula.e-prazo {
  background: var(--laranja);
  border-color: var(--laranja);
  color: #2b1a00;
}

/* AS DUAS FRASES SAO SEMPRE LINHAS SEPARADAS. O `display: block` nao pode
   depender do script: sem ele as frases se juntavam e a quebra caia em
   qualquer lugar, deixando uma palavra solta no fim da linha.
   O `overflow: hidden`, que recorta a entrada, esse sim so existe quando ha
   quem anime. */
.tpx-linha-monta { display: block; }
.js-monta .tpx-linha-monta { overflow: hidden; }

/* --- Peças soltas da tela de planos -------------------------------------- */

.tpx-planos-nota {
  max-width: 640px;
  margin: 26px auto 0;
  padding: 0 24px;
  text-align: center;
  font-size: 14px;
  color: var(--tinta-fraca);
}
.tpx-planos-nota b { color: var(--tinta-media); }

/* O CUPOM ATRÁS DE UM LINK, e não num campo sempre aberto: campo de cupom à
   mostra faz quem não tem um sentir que está pagando caro, e sair da página
   para procurar um. */
.tpx-link-cupom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--fonte-texto);
  font-size: 14px;
  font-weight: 600;
  color: var(--roxo);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tpx-link-cupom:hover { color: var(--roxo-escuro); }
#bloco-cupom { margin-top: 12px; }

.tpx-form-selo {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--tinta-fraca);
}

/* O selo do plano em destaque sobe um pouco a mais quando o cartão é o
   primeiro da fileira, para não encostar na borda do bloco. */
#grade-planos .plan-card { margin-top: 11px; }

/* ===========================================================================
   A TELA DE PLANOS: o topo vivo e o seletor de tamanho
   =========================================================================== */

.tpx-planos-heroi {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.tpx-planos-heroi .tpx-heroi-fundo { position: absolute; inset: 0; z-index: -1; }
.tpx-planos-heroi .tpx-heroi-canvas { position: absolute; inset: 0; z-index: -1; }

/* O SELETOR DE TAMANHO. O plano aqui é vendido por número de usuários, e a
   pergunta que o visitante faz primeiro não é "quanto custa", é "qual é o
   meu". Antes ele tinha de comparar três cartões para descobrir; agora ele
   diz quantas pessoas são e o cartão certo se acende. */
.tpx-tamanho {
  max-width: 620px;
  margin: 0 auto;
  padding: 24px 26px 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
  box-shadow: 0 20px 50px -30px rgba(23, 20, 34, .3);
  text-align: left;
}
.tpx-tamanho-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.tpx-tamanho-titulo { font-size: 15px; font-weight: 600; color: var(--tinta); }
.tpx-tamanho-valor {
  font-family: var(--fonte-titulo);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--roxo);
  font-variant-numeric: tabular-nums;
}
.tpx-tamanho-valor small {
  margin-left: 6px;
  font-family: var(--fonte-texto);
  font-size: 14px;
  font-weight: 500;
  color: var(--tinta-fraca);
}

/* O controle nativo, vestido. Um deslizador desenhado à mão perderia o
   teclado, o leitor de tela e o toque longo do celular. */
.tpx-tamanho input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--roxo) var(--preenchido, 0%), var(--papel-sutil) var(--preenchido, 0%));
  cursor: pointer;
}
.tpx-tamanho input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--roxo);
  box-shadow: 0 2px 10px rgba(76, 40, 130, .5);
  cursor: grab;
}
.tpx-tamanho input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--roxo);
  box-shadow: 0 2px 10px rgba(76, 40, 130, .5);
  cursor: grab;
}
.tpx-tamanho input[type="range"]:focus-visible { outline: 3px solid var(--laranja); outline-offset: 4px; }
.tpx-tamanho-escala {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--fonte-dado);
  font-size: 11px;
  color: var(--tinta-fraca);
}
.tpx-tamanho-dica {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--tinta-media);
}
.tpx-tamanho-dica b { color: var(--roxo); }

/* O CARTÃO RECOMENDADO ganha o anel; os outros recuam. Recuar é o que faz o
   recomendado aparecer: se todos continuassem no mesmo peso, acender um não
   diria nada. */
#grade-planos.tem-recomendado .plan-card { opacity: .55; transform: scale(.985); }
#grade-planos.tem-recomendado .plan-card.recomendado {
  opacity: 1;
  transform: scale(1);
  border-color: var(--roxo);
  box-shadow: 0 0 0 2px var(--roxo), 0 30px 60px -34px rgba(76, 40, 130, .55);
}
.plan-card { transition: opacity .25s ease, transform .25s ease, border-color .18s ease, box-shadow .18s ease; }
.selo-recomendado {
  position: absolute;
  top: -11px;
  right: 20px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--roxo);
  color: #fff;
  font-family: var(--fonte-dado);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.plan-card.recomendado .selo-recomendado { opacity: 1; transform: translateY(0); }

/* A TARJA DO PLANO ESCOLHIDO, no alto do formulário. Sem ela o campo do
   plano é escondido, e quem rolou até aqui perdeu de vista o que escolheu:
   preenchia doze campos sem confirmação nenhuma de que era o plano certo. */
.tpx-plano-escolhido {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding: 14px 18px;
  border: 1px solid var(--roxo-linha);
  border-radius: var(--raio-mini);
  background: var(--roxo-fundo);
}
.tpx-plano-escolhido i { color: var(--roxo); font-size: 18px; }
.tpx-plano-escolhido-corpo { flex: 1; min-width: 0; }
.tpx-plano-escolhido-nome { font-weight: 700; color: var(--roxo-escuro); }
.tpx-plano-escolhido-preco { font-size: 14px; color: var(--tinta-media); }
.tpx-plano-escolhido a {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--roxo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* DOIS SELOS NO MESMO CARTÃO SE ATROPELAM. "Mais popular" é o argumento
   genérico, escrito no BackOffice para todo mundo; "para o seu tamanho" é a
   resposta à pergunta que a pessoa acabou de fazer no seletor. Quando os
   dois valem, o segundo ganha, e o primeiro sai de cena. */
.plan-card.recomendado .selo-popular { opacity: 0; transform: translateY(-4px); }
.selo-popular { transition: opacity .2s ease, transform .2s ease; }

/* Os cartões que não são o recomendado recuam, mas continuam legíveis: a
   pessoa está comparando preços, e apagar demais transforma a recomendação
   em imposição. */
#grade-planos.tem-recomendado .plan-card { opacity: .72; }

/* --- Retoques de celular -------------------------------------------------- */

@media (max-width: 620px) {
  /* Dois botões de larguras diferentes, empilhados, parecem dois pesos
     diferentes de decisão. Empilhados eles ficam do mesmo tamanho. */
  .tpx-heroi-acoes, .tpx-final-acoes { flex-direction: column; align-items: stretch; }
  .tpx-heroi-acoes .tpx-btn, .tpx-final-acoes .tpx-btn { width: 100%; }
}

/* NO CELULAR OS CARTÕES NÃO RECUAM. Apagar os outros só ajuda quando eles
   estão lado a lado e o olho compara; empilhados, a pessoa vê um por vez, e
   o que ela encontra é um cartão desbotado sem nada ao lado para explicar
   por quê. O anel do recomendado continua, que é o sinal que importa. */
@media (max-width: 980px) {
  #grade-planos.tem-recomendado .plan-card { opacity: 1; transform: none; }
  #grade-planos.tem-recomendado .plan-card.recomendado { transform: none; }
}

/* ===========================================================================
   AS DUAS CLASSES QUE FALTAVAM DO TAILWIND
   ===========================================================================
   A home e a tela de planos dispensaram a folha de 2,9 MB do CDN, e destas
   duas classes elas ainda precisam. `hidden` é o que o script usa para
   fechar o menu do celular e o campo de CPF; `sr-only` esconde os botões de
   rádio de verdade sem tirá-los do teclado nem do leitor de tela.
   =========================================================================== */

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

/* ===========================================================================
   AS PÁGINAS DE CONTEÚDO
   ===========================================================================
   Dúvidas, Termos, Privacidade, Novidades e a espera do cadastro. Elas eram
   cinco ilhas: cada uma com a própria folha inline, o próprio cabeçalho e a
   própria ideia de o que é um título. Agora dividem o mesmo topo, a mesma
   coluna de leitura e a mesma tipografia da vitrine.

   SEM CANVAS AQUI. O topo delas usa só o degradê: a grade viva é a assinatura
   da home e da tela de planos, e repetir em toda página a transformaria em
   papel de parede.
   =========================================================================== */

.tpx-topo-conteudo {
  position: relative;
  padding: clamp(36px, 6vw, 72px) 24px clamp(28px, 4vw, 48px);
  background:
    radial-gradient(100% 80% at 80% 0%, var(--roxo-fundo) 0%, transparent 62%),
    radial-gradient(70% 60% at 0% 100%, var(--laranja-fundo) 0%, transparent 55%),
    var(--papel-fundo);
  border-bottom: 1px solid var(--linha);
}
.tpx-topo-conteudo-corpo { max-width: var(--largura); margin: 0 auto; }
/* O topo acompanha a largura do corpo de cada página. Sem isto o título
   nasce na margem e o texto começa bem mais para dentro, e a página lê como
   dois documentos empilhados. */
.tpx-topo-conteudo--duvidas .tpx-topo-conteudo-corpo { max-width: 860px; }
.tpx-topo-conteudo--prosa .tpx-topo-conteudo-corpo { max-width: 68ch; }
.tpx-topo-conteudo h1 { margin: 14px 0 0; }
.tpx-topo-conteudo .tpx-apoio { margin-top: 14px; }

/* O caminho de volta. Fica ACIMA do título, onde o olho começa, e não no pé
   da página: quem quer voltar decide isso antes de ler, não depois. */
.tpx-voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta-fraca);
  text-decoration: none;
}
.tpx-voltar:hover { color: var(--roxo); }
/* O VOLTAR OCUPA A LINHA DELE. Como `inline-flex` ele emendava com o rótulo
   da seção, e os dois liam como uma coisa só: "Voltar ao site DOCUMENTO". */
.tpx-topo-conteudo-corpo .tpx-voltar {
  display: flex;
  width: fit-content;
  margin-bottom: 20px;
}

.tpx-meta {
  margin-top: 16px;
  font-family: var(--fonte-dado);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--tinta-fraca);
}

/* --- A coluna de leitura -------------------------------------------------- */
/* 68ch é o teto do texto corrido. Um contrato numa coluna de 1180px obriga o
   olho a atravessar a tela e voltar a cada linha, e é assim que uma pessoa
   desiste de ler o que assinou. */
.tpx-prosa {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) 24px clamp(48px, 7vw, 80px);
  color: var(--tinta-media);
}
.tpx-prosa h2 {
  margin: 44px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--tinta);
}
.tpx-prosa h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.tpx-prosa h3 {
  margin: 26px 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tinta);
}
.tpx-prosa p { margin: 0 0 14px; }
.tpx-prosa ul, .tpx-prosa ol { margin: 0 0 16px; padding-left: 22px; }
.tpx-prosa li { margin-bottom: 7px; }
.tpx-prosa a { color: var(--roxo); font-weight: 600; }
.tpx-prosa strong, .tpx-prosa b { color: var(--tinta); }
.tpx-prosa table {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
  font-size: 15px;
}
.tpx-prosa th, .tpx-prosa td {
  padding: 10px 12px;
  border: 1px solid var(--linha);
  text-align: left;
  vertical-align: top;
}
.tpx-prosa th { background: var(--papel-sutil); color: var(--tinta); font-weight: 700; }

/* Uma caixa para o parágrafo que não pode passar batido num documento longo:
   o que o cliente precisa saber antes de aceitar. */
.tpx-destaque {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-left: 3px solid var(--laranja);
  border-radius: 0 var(--raio-mini) var(--raio-mini) 0;
  background: var(--laranja-fundo);
  color: #6b4200;
}
.tpx-destaque p:last-child { margin-bottom: 0; }
.tpx-destaque strong { color: #4a2d00; }

/* --- A busca das páginas de conteúdo ------------------------------------- */
.tpx-busca {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  margin-top: 22px;
  padding: 12px 16px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--papel);
}
.tpx-busca:focus-within { border-color: var(--roxo); box-shadow: 0 0 0 3px var(--roxo-fundo); }
.tpx-busca i { color: var(--tinta-fraca); }
/* A PÍLULA JÁ É A MOLDURA. Sem zerar a borda, o recuo e a sombra que a
   regra geral de campo aplica, aparecem duas caixas: uma dentro da outra.
   O `:focus` também precisa ser zerado, senão o anel nasce no campo interno
   em vez de na pílula que a pessoa vê. */
.tpx-busca input,
.tpx-busca input:focus {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: none;
  font-family: var(--fonte-texto);
  font-size: 16px;
  color: var(--tinta);
}

/* --- O acordeão das dúvidas ----------------------------------------------- */
/* `<details>` NATIVO, e não um par de div com script. Ele traz o teclado, o
   leitor de tela e a busca do navegador (Ctrl+F acha texto dentro de bloco
   fechado nos navegadores atuais) sem uma linha de JS. O que sobrou de script
   na página é só o filtro da busca. */
.tpx-duvidas {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) 24px clamp(48px, 7vw, 80px);
}
.tpx-duvida-grupo { margin-bottom: 40px; }
.tpx-duvida-grupo-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--tinta);
}
.tpx-duvida-grupo-titulo i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--roxo-fundo);
  color: var(--roxo);
  font-size: 15px;
}
.tpx-duvida {
  border: 1px solid var(--linha);
  border-radius: var(--raio-mini);
  background: var(--papel);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.tpx-duvida[open] { border-color: var(--roxo-linha); box-shadow: 0 10px 26px -18px rgba(23, 20, 34, .5); }
.tpx-duvida summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--tinta);
  list-style: none;
}
.tpx-duvida summary::-webkit-details-marker { display: none; }
.tpx-duvida summary:hover { color: var(--roxo); }
.tpx-duvida summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--tinta-fraca);
  border-bottom: 2px solid var(--tinta-fraca);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease, border-color .2s ease;
}
.tpx-duvida[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--roxo);
}
.tpx-duvida-corpo { padding: 0 18px 18px; color: var(--tinta-media); }
.tpx-duvida-corpo p { margin: 0 0 10px; }
.tpx-duvida-corpo p:last-child { margin-bottom: 0; }
.tpx-duvida-corpo a { color: var(--roxo); font-weight: 600; }

.tpx-vazio-busca {
  padding: 40px 20px;
  text-align: center;
  color: var(--tinta-fraca);
}

/* --- Novidades: a linha do tempo das versões ------------------------------ */

.tpx-novidades { max-width: 800px; margin: 0 auto; padding: clamp(32px, 5vw, 56px) 24px 80px; }

.tpx-filtros-tipo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.tpx-chip-tipo {
  padding: 7px 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--papel);
  font-family: var(--fonte-texto);
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta-media);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.tpx-chip-tipo:hover { border-color: var(--roxo); color: var(--roxo); }
.tpx-chip-tipo.ativo { background: var(--roxo); border-color: var(--roxo); color: #fff; }

/* A LINHA DO TEMPO é um filete à esquerda com um ponto por versão. É a forma
   que diz "isto tem ordem e continua" sem precisar escrever a palavra
   histórico. */
.tpx-versao {
  position: relative;
  padding: 0 0 34px 30px;
}
/* O FILETE E A BOLINHA SÃO ELEMENTOS, e não borda e `::before`. Foi o que
   permitiu desenhá-los com a rolagem: pseudo-elemento não se seleciona pelo
   script, e borda não aceita `transform`. Em repouso ficam idênticos ao que
   eram, então sem script a linha do tempo chega inteira. */
.tpx-versao-trilho {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--linha);
  transform-origin: top center;
}
.tpx-versao:last-child .tpx-versao-trilho { background: transparent; }
.tpx-versao-ponto {
  position: absolute;
  left: -5px;
  top: 6px;
  width: 12px;
  height: 12px;
  border: 3px solid var(--papel-fundo);
  border-radius: 50%;
  background: var(--linha-forte);
}
/* A mais recente é a única em roxo: é a resposta para "o que mudou agora". */
.tpx-versao:first-child .tpx-versao-ponto { background: var(--roxo); }

.tpx-versao-cabeca {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.tpx-versao-numero {
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tinta);
  text-decoration: none;
}
.tpx-versao-numero:hover { color: var(--roxo); }
.tpx-versao-data { font-family: var(--fonte-dado); font-size: 12px; color: var(--tinta-fraca); }
.tpx-versao-atual {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--roxo-fundo);
  color: var(--roxo);
  font-family: var(--fonte-dado);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tpx-item-novidade {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--linha);
  font-size: 15px;
  color: var(--tinta-media);
}
.tpx-item-novidade:first-of-type { border-top: 0; padding-top: 0; }
/* O TIPO É UMA ETIQUETA, e cada um tem a sua cor: novidade é o roxo da marca,
   melhoria é neutra e correção usa o âmbar do alerta. Três tons, e o olho
   varre a lista sem ler cada rótulo. */
.tpx-tipo {
  flex: none;
  align-self: flex-start;
  min-width: 74px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--fonte-dado);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}
.tpx-tipo.e-novidade { background: var(--roxo-fundo); color: var(--roxo); }
.tpx-tipo.e-melhoria { background: var(--papel-sutil); color: var(--tinta-media); }
.tpx-tipo.e-correcao { background: var(--laranja-fundo); color: #8a5200; }

.tpx-mais-versoes {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-mini);
  background: none;
  font-family: var(--fonte-texto);
  font-size: 15px;
  font-weight: 600;
  color: var(--roxo);
  cursor: pointer;
}
.tpx-mais-versoes:hover { border-color: var(--roxo); background: var(--roxo-fundo); }

/* --- A espera do cadastro -------------------------------------------------- */
/* Esta tela é vista UMA vez por cliente, no minuto em que ele acabou de
   pagar e ainda não viu nada do produto. Ela não pode parecer travada. */
.tpx-espera {
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding: 60px 24px;
  text-align: center;
}
.tpx-espera-corpo { max-width: 560px; }
.tpx-espera h1 { margin: 20px 0 0; }
.tpx-espera .tpx-apoio { margin: 16px auto 0; }

/* O relógio é a grade do mês outra vez, em miniatura: as células acendem em
   volta, uma a uma. Diz "está trabalhando" sem uma barra de progresso que
   mentiria sobre quanto falta. */
.tpx-espera-grade {
  display: grid;
  grid-template-columns: repeat(4, 16px);
  gap: 7px;
  justify-content: center;
  margin: 0 auto;
}
.tpx-espera-grade i {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--roxo-linha);
  animation: tpx-pulsar 1.6s ease-in-out infinite;
}
.tpx-espera-grade i:nth-child(1) { animation-delay: 0s; }
.tpx-espera-grade i:nth-child(2) { animation-delay: .1s; }
.tpx-espera-grade i:nth-child(3) { animation-delay: .2s; }
.tpx-espera-grade i:nth-child(4) { animation-delay: .3s; }
.tpx-espera-grade i:nth-child(5) { animation-delay: .7s; }
.tpx-espera-grade i:nth-child(6) { animation-delay: .8s; }
.tpx-espera-grade i:nth-child(7) { animation-delay: .4s; }
.tpx-espera-grade i:nth-child(8) { animation-delay: .6s; }
@keyframes tpx-pulsar {
  0%, 100% { background: var(--roxo-linha); transform: scale(1); }
  50%      { background: var(--roxo); transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .tpx-espera-grade i { animation: none; background: var(--roxo-linha); }
  .tpx-espera-grade i:nth-child(2n) { background: var(--roxo); }
}

.tpx-espera-passos {
  display: grid;
  gap: 10px;
  margin-top: 30px;
  text-align: left;
}
.tpx-espera-passo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-mini);
  background: var(--papel);
  font-size: 15px;
  color: var(--tinta-fraca);
}
.tpx-espera-passo.e-feito { color: var(--tinta); border-color: var(--roxo-linha); background: var(--roxo-fundo); }
.tpx-espera-passo.e-feito i { color: var(--roxo); }
.tpx-espera-passo i { flex: none; font-size: 16px; color: var(--linha-forte); }

/* `nov-oculto` É DO SCRIPT DAS NOVIDADES, e por isso continua existindo com
   o nome antigo: é ele que o filtro põe e tira. Renomear deixaria a página
   bonita e o filtro morto, sem erro nenhum no console. */
.nov-oculto { display: none !important; }

/* A barra e o contador da espera. As classes `progress-track`, `progress-fill`
   e `step`/`active` são do script daquela página: ele escreve a largura e
   liga cada passo. Renomear deixaria a pessoa olhando uma barra parada para
   sempre, sem erro nenhum na tela. */
.tpx-espera-barra { margin-top: 30px; }
.progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--papel-sutil);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--roxo), var(--roxo-claro));
  transition: width .4s ease;
}
.tpx-espera-conta {
  margin: 10px 0 0;
  font-family: var(--fonte-dado);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--tinta-fraca);
}
.tpx-espera-conta span { color: var(--roxo); font-weight: 700; }

/* `active` é o nome que o script usa. O passo acende quando ele chega. */
.tpx-espera-passo.active {
  color: var(--tinta);
  border-color: var(--roxo-linha);
  background: var(--roxo-fundo);
}
.tpx-espera-passo.active i { color: var(--roxo); }
.tpx-espera-passo b { color: var(--tinta); font-weight: 700; }
.tpx-espera-passo code {
  font-family: var(--fonte-dado);
  font-size: 13px;
  color: var(--roxo);
}
.tpx-espera-nota {
  margin: 26px 0 0;
  font-size: 14px;
  color: var(--tinta-fraca);
}

/* ===========================================================================
   TEXTO JUSTIFICADO nos documentos e no histórico
   ===========================================================================
   Pedido do dono para Termos, Privacidade e Novidades. É o alinhamento que
   se espera de contrato e de registro: a margem direita reta faz o bloco ler
   como documento, e não como página de venda.

   COM HIFENIZAÇÃO, e isso não é preferência. Justificar em português sem
   hífen abre rios de espaço no meio da linha, porque as palavras são longas
   ("responsabilidade", "disponibilizado") e o navegador estica os espaços
   para fechar a margem. O `hyphens: auto` depende do idioma declarado, que o
   `<html lang="pt-br">` da moldura já traz.

   `text-wrap: pretty` fica de fora aqui: ele briga com `justify` nos
   navegadores que o suportam, e o resultado é pior que qualquer um dos dois
   sozinho.
   =========================================================================== */

.tpx-prosa p,
.tpx-prosa li {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* O texto de cada novidade. É o segundo filho da linha: o primeiro é a
   etiqueta do tipo, que não se justifica. */
.tpx-item-novidade > span:last-child {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* O QUE NÃO SE JUSTIFICA, e o motivo importa: linha curta justificada fica
   com buraco entre duas palavras, que é o defeito que justificar deveria
   evitar. Título, rótulo e legenda continuam alinhados à esquerda. */
.tpx-prosa h2,
.tpx-prosa h3,
.tpx-prosa th,
.tpx-meta,
.tpx-destaque p { text-align: left; }

/* --- Respiro na tela de planos -------------------------------------------- */
/* Dois encontros ficaram sem folga, e os dois pelo mesmo motivo: a seção do
   topo termina onde a próxima começa, sem nada entre elas.

   1. O seletor de tamanho encostava nos cartões. Ele é a pergunta e eles são
      a resposta: precisam de um intervalo, senão leem como um bloco só.
   2. A nota do rodapé da grade encostava na faixa roxa do rodapé do site, e
      o texto cinza-claro sobre a borda escura parecia cortado. */
.tpx-planos-heroi { padding-bottom: clamp(30px, 4vw, 48px); }
#grade-planos { margin-top: clamp(24px, 3vw, 36px); }
.tpx-planos-nota { margin-bottom: clamp(52px, 7vw, 88px); }

/* =========================================================================
   Miudezas que estavam em `style=` no HTML
   =========================================================================

   Sete atributos `style=` foram recolhidos para cá. Nenhum deles era
   dinâmico: eram ajustes de uma linha escritos no lugar mais próximo da mão.
   Regra da casa: o CSS mora em folha.

   A ÚNICA EXCEÇÃO QUE FICA no `assinar.html` é o `style="color: {{
   plano.card_cor }}"` do nome do plano, e ela é legítima: a cor vem do banco,
   escolhida por quem edita o plano no BackOffice. Cor de dado não cabe em
   folha estática.
   ========================================================================= */

/* O rótulo do topo da tela de planos é centrado; na home ele é alinhado à
   esquerda, e por isso a variante em vez de mudar a regra base. */
.tpx-rotulo--centro { justify-content: center; }

/* O cartão de "nenhum plano disponível" ocupa a grade inteira, senão fica um
   card sozinho na primeira coluna com três buracos ao lado. */
.tpx-plan-vazio { grid-column: 1 / -1; }

/* O widget do Turnstile é uma caixa de largura fixa que ele mesmo desenha:
   centrar é a única coisa que dá para fazer com ela. */
.tpx-form-centro { display: flex; justify-content: center; }

/* A caixa do aceite não pode encolher ao lado de um texto de três linhas, e
   sobe um fio para alinhar com a primeira linha em vez do meio do bloco. */
.tpx-aceite-caixa {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Um respiro extra no apoio quando ele vem logo abaixo de um título de seção. */
.tpx-apoio--afastado { margin-top: 16px; }

/* O botão fantasma em cima de fundo escuro: a variante base é desenhada para
   papel claro, e ali ele sumiria. */
.tpx-btn--no-escuro {
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}