/* ============================================================
   RadarShield — folha base do site
   Paleta e tipografia extraídas de radarshield_v3.4.0.html (S64)
   para que site e aplicação sejam o mesmo produto visualmente.

   NOTA: as fontes NÃO vêm de CDN por decisão deliberada — o Google
   Fonts entrega o IP do visitante ao Google, e o público-alvo é
   defesa. Usa-se a IBM Plex quando instalada e stack de sistema
   como fallback. Self-hospedar os .woff2 é task aberta.
   ============================================================ */

:root {
  /* tema escuro — default, igual ao app */
  --bg:#0C1210;  --sur:#131C18;  --sur2:#1A2521; --bdr:#26332E;
  --acc:#35C77E; --acc2:#1E9E60; --adim:rgba(53,199,126,.14);
  --wrn:#E8B04B; --dng:#E06A5A;  --txt:#DCE5E0;  --tdim:#8A9A93;
  --ovl:rgba(19,28,24,.93); --ctatx:#06120C; --rail:#0A0F0D;

  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --wrap: 1360px;
  --r: 8px;
  color-scheme: dark; /* S105 (8.5): rolagem, autopreenchimento e controles nativos escuros */
}

/* Paleta clara removida na S69 — decisão do operador: o SITE é só escuro; a
   alternância claro/escuro fica exclusivamente no PROGRAMA
   (radarshield_v3.4.0.html, que tem CSS próprio e não depende deste arquivo).
   Nada mais escreve data-tema="claro", então estas variáveis eram código
   morto. Se um dia o site voltar a ter tema claro, a paleta está no git. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

/* ---------- estrutura ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
/* 36px (era 72px até a S69): o respiro dobrado afastava demais a divisória do
   texto que ela separa, e empurrava conteúdo pra fora da primeira dobra. Vale
   para todas as seções de todas as páginas — pedido do operador na S69. */
section { padding: 36px 0; border-top: 1px solid var(--bdr); }
section:first-of-type { border-top: 0; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; margin: 0 0 16px; }
h1 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 600; }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 600; }
h3 { font-size: .98rem; font-weight: 600; }
p  { margin: 0 0 16px; max-width: 68ch; }
a  { color: var(--acc); }

.olho {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 12px;
}
.sub { color: var(--tdim); }

/* ---------- topo ---------- */
header.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--ovl);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bdr);
}
/* Três colunas: marca à esquerda, navegação centralizada de verdade
   (a coluna do meio é 1fr e o nav se centra dentro dela, então o menu
   não desloca quando o lado direito muda de largura), ações à direita. */
.topo .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: 54px;
}
/* Marca — reproduz exatamente o cabeçalho do radarshield_v3.4.0.html:
   caixa alta, IBM Plex Sans 700, 15px, letter-spacing 2px, e o nome
   partido em duas cores (COVER no texto, SCOPE no acento).
   Não alterar sem alterar o app junto: são a mesma marca. */
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--acc); }
.marca svg { width: 30px; height: 30px; display: block; flex-shrink: 0; }
.logo { font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: 2px; }
.logo .l1 { color: var(--txt); }
.logo .l2 { color: var(--acc); }
nav.links { display: flex; gap: 30px; align-items: center; justify-content: center; }
nav.links a {
  color: var(--tdim); text-decoration: none;
  font-size: .78rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  white-space: nowrap;
}
nav.links a:hover { color: var(--txt); }

/* Lado direito: entrar, cadastrar */
.acoes { display: flex; gap: 14px; align-items: center; justify-content: flex-end; }
.acoes .entrar { color: var(--tdim); text-decoration: none; font-size: .88rem; white-space: nowrap; }
.acoes .entrar:hover { color: var(--txt); }
.acoes .btn { padding: 9px 18px; font-size: .88rem; }

@media (max-width: 900px) {
  .topo .wrap { grid-template-columns: auto 1fr; height: auto; padding-block: 12px; gap: 12px; }
  nav.links { grid-column: 1 / -1; order: 3; flex-wrap: wrap; justify-content: flex-start; gap: 18px; }
  .acoes { gap: 10px; }
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r);
  font-family: var(--sans); font-size: .93rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.btn-1 { background: var(--acc); color: var(--ctatx); }
.btn-1:hover { background: var(--acc2); }
.btn-2 { background: transparent; color: var(--txt); border-color: var(--bdr); }
.btn-2:hover { border-color: var(--acc); }
.btn-bloco { width: 100%; }
/* Sem isto, um <button disabled> fica idêntico ao habilitado — clique não
   faz nada e não dá pra saber por quê (achado Sessão 68, checkout travando
   em silêncio com o cartão incompleto). */
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* Escopado por variante: a regra global fazia um .btn-2 desabilitado virar
   verde sólido no hover, parecendo habilitado (achado Sessão 72, ao criar o
   botão "Em breve" do plano de avaliação). O comportamento do .btn-1 do
   checkout fica idêntico ao anterior. */
