/*
  Proximia — site institucional.
  Mesma paleta e tipografia do produto: navy profundo, esmeralda como ação e
  estado positivo, off-white de fundo. Número sempre em monoespaçada tabular.
*/

:root {
  --off: #f6f8fa;
  --branco: #ffffff;
  --g50: #f8fafc;
  --g100: #eef1f4;
  --g200: #e2e8f0;
  --g300: #cbd5e1;
  --g400: #94a3b8;
  --g500: #64748b;
  --g700: #334155;

  --navy: #1b2a4a;
  --navy-fundo: #16233b;
  --navy-claro: #2c4372;
  --esmeralda: #1c9d68;
  --esmeralda-forte: #157a51;
  --esmeralda-pale: #e8f7f0;
  --ambar: #b7791f;
  --ambar-pale: #fdf6e3;
  --vermelho: #c2410c;
  --vermelho-pale: #fdf0ea;

  --ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r: 12px;
  --r-p: 8px;
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px rgba(16, 24, 40, 0.06);
  --sombra-alta: 0 18px 44px rgba(16, 24, 40, 0.16);
  --largura: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--off);
  color: var(--navy);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--esmeralda-forte);
  text-underline-offset: 3px;
}

.envoltorio {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 28px;
}

.dado {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------------- topo ---------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 248, 250, 0.92);
  border-bottom: 1px solid var(--g200);
}

.topo-interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.marca {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-decoration: none;
}

.marca-ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--esmeralda);
  flex: 0 0 auto;
}

.topo nav {
  margin-left: auto;
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}

.topo nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--g500);
  text-decoration: none;
}

.topo nav a:hover {
  color: var(--navy);
}

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

.botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  background: var(--esmeralda);
  border: 1px solid var(--esmeralda);
  border-radius: var(--r-p);
  padding: 11px 20px;
  text-decoration: none;
  transition: background 0.12s ease;
}

.botao:hover {
  background: var(--esmeralda-forte);
  border-color: var(--esmeralda-forte);
  color: #fff;
}

.botao-vazado {
  color: var(--navy);
  background: var(--branco);
  border-color: var(--g300);
}

.botao-vazado:hover {
  background: var(--g50);
  color: var(--navy);
  border-color: var(--g400);
}

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

.olho {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g400);
  margin: 0 0 14px;
}

h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  max-width: 15ch;
}

h2 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  max-width: 24ch;
}

h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

p {
  margin: 0 0 16px;
}

.destaque {
  font-size: 18.5px;
  color: var(--g500);
  max-width: 56ch;
}

section {
  padding: 78px 0;
  border-top: 1px solid var(--g200);
}

section:first-of-type {
  border-top: 0;
}

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

.hero {
  padding: 72px 0 66px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 52px;
  align-items: center;
}

.acoes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.selo-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--esmeralda-forte);
  background: var(--esmeralda-pale);
  border: 1px solid #c4e8d7;
  border-radius: 100px;
  padding: 5px 13px;
  margin-bottom: 20px;
}

/* ---------------- painel ilustrativo ---------------- */

.quadro {
  background: var(--branco);
  border: 1px solid var(--g200);
  border-radius: var(--r);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}

.quadro-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--navy-fundo);
  color: #fff;
}

.quadro-titulo {
  font-size: 12.5px;
  font-weight: 700;
}

.quadro-sub {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: #8b9ab3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.quadro-corpo {
  padding: 18px;
}

.linha-cartoes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.mini-cartao {
  border: 1px solid var(--g200);
  border-radius: var(--r-p);
  padding: 10px 12px;
  background: var(--g50);
}

.mini-cartao span {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g400);
  margin-bottom: 3px;
}

.mini-cartao strong {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.mini-cartao.teto strong {
  color: var(--g500);
  font-size: 15px;
}

.mini-cartao.capturado strong {
  color: var(--esmeralda-forte);
  font-size: 15px;
}

.mini-cartao.alerta strong {
  color: var(--vermelho);
}

.tabela-mini {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.tabela-mini th {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g400);
  font-weight: 500;
  text-align: left;
  padding: 8px 10px;
  background: var(--g50);
  border-bottom: 1px solid var(--g200);
}

.tabela-mini td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--g100);
  vertical-align: middle;
}