.btn-1:disabled:hover { background: var(--acc); }
.btn-2:disabled:hover { border-color: var(--bdr); }

/* ---------- hero em duas colunas (S69) ----------
   Texto à esquerda, ilustração do produto à direita — mesmo arranjo que as
   ferramentas concorrentes usam na dobra inicial: a pessoa vê o que o
   programa produz antes de ler qualquer coisa. Abaixo de 900px empilha, com
   a ilustração indo para baixo do texto (order), porque numa tela estreita o
   argumento tem que vir antes da imagem. */
.hero-2col {
  display: grid;
  /* Coluna da arte propositalmente maior que a do texto: a tela do notebook
     mostra uma interface de 1920px de largura, então cada pixel a menos aqui
     encolhe a UI proporcionalmente e come legibilidade. A coluna da arte é
     menor do que o notebook renderizado — a diferença vem da sangria à
     direita (.hero-arte abaixo), que desloca o notebook sem encolhê-lo. */
  /* A coluna da arte encolheu junto com o recorte do PNG: como a imagem não
     tem mais margem transparente, 1px de coluna virou 1px de notebook. As
     proporções abaixo mantêm o notebook no MESMO tamanho aparente de antes
     (~650px) e devolvem a diferença ao texto. */
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 32px;
  align-items: center;
}
.hero-2col .hero-texto { min-width: 0; }

/* Sangria à direita: o notebook avança sobre a margem externa da página, o
   que o empurra para a direita e devolve espaço ao texto SEM encolhê-lo
   (pedido do operador na S69: "não muda o tamanho, apenas muda de lugar").
   O valor é calculado, não fixo: consome no máximo o espaço que de fato
   existe fora do .wrap — `max(0px, (100vw - --wrap)/2)` mais o padding
   lateral de 24px, com teto de 48px. Assim, numa janela estreita a sangria
   vira 24px e nunca gera rolagem horizontal; numa janela larga ela para nos
   48px em vez de colar o notebook na borda da tela. */
.hero-2col .hero-arte {
  min-width: 0;
  margin-right: calc(-1 * min(48px, max(0px, (100vw - var(--wrap)) / 2) + 24px));
}

/* Notebook: foto com fundo já removido (PNG com alpha real, gerado na S69 a
   partir da foto original — ver assets/notebook.png). A tela do programa entra
   por cima, posicionada em % sobre a área do display, medida no próprio
   arquivo por varredura de pixels em vez de estimada no olho:
   display = x 211→1185, y 180→814 numa imagem de 1400×1076. */
.notebook { position: relative; line-height: 0; }
.notebook-foto { width: 100%; height: auto; display: block; }
.notebook-tela {
  position: absolute;
  /* Medido no perfil de pixels da própria imagem: a moldura de alumínio ocupa
     203–208, o bezel preto vai de 209 a 220, e o display só começa em 221 —
     a 1ª tentativa usou 211 e comia ~10px de bezel de cada lado, daí a
     impressão de "notebook sem borda".
     Percentuais recalculados depois do recorte do PNG (1400×1076 → 1212×735,
     removendo o vazio transparente herdado da foto de catálogo): o display
     fica em x 129→1083, y 22→642. */
  left: 10.64%;
  top: 2.99%;
  width: 78.71%;
  height: 84.35%;
  overflow: hidden;
}
/* `left center`: o print é 16:9 e a tela é 16:10,4, então sobra largura. O
   corte tem que sair da direita (mapa, terreno repetido) e nunca da esquerda,
   onde ficam o logo e o painel de controles — que é o que identifica o
   produto na primeira dobra. */
.notebook-tela img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

@media (max-width: 900px) {
  .hero-2col { grid-template-columns: 1fr; gap: 28px; }
  /* Empilhado, a sangria não faz sentido — sem duas colunas não há espaço a
     devolver, e ela só empurraria o notebook para fora da tela. */
  .hero-2col .hero-arte { order: 2; margin-right: 0; }
}

/* ---------- cartões e grades ---------- */
.grade { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.cartao {
  background: var(--sur);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: 22px;
}
.cartao h3 { margin-bottom: 8px; }
.cartao p:last-child { margin-bottom: 0; }

/* ---------- selos de fidelidade ---------- */
.selo {
  display: inline-block;
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px; border: 1px solid;
  white-space: nowrap;
}
.selo-val { color: var(--acc); border-color: var(--acc); background: var(--adim); }
.selo-pln { color: var(--wrn); border-color: var(--wrn); }
.selo-apr { color: var(--tdim); border-color: var(--bdr); }

/* ---------- tabela ---------- */
.tabela-caixa { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; min-width: 520px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--bdr); }
th { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tdim); font-weight: 500; }
td.mono { font-family: var(--mono); }

/* ---------- formulários ---------- */
.form-caixa {
  max-width: 400px; margin: 60px auto;
  background: var(--sur); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 30px;
}
label { display: block; font-size: .82rem; color: var(--tdim); margin: 0 0 6px; }
.fl-opt { float: right; font-weight: 400; font-size: .75rem; color: var(--tdim); letter-spacing: 0; }
input, select {
  width: 100%; padding: 10px 12px; margin-bottom: 16px;
  background: var(--bg); color: var(--txt);
  border: 1px solid var(--bdr); border-radius: 6px;
  font-family: var(--sans); font-size: .95rem;
}
input:focus, select:focus { outline: none; border-color: var(--acc); }
/* S105 (8.4): anel visível no campo com foco. Em campo de texto o Chrome considera todo foco
   "visível" (clique ou teclado), então o anel aparece nos dois — medido no teste site-s105. */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Campo de senha com botão de mostrar/ocultar (S76) */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px; }
.pw-eye {
  position: absolute; right: 4px; top: 0; height: 40px; width: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--tdim); cursor: pointer; padding: 0;
}
.pw-eye:hover { color: var(--txt); }
.pw-eye svg { width: 18px; height: 18px; display: block; }
/* S105: traço diagonal só com a senha à mostra (aria-pressed="true") — o clique a esconde */
.pw-eye .pw-corte { display: none; }
.pw-eye[aria-pressed="true"] .pw-corte { display: inline; }
/* Botão com cara de link — sugestão de e-mail no checkout (S101) */
.btn-texto { background: none; border: none; padding: 0; font: inherit; color: var(--acc); text-decoration: underline; cursor: pointer; }
.erro { color: var(--dng); font-size: .85rem; min-height: 20px; margin: 0 0 8px; }
/* S104 (pacote 7) — erro ao lado do campo (form-erros.js). O !important vence o
   estilo inline da <textarea> do contato, que fixa a borda. */
.erro-campo { color: var(--dng); font-size: .8rem; margin: -10px 0 14px; }
[aria-invalid="true"] { border-color: var(--dng) !important; }

/* ---------- FAQ / accordion ---------- */
.faq-item {
  border-bottom: 1px solid var(--bdr);
  padding: 16px 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 1.2rem;
  color: var(--acc);
  flex-shrink: 0;
  transition: transform .15s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--acc); }
.faq-item p { margin: 14px 0 0; }

/* ---------- rodapé ---------- */
footer {
  border-top: 1px solid var(--bdr);
  padding: 11px 0; /* S106 (dele): faixa ~30% mais baixa (era 20px) */
  color: var(--tdim);
  font-size: .7rem; /* S106 (dele): 20% menor que os .87rem de antes */
}
/* S106 (dele): copyright no centro da página e os links legais na direita. Três colunas
   (1fr auto 1fr) para o centro ser o da página, não o do espaço que sobra ao lado dos links. */
footer .wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
footer .wrap > :first-child { grid-column: 2; }
footer .rodape-legal { grid-column: 3; justify-self: end; }
@media (max-width: 720px) {
  footer .wrap { grid-template-columns: 1fr; gap: 4px; justify-items: center; }
  footer .wrap > :first-child, footer .rodape-legal { grid-column: 1; justify-self: center; }
}
footer a { color: var(--tdim); text-decoration: none; margin-right: 18px; }
footer a:hover { color: var(--txt); }

/* ---------- páginas legais (S105) ---------- */
.legal { max-width: 72ch; }
.legal h2 { font-size: 1.12rem; margin: 30px 0 10px; }
.legal h2:first-child { margin-top: 0; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin: 0 0 8px; }
.legal a, .aceite-legal a { color: var(--acc); }
.rodape-legal { display: flex; gap: 18px; }
.rodape-legal a { margin-right: 0; }
/* S106: max-width none — com letra de 10 px os 68ch do `p` davam 366 px e a frase saía descentrada no formulário */
.aceite-legal { max-width: none; font-size: .625rem; /* S106 (dele): 20% menor (era .78rem); 10 px, o piso de letra do app */ text-align: center; margin: 12px 0 0; }

/* ---------- acessibilidade e checkout (S105, pacotes 8–9) ---------- */
.pular { position: absolute; left: -9999px; top: 8px; z-index: 1000; padding: 8px 14px; border-radius: 6px;
  background: var(--acc); color: var(--ctatx); font-weight: 600; text-decoration: none; }