.tabela-mini tr:last-child td {
  border-bottom: 0;
}

.tabela-mini .num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pilula {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 100px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.pilula-alerta {
  color: var(--vermelho);
  background: var(--vermelho-pale);
  border-color: #f3d5c6;
}

.pilula-atencao {
  color: var(--ambar);
  background: var(--ambar-pale);
  border-color: #f0e0bb;
}

.pilula-ok {
  color: var(--esmeralda-forte);
  background: var(--esmeralda-pale);
  border-color: #c4e8d7;
}

.pilula-neutra {
  color: var(--g500);
  background: var(--g50);
  border-color: var(--g200);
}

/* ---------------- blocos ---------------- */

.tres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 36px;
}

.duas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 34px;
  align-items: center;
}

.cartao {
  background: var(--branco);
  border: 1px solid var(--g200);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  padding: 24px;
}

.cartao .numero {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--esmeralda);
  display: block;
  margin-bottom: 12px;
}

.cartao p {
  font-size: 14.5px;
  color: var(--g500);
  margin-bottom: 12px;
}

.cartao .resposta {
  color: var(--navy);
  font-size: 14.5px;
  margin: 0;
}

.modulos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 44px;
  margin-top: 30px;
}

.modulo {
  padding: 20px 0;
  border-bottom: 1px solid var(--g200);
}

.modulo p {
  margin: 0;
  color: var(--g500);
  font-size: 14.5px;
}

.lista-limpa {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-limpa li {
  padding: 11px 0;
  border-bottom: 1px solid var(--g100);
  font-size: 14.5px;
}

.lista-limpa li:last-child {
  border-bottom: 0;
}

.lista-limpa .dado {
  color: var(--g400);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 12px;
}

.nota-secao {
  font-size: 13.5px;
  color: var(--g400);
  max-width: 70ch;
  margin-top: 18px;
}

/* ---------------- gráficos ---------------- */

.figura {
  background: var(--branco);
  border: 1px solid var(--g200);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  padding: 22px;
  margin: 0;
}

.figura svg {
  display: block;
  width: 100%;
  height: auto;
}

.figura figcaption {
  font-size: 12.5px;
  color: var(--g400);
  margin-top: 14px;
}

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

.chamada-final {
  background: var(--navy-fundo);
  color: #dbe3ef;
  border-top: 0;
}

.chamada-final h2 {
  color: #fff;
}

.chamada-final p {
  color: #a9b6c9;
  max-width: 54ch;
}

.chamada-final .botao-vazado {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.chamada-final .botao-vazado:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

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

.rodape {
  border-top: 1px solid var(--g200);
  padding: 38px 0 54px;
  font-size: 13.5px;
  color: var(--g500);
}

.rodape-linhas {
  display: flex;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}

.rodape a {
  color: var(--g500);
  margin-right: 18px;
  text-decoration: none;
}

.rodape a:hover {
  color: var(--navy);
}

.rodape .empresa {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
}

/* ---------------- páginas legais ---------------- */

.legal {
  max-width: 740px;
  padding: 56px 0 80px;
}

.legal h1 {
  max-width: none;
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 8px;
}

.legal .atualizacao {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--g400);
  margin-bottom: 32px;
}

.legal h2 {
  font-size: 20px;
  max-width: none;
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--g200);
}

.legal h3 {
  font-size: 15.5px;
  margin: 24px 0 8px;
}

.legal p,
.legal li {
  font-size: 15.5px;
}

.legal ul,
.legal ol {
  padding-left: 22px;
  margin: 0 0 16px;
}

.legal li {
  margin-bottom: 8px;
}

.legal .resumo {
  background: var(--esmeralda-pale);
  border: 1px solid #c4e8d7;
  border-radius: var(--r);
  padding: 20px 24px;
  margin-bottom: 30px;
  color: #24614a;
}