.pular:focus { left: 16px; }
h2.como-h3 { font-size: .98rem; }
.cartao h2.como-h3 { margin-bottom: 8px; }
/* S105 (pacote 12): título de cartão como rótulo de instrumento (mono, caixa alta) */
h2.rotulo-mono, h3.rotulo-mono { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tdim); margin-bottom: 8px; }
/* S105 (pacote 12, dele): o botão Enviar cabe em 1366×650 (notebook a 125%) — antes caía 36 px abaixo */
.contato-topo { padding-top: 20px; }
#form-contato input, #form-contato select { margin-bottom: 12px; }
#form-contato label { margin-bottom: 4px; }
/* S105 (pacote 13): "ou" como rótulo de instrumento; "Esqueci minha senha" na linha do rótulo */
.acesso-topo { padding-top: 12px; } /* S105: a caixa de Entrar cabe inteira em 1366×650 */
.rotulo-ou { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.rotulo-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rotulo-linha a { font-size: .8rem; margin: 0 0 6px; }
/* S105 (pacote 14): etapas do checkout como rótulo de instrumento, com a linha até a borda */
.etapa-chk { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.etapa-chk::after { content: ""; flex: 1; height: 1px; background: var(--bdr); }
.falta-chk { font-size: .78rem; text-align: center; margin: 10px 0 0; }

/* ---------- utilidades ---------- */
.centro { text-align: center; }
.centro p { margin-left: auto; margin-right: auto; }
.nota {
  border-left: 2px solid var(--wrn);
  padding: 2px 0 2px 14px;
  color: var(--tdim);
  font-size: .9rem;
}
/* #tema removido na S69 junto com o botão de alternância — ver comentário da
   paleta clara no topo deste arquivo. */

/* ============================================================
   S77 — SISTEMA "FICHA DE INSTRUMENTO"
   ------------------------------------------------------------
   O produto vende uma coisa que nenhum concorrente vende: cada
   número vem com o grau de confiança declarado. Até aqui o site
   DESCREVIA isso numa tabela na segunda dobra. Agora ele PRATICA:
   nenhuma medida aparece sozinha — sempre com rótulo, unidade
   separada e a referência que a sustenta.

   Vocabulário, e por que cada um existe:
     .medida    — o campo de leitura (rótulo · valor · lastro)
     .selo      — o grau de fidelidade (classes já existentes desde a S70b)
     .ficha     — a pilha de medidas; a assinatura da página

   A régua vertical à esquerda da ficha não é enfeite: ela existe
   porque instrumento de medida tem escala, e é o que separa este
   bloco de um "card" genérico de SaaS.
   ============================================================ */

/* A FAIXA: colada ao hero, sem borda de seção e sem respiro acima —
   ela precisa ler como a continuação da imagem, não como a próxima
   seção. O padding-top curto e o fundo levemente mais claro fazem esse
   trabalho; a régua tracejada à esquerda de cada medida é a escala do
   instrumento, e é o que separa isto de três cards genéricos. */
.faz {
  border-top: 0;
  padding: 4px 0 30px;
  background: linear-gradient(180deg, var(--sur) 0%, var(--bg) 100%);
}
/* S102 (pacote 3) — "O que o CoverScope faz": 12 quadrados, um fato cada.
   Destaque (número ou palavra) em cima, o que é, e uma linha. Ícone em
   traço fino na cor de acento, a mesma linguagem do radar polar do hero. */
.faz-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.faz-grade.uma { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.fq {
  aspect-ratio: 1 / 1; display: flex; flex-direction: column;
  padding: 14px; border: 1px solid var(--bdr); border-radius: var(--r);
  background: var(--sur); min-width: 0;
}
.fq svg { width: 38px; height: 38px; fill: none; stroke: var(--acc); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fq .n {
  margin-top: auto; font-family: var(--mono); font-size: 1.6rem; font-weight: 600;
  line-height: 1.05; color: var(--txt); font-variant-numeric: tabular-nums;
}
.fq .n small { font-size: .78rem; font-weight: 400; color: var(--tdim); margin-right: 4px; }
.fq .t { font-size: .84rem; font-weight: 600; color: var(--txt); margin-top: 6px; line-height: 1.3; }
.fq .d { font-size: .74rem; color: var(--tdim); margin-top: 3px; line-height: 1.4; }
@media (max-width: 1100px) { .faz-grade, .faz-grade.uma { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .faz-grade, .faz-grade.uma { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fq { padding: 12px; }
  .fq .n { font-size: 1.4rem; }
}
.faixa-ttl {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tdim); padding-top: 18px; margin-bottom: 18px;
}
/* S77 — a tela do produto em seção própria.
   Sem moldura de notebook: a moldura ocupava ~35% da imagem e não
   acrescentava informação. Uma borda fina e um rótulo mono dizendo o que
   está sendo mostrado fazem o trabalho — e o print aparece maior. */
.tela-produto { margin: 26px 0 0; }
.tela-produto img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--bdr); border-radius: var(--r);
}
.tela-produto figcaption {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tdim); margin-top: 10px;
}

/* ============================================================
   S77 — GEOMETRIA POLAR (direção B, escolhida pelo operador)
   ------------------------------------------------------------
   Radar não pensa em retângulos: pensa em AZIMUTE e ALCANCE. A
   estrutura da primeira dobra passa a dizer isso —
     · anéis de alcance ancorados à ESQUERDA, onde estaria a antena
       (não um círculo decorativo centralizado);
     · uma escala de distância como régua vertical, que é a mesma
       leitura que o operador faz no produto;
     · divisória em ARCO no lugar da linha reta entre seções;
     · uma varredura que roda UMA vez ao carregar e some — em loop
       viraria tela de espera; uma vez só é o instrumento ligando.
   O cabeçalho do site NÃO muda: é o que amarra as páginas entre si.
   ============================================================ */
.polar { position: relative; overflow: hidden; }
.polar > .wrap { position: relative; z-index: 1; }

/* anéis: 150px entre um e outro, o mesmo ritmo dos anéis de km do app */
.polar::before {
  content: ""; position: absolute; left: -360px; top: 50%;
  transform: translateY(-50%);
  width: 1500px; height: 1500px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle at center,
    transparent 0 148px, var(--bdr) 148px 149px, transparent 149px 150px);
  opacity: .5;
}
.polar::after {
  content: ""; position: absolute; left: -360px; top: 50%;
  margin-top: -750px; transform-origin: center;
  width: 1500px; height: 1500px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(53,199,126,.15) 0deg 26deg, transparent 26deg 360deg);
  animation: rs-varre 2.4s cubic-bezier(.2,.7,.2,1) 1 forwards;
}
@keyframes rs-varre {
  from { transform: rotate(-30deg); opacity: .9; }
  to   { transform: rotate(330deg); opacity: 0; }
}
/* quem pediu menos movimento não recebe a varredura — e não fica
   com um setor verde parado na tela: ela some de vez. */
@media (prefers-reduced-motion: reduce) {
  .polar::after { animation: none; opacity: 0; }
}

/* a régua de alcance: os mesmos números que o app mostra nos anéis */
.escala {
  align-self: stretch; display: flex; flex-direction: column;
  justify-content: space-between; padding: 8px 0;
  position: relative;
}
/* S102: a linha da régua vai do primeiro ao último traço (8px de padding +
   metade da linha de 14px); antes era border-right e passava do "0". */
.escala::before {
  content: ""; position: absolute; right: 0; top: 15px; bottom: 15px;
  width: 1px; background: var(--bdr);
}
.escala span {
  line-height: 14px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  color: var(--tdim); position: relative; padding-left: 2px;
}
.escala span::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  width: 7px; height: 1px; background: var(--acc2);
}

/* o hero ganha a coluna da régua à esquerda */
.hero-polar {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 0 30px; align-items: center;
}
@media (max-width: 900px) {
  .hero-polar { grid-template-columns: 1fr; gap: 26px; }
  .escala { display: none; }
  .polar::before, .polar::after { display: none; }
}

/* ============================================================
   S77 — AS SEIS BASES DE MAPA
   Mesma janela geográfica nas seis imagens (Oxford–Reading), para
   que a diferença que se vê seja a BASE e não o lugar. Recortadas
   das capturas do operador, 600px de origem para 440 de saída.
   ============================================================ */