.legal .resumo p:last-child {
  margin-bottom: 0;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14.5px;
}

.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--g200);
}

.legal th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g400);
  font-weight: 500;
}

/* ---------------- responsivo ---------------- */

@media (max-width: 940px) {
  .hero,
  .duas,
  .tres,
  .modulos {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .linha-cartoes {
    grid-template-columns: repeat(2, 1fr);
  }

  section {
    padding: 56px 0;
  }

  .topo {
    position: static;
  }
}

:focus-visible {
  outline: 2px solid var(--esmeralda);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media print {
  .topo,
  .chamada-final {
    display: none;
  }
}

/* A tabela do painel ilustrativo rola dentro do próprio quadro em telas
   estreitas, em vez de empurrar a página inteira para o lado. */
.rolagem-mini {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rolagem-mini .tabela-mini {
  min-width: 380px;
}

@media (max-width: 940px) {
  .quadro-corpo {
    padding: 14px;
  }

  .mini-cartao strong {
    font-size: 15px;
  }
}


/* ---------------- pilares da proposta ---------------- */

.pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--g200);
}

.pilar {
  padding: 30px 28px 30px 0;
  border-right: 1px solid var(--g200);
}

.pilar:last-child {
  border-right: 0;
  padding-right: 0;
}

.pilar:not(:first-child) {
  padding-left: 28px;
}

.pilar-marca {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--esmeralda);
  display: block;
  margin-bottom: 10px;
}

.pilar h3 {
  font-size: 19px;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.pilar p {
  font-size: 14.5px;
  color: var(--g500);
  margin-bottom: 14px;
}

.pilar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pilar li {
  font-size: 13.5px;
  color: var(--navy);
  padding: 5px 0 5px 18px;
  position: relative;
}

.pilar li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--esmeralda);
}

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

.planos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  align-items: start;
}

.plano {
  background: var(--branco);
  border: 1px solid var(--g200);
  border-radius: var(--r);
  padding: 28px 26px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.plano.destaque {
  border-color: var(--esmeralda);
  box-shadow: 0 0 0 1px var(--esmeralda), var(--sombra-alta);
  position: relative;
}

.plano-etiqueta {
  position: absolute;
  top: -11px;
  left: 26px;
  background: var(--esmeralda);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 100px;
}

.plano h3 {
  font-size: 20px;
  margin-bottom: 4px;
}

.plano-escopo {
  font-size: 13.5px;
  color: var(--g500);
  margin-bottom: 20px;
  min-height: 40px;
}

.plano-preco {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--navy);
  line-height: 1.1;
}

.plano-preco small {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 400;
  color: var(--g400);
  letter-spacing: 0;
}

.plano-anual {
  font-size: 12.5px;
  color: var(--esmeralda-forte);
  margin: 6px 0 0;
  font-weight: 600;
}

.plano-implantacao {
  font-size: 12px;
  color: var(--g400);
  margin: 4px 0 20px;
}

.plano ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border-top: 1px solid var(--g100);
  flex: 1;
}

.plano li {
  font-size: 13.5px;
  padding: 9px 0 9px 20px;
  border-bottom: 1px solid var(--g100);
  position: relative;
  color: var(--g700);
}

.plano li:last-child {
  border-bottom: 0;
}

.plano li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--esmeralda);
}

.plano li.ausente {
  color: var(--g400);
}

.plano li.ausente::before {
  background: var(--g300);
}

.plano .botao {
  width: 100%;
  justify-content: center;
}

.nota-planos {
  background: var(--esmeralda-pale);
  border: 1px solid #c4e8d7;
  border-radius: var(--r);
  padding: 22px 26px;
  margin-top: 26px;
}

.nota-planos p {
  margin: 0;
  font-size: 14.5px;
  color: #24614a;
  max-width: 78ch;
}

.nota-planos p + p {
  margin-top: 10px;
}

/* ---------------- comparação com alternativas ---------------- */

.tabela-comparacao {
  width: 100%;
  border-collapse: collapse;
  margin-top: 34px;
  font-size: 14.5px;
}

.tabela-comparacao th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g400);
  font-weight: 500;
  text-align: left;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--g300);
}

.tabela-comparacao td {
  padding: 14px 14px 14px 0;
  border-bottom: 1px solid var(--g200);
  vertical-align: top;
  color: var(--g500);
}

.tabela-comparacao td:first-child {
  color: var(--navy);
  font-weight: 650;
  width: 26%;
}

.tabela-comparacao tr:last-child td {
  border-bottom: 0;
}

.tabela-comparacao .nosso {
  color: var(--esmeralda-forte);
  font-weight: 600;
}

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

.perguntas {
  margin-top: 34px;
  border-top: 1px solid var(--g200);
}

.pergunta {
  border-bottom: 1px solid var(--g200);
  padding: 20px 0;
}

.pergunta h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.pergunta p {
  font-size: 14.5px;
  color: var(--g500);
  margin: 0;
  max-width: 82ch;
}

/* ---------------- responsivo ---------------- */

@media (max-width: 940px) {
  .pilares,
  .planos {
    grid-template-columns: 1fr;
  }

  .pilar {
    border-right: 0;
    border-bottom: 1px solid var(--g200);
    padding: 26px 0;
  }

  .pilar:not(:first-child) {
    padding-left: 0;
  }

  .pilar:last-child {
    border-bottom: 0;
  }

  .plano-escopo {
    min-height: 0;
  }

  .tabela-comparacao {
    font-size: 13.5px;
  }

  .tabela-comparacao td:first-child {
    width: 34%;
  }
}

/* ---------------- piloto de 90 dias ---------------- */

.secao-piloto {
  background: #f4f7fb;
  border-top: 1px solid #e3e9f2;
  border-bottom: 1px solid #e3e9f2;
}

/* Os dois lados do acordo lado a lado, e do mesmo tamanho: piloto em que
   só um lado tem obrigação é piloto que morre calado. A simetria é o
   argumento, então ela precisa ser visível antes de ser lida. */
.acordo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0 8px;
}

.acordo-lado {
  background: #fff;
  border: 1px solid #e3e9f2;
  border-radius: 14px;
  padding: 22px 24px;
}

.acordo-lado .quadro-titulo {
  margin-bottom: 12px;
}

.acordo-lado .lista-limpa li {
  padding: 7px 0;
  border-bottom: 1px solid #eef2f7;
  font-size: 15px;
  line-height: 1.55;
}

.acordo-lado .lista-limpa li:last-child {
  border-bottom: 0;
}

@media (max-width: 780px) {
  .acordo {
    grid-template-columns: 1fr;
  }
}

/* ---------------- página de segurança ---------------- */

.tabela-seguranca {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 8px;
  font-size: 15px;
}

.tabela-seguranca th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7a94;
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid #e3e9f2;
}

.tabela-seguranca td {
  padding: 11px 10px 11px 0;
  border-bottom: 1px solid #eef2f7;
  vertical-align: top;
  line-height: 1.55;
}

.tabela-seguranca tr:last-child td {
  border-bottom: 0;
}

.franco {
  background: #fff8ed;
  border: 1px solid #f0dcc0;
  border-left: 4px solid #c9821f;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 26px 0;
}

.franco p:last-child {
  margin-bottom: 0;
}

/* ---------------- página de desenvolvedores ---------------- */

.bloco-codigo {
  background: #10203a;
  color: #dbe6f5;
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre;
  margin: 16px 0;
}

/* Código dentro de texto corrido: precisa se destacar sem virar bloco. */
.legal code {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  background: #eef2f8;
  border: 1px solid #e0e7f1;
  border-radius: 5px;
  padding: 1px 5px;
}

.bloco-codigo code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}

.nota-api {
  font-size: 14px;
  color: #5b6b85;
  margin: 6px 0 26px;
}

.legal h3 {
  margin-top: 30px;
  font-size: 18px;
}