.terrenos { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; margin-top: 22px; }
.base-card { border: 1px solid var(--bdr); border-radius: var(--r); overflow: hidden; background: var(--sur); }
.base-card img { width: 100%; height: auto; display: block; aspect-ratio: 1; object-fit: cover; }
.base-card .nome {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt);
  padding: 8px 10px 3px;
}
.base-card .fonte {
  font-size: .66rem; color: var(--tdim); padding: 0 10px 9px; line-height: 1.35;
}
@media (max-width: 1100px) { .terrenos { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 620px)  { .terrenos { grid-template-columns: repeat(2, minmax(0,1fr)); } }


/* S77 — a tela do programa sem a moldura do notebook.
   Uma borda fina basta para dizer "isto é uma tela"; a foto do
   notebook ocupava ~35% da área para dizer a mesma coisa. */
.tela-app { line-height: 0; border: 1px solid var(--bdr); border-radius: var(--r); overflow: hidden; }
.tela-app img { width: 100%; height: auto; display: block; }

/* S77 — o card de base ficou só com o nome que o PRODUTO usa.
   O nome do fornecedor saiu de baixo de cada imagem: seis linhas de
   "Esri isto, OpenTopoMap aquilo" competiam com as próprias imagens,
   e o usuário escolhe a base pelo nome do app, não pelo fornecedor.
   S102 — a linha de atribuição do fim da seção saiu por decisão do
   operador (o crédito fica no app, junto do mapa). */
.base-card .fonte { display: none; }
.base-card .nome { padding: 9px 10px 10px; }

/* S102 (pacote 4) — o bônus do Profissional sobe para o topo do card, no
   formato do "Grátis por 3 dias" da Avaliação: destaque + complemento. */
.bonus-topo { font-size: 1.35rem; font-weight: 600; color: var(--acc); margin: 0 0 4px; line-height: 1.3; }
.bonus-topo .bonus-sub { font-size: .85rem; font-weight: 400; color: var(--tdim); }

/* S106 (pacote 15) — cartões de planos (Planos e home) na linguagem de instrumento: nome do plano
   como rótulo mono, preço em mono, recursos em linhas com fio fino (como .itens da Capacidades).
   Saíram os estilos inline repetidos nos 6 cartões. */
.plano-sub { font-size: .85rem; margin-bottom: 2px; }
.plano-preco { font-family: var(--mono); font-size: 1.8rem; font-weight: 600; margin: 6px 0 4px;
  font-variant-numeric: tabular-nums; line-height: 1.2; }
.plano-un { font-family: var(--sans); font-size: .95rem; font-weight: 400; color: var(--tdim); }
.plano-lista { list-style: none; padding: 0; margin: 16px 0; font-size: .88rem; }
.plano-lista li { border-top: 1px solid var(--bdr); padding: 7px 0; line-height: 1.4; }
.plano-lista li:last-child { border-bottom: 1px solid var(--bdr); }
.cartao-destaque { border-color: var(--acc); }
/* S106 (dele): a mesma capacidade na mesma altura nos 3 cartões. Cada cartão ocupa 17 linhas da
   grade (nome, sub, preço, bônus, 12 recursos, botão) e as repassa por subgrid à lista — a linha
   mais alta entre os cartões dita a altura de todas. Cartão com menos recursos deixa linha vazia. */
.planos-grade > .cartao { display: grid; grid-row: span 17; grid-template-rows: subgrid; row-gap: 0; }
.planos-grade > .cartao > .plano-lista { grid-row: 5 / span 12; display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.planos-grade > .cartao > .btn { grid-row: 17; align-self: end; }
/* S106 (dele): o padrão é o da home — subtítulo, preço e bônus centrados no cartão. Na home isso
   vinha do `.centro p` da seção; aqui fica explícito para Planos sair igual. */
.planos-grade > .cartao > p { margin-left: auto; margin-right: auto; }
/* Institucional: os itens dele não se comparam linha a linha (são termos de contrato), então a
   lista corre sem herdar a altura das linhas dos outros cartões. */
.planos-grade > .cartao > .plano-lista.livre { display: block; align-self: start; }

/* S102: âncora (#modelos etc.) para abaixo da barra fixa do topo (54 px),
   em vez de esconder o título atrás dela. */
[id] { scroll-margin-top: 72px; }

/* ============================================================
   S102 (pacote 5) — CAPACIDADES. Disciplina de instrumento SEM neon:
   retícula nos cantos (.reticula), escala, números em mono. A segunda
   cor é a paleta das camadas do app (LCOLORS), usada só como dado.
   ============================================================ */
.tit-sec { margin-bottom: 6px; }
.lead-curto { max-width: 62ch; }
/* S104 — de volta à borda ARREDONDADA, como antes da S102, e sem as cantoneiras verdes
   (dele: "arredondado estava mais profissional e com menos cara de IA"). A classe fica só
   como cartão: fundo, borda e raio. */
.reticula { position: relative; background: var(--sur); border: 1px solid var(--bdr); border-radius: var(--r); }

/* Anatomia de um cálculo — o desenho é a assinatura da página */
.anat { margin: 26px 0 0; padding: 22px 22px 14px; }
.anat svg { width: 100%; height: auto; display: block; }
.anat-escala path { fill: none; stroke: var(--tdim); stroke-width: 1; }
.anat-escala text { fill: var(--tdim); font: 13px var(--mono); }
.anat-curva { fill: none; stroke: var(--tdim); stroke-width: 1.2; stroke-dasharray: 6 6; }
.anat-terreno { fill: var(--sur2); stroke: #3C4F47; stroke-width: 1.5; }
.anat-chuva path { stroke: #4FA3E0; stroke-width: 1.6; stroke-linecap: round; opacity: .85; }
.anat-feixe { fill: none; stroke: var(--acc); stroke-width: 2.2; }
.anat-difr { fill: none; stroke: var(--wrn); stroke-width: 2.2; stroke-dasharray: 9 7; }
.anat-obj { fill: none; stroke: var(--txt); stroke-width: 2.2; stroke-linecap: round; }
.anat-alvo { fill: var(--txt); }
.anat-alvo2 { fill: none; stroke: var(--txt); stroke-width: 2; }
.cal { transition: opacity .2s; }
.cal .ld { fill: none; stroke: var(--tdim); stroke-width: 1; stroke-dasharray: 3 4; }
.cal circle { fill: var(--acc); }
.cal .ct { fill: var(--txt); font: 600 20px var(--sans); }
.cal .cn { fill: var(--tdim); font: 15px var(--mono); }
.cal .cs { font: 600 12px var(--mono); letter-spacing: .1em; }
.cal .cs.val { fill: var(--acc); }
.cal .cs.apr { fill: var(--tdim); }
.anat svg:hover .cal { opacity: .35; }
.anat svg .cal:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cal { transition: none; } }
.anat-leg { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 10px; font-size: .82rem; color: var(--tdim); }
.anat-leg .tr { display: inline-block; width: 26px; border-top: 2px solid var(--acc); vertical-align: middle; margin-right: 8px; }
.anat-leg .tr-difr { border-top: 2px dashed var(--wrn); }
.anat-lista { display: none; }
@media (max-width: 720px) {
  .anat { padding: 14px; }
  .anat .cal { display: none; }   /* rótulos ficariam ilegíveis no desenho reduzido */
  .anat-lista { display: grid; gap: 10px; list-style: none; padding: 0; margin: 14px 0 0; font-size: .86rem; }
  .anat-lista .mono { display: block; color: var(--tdim); font-size: .78rem; }
}

/* Do radar ao relatório */
.fluxo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.etapa { padding: 22px; }
.et-num { font: 600 2.6rem/1 var(--mono); color: var(--acc); }
.etapa h3 { margin: 10px 0 2px; font-size: 1.15rem; }
.et-sub { color: var(--tdim); font-size: .86rem; margin: 0 0 14px; }
.itens { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.itens li { display: grid; grid-template-columns: 4.4rem 1fr; gap: 10px; align-items: baseline; border-top: 1px solid var(--bdr); padding-top: 10px; font-size: .88rem; }
.itens .in { font: 600 1.12rem var(--mono); color: var(--txt); }
.paleta { display: flex; height: 8px; margin: 0 0 14px; border: 1px solid var(--bdr); border-radius: 4px; overflow: hidden; } /* S104: raio */
.paleta i { flex: 1; }
.arquivos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.arquivos span { font: 600 .72rem var(--mono); letter-spacing: .08em; color: var(--acc); border: 1px solid var(--acc2); padding: 4px 8px; border-radius: 4px; } /* S104: raio, como o .selo */
@media (max-width: 900px) { .fluxo { grid-template-columns: 1fr; } }

/* Modelos: a legenda dos selos numa linha */
.selos-leg { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 12px; font-size: .8rem; color: var(--tdim); }

/* Limites declarados: as 3 categorias que o app imprime nos exports */
.lim3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.lim { padding: 20px; border-top: 2px solid var(--x); }
.lim-a { --x: var(--wrn); }
.lim-b { --x: var(--tdim); }
.lim-c { --x: var(--dng); }
.lim h3, .dd h3 { font-size: 1.02rem; margin: 0 0 4px; }
.lim-sub { color: var(--tdim); font-size: .8rem; margin: 0 0 12px; }
.lim ul, .dd ul { margin: 0; padding-left: 18px; font-size: .86rem; line-height: 1.5; }
.lim li, .dd li { margin-bottom: 6px; }
.lim-notas { margin-top: 18px; font-size: .84rem; max-width: 80ch; }
@media (max-width: 900px) { .lim3 { grid-template-columns: 1fr; } }

/* Seus dados: o que fica × o que sai */
.dados { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 14px; align-items: center; margin-top: 22px; }
.dd { padding: 20px; align-self: stretch; }
.dd-fica li::marker { color: var(--acc); }
.dd dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: .86rem; }
.dd dd { margin: 0; color: var(--tdim); }
.dd-seta svg { width: 60px; fill: none; stroke: var(--tdim); stroke-width: 1.5; }
@media (max-width: 900px) {
  .dados { grid-template-columns: 1fr; }
  .dd-seta { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 560px) {
  .dd dl { grid-template-columns: 1fr; gap: 2px; }
  .dd dd { margin-bottom: 10px; }
}

/* S102 — a linguagem de instrumento da Capacidades na home e em Planos
   (sem tirar conteúdo): cantos retos com retícula; nos cards das bases o
   overflow volta a ser visível para as cantoneiras não serem cortadas. */
/* S104 — os cantos retos e o `overflow: visible` (que existia para não cortar a cantoneira)
   saíram: o card das bases volta ao `overflow: hidden` de antes, que recorta a imagem no raio. */
.paleta-fq { height: 5px; margin: 10px 0 0; }

/* S102 — Capacidades compacta (dele: "está muito grande… a imagem não cabe na tela cheia").
   Cada bloco principal cabe numa tela de notebook (1366×768); o desenho encolhe com a
   ALTURA da janela, sem cortar. Só nesta página (body.pg-capac). */
.pg-capac section { padding: 26px 0; }
.pg-capac .olho { margin-bottom: 6px; }
.pg-capac .tit-sec { margin-bottom: 4px; }
.pg-capac .lead-curto { margin-bottom: 0; font-size: .9rem; }
.pg-capac .anat { margin-top: 12px; padding: 10px 14px 8px; }
.pg-capac .anat svg { max-height: calc(100vh - 230px); min-height: 280px; }
.pg-capac .anat-leg { margin-top: 4px; font-size: .78rem; }
/* fluxo: número ao lado do título, linhas justas */
.pg-capac .fluxo { margin-top: 14px; gap: 14px; }
.pg-capac .etapa { padding: 14px 16px; }
.pg-capac .et-num { float: left; font-size: 1.9rem; margin: 0 12px 0 0; }
.pg-capac .etapa h3 { margin: 0; font-size: 1.05rem; }
.pg-capac .et-sub { margin: 0 0 10px; font-size: .8rem; }
.pg-capac .paleta, .pg-capac .arquivos { clear: both; margin-bottom: 8px; }
.pg-capac .arquivos span { padding: 2px 6px; font-size: .66rem; }
.pg-capac .itens { clear: both; gap: 0; }
.pg-capac .itens li { grid-template-columns: 3.6rem 1fr; padding: 6px 0; font-size: .82rem; line-height: 1.35; }
.pg-capac .itens .in { font-size: .98rem; }
/* tabela de modelos: linhas baixas */
.pg-capac .selos-leg { margin-top: 6px; font-size: .76rem; }
.pg-capac table { font-size: .84rem; }
.pg-capac th, .pg-capac td { padding: 6px 12px; }
.pg-capac th { font-size: .68rem; }
.pg-capac td.mono { font-size: .8rem; }
.pg-capac td .selo { padding: 1px 6px; font-size: .6rem; }
.pg-capac .nota { font-size: .8rem; }
/* limites e dados: mesmo aperto */
.pg-capac .lim3, .pg-capac .dados { margin-top: 14px; }
.pg-capac .lim, .pg-capac .dd { padding: 14px 16px; }
.pg-capac .lim ul, .pg-capac .dd ul, .pg-capac .dd dl { font-size: .82rem; }
.pg-capac .lim-notas { font-size: .8rem; margin-top: 12px; }
/* S102 — o desenho encolhe com a altura da tela; a letra DENTRO dele é maior para continuar legível encolhida */
.cal .ct { font-size: 23px; }
.cal .cn { font-size: 16px; }
.cal .cs { font-size: 14px; }
/* S102 (pacote 6) — os 3 selos numa linha só */
.pg-capac .selos-leg { flex-wrap: nowrap; gap: 6px 22px; }
.pg-capac .selos-leg > span { white-space: nowrap; }
@media (max-width: 1100px) { .pg-capac .selos-leg { flex-wrap: wrap; } }

/* S104 — Guia, passo a passo com a TELA REAL do app (modelo B, dele). Linhas alternadas
   texto × captura; no celular, empilha com o texto em cima. Cantos arredondados como o resto. */
.passos { display: grid; gap: 18px; }
/* S104: texto só para leitor de tela (o título "Primeiros passos" saiu da tela, a hierarquia fica) */
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.passo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px; align-items: center;
  background: var(--sur); border: 1px solid var(--bdr); border-radius: var(--r); padding: 24px;
}
.passo:nth-child(even) .passo-txt { order: 2; }
.passo h3 { margin: 6px 0 8px; font-size: 1.15rem; }
.passo .sub { margin: 0; }
.passo-tela { margin: 0; }
.passo-tela img { display: block; width: 100%; height: auto; border: 1px solid var(--bdr); border-radius: 6px; }
@media (max-width: 820px) {
  .passo { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .passo:nth-child(even) .passo-txt { order: 0; }
}