/* =============================================================================
   PAGINA PUBLICA - home e planos
   =============================================================================
   Paleta tirada do proprio emblema: navy do fundo, ciano do maquinario,
   laranja do monograma. O corpo e claro como o painel, para quem assina nao
   sentir que trocou de produto ao entrar.

   Nada de @import nem de fonte externa: a CSP so admite 'self', e uma fonte
   que nao carrega deixa a pagina pior do que a fonte do sistema, que sempre
   carrega.
   ========================================================================== */

:root {
  --navy: #0a121d;
  --navy-claro: #16233a;
  --ciano: #3fa9dd;
  --laranja: #e08b3a;
  --tinta: #16181d;
  --tinta-fraca: #5b6270;
  --linha: #dfe3ea;
  --fundo: #f4f6f9;
  --papel: #ffffff;
  --erro: #a4262c;
  --ok: #1a7f45;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--tinta);
  line-height: 1.55;
}

img { max-width: 100%; height: auto; }
a { color: #1f4f8f; }

/* ------------------------------------------------------------------ topo */
.topo {
  background: var(--navy);
  padding: 20px 22px 16px;
  text-align: center;
}
.marca-topo { display: block; }
.marca-topo img { display: block; margin: 0 auto; }

/* O AVISO COLADO NO SLOGAN. Fica na mesma faixa escura, logo abaixo da arte:
   quem le "trade the move" le, na sequencia, que nao e recomendacao. Sem
   isso o imperativo do slogan ficaria sozinho no alto da pagina. */
.aviso-slogan {
  max-width: 44rem;
  margin: 10px auto 0;
  color: #b9c4d4;
  font-size: 0.76rem;
  line-height: 1.5;
}

.menu {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.menu a {
  color: #cfd9e6;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}
.menu a:hover { color: #fff; }

/* ----------------------------------------------------------------- botoes */
.botao, .botao-linha {
  display: inline-block;
  padding: 0.62rem 1.15rem;
  border-radius: 7px;
  font-size: 0.92rem;
  font-weight: 650;
  text-decoration: none;
  border: 1px solid transparent;
}
.botao { background: var(--ciano); color: #06121e; }
.botao:hover { background: #62bce8; }
.botao-linha { border-color: #46607f; color: #cfd9e6; }
.botao-linha:hover { border-color: var(--ciano); color: #fff; }
/* Dentro do corpo claro o contorno precisa de outra cor - o mesmo cinza-azul
   da faixa escura sumiria no branco. */
main .botao-linha { border-color: #b9c2d0; color: #1f4f8f; }
main .botao-linha:hover { border-color: #1f4f8f; }

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

/* ------------------------------------------------------------------ secoes */
main { max-width: 62rem; margin: 0 auto; padding: 0 22px; }
section { padding: 46px 0; }
section + section { border-top: 1px solid var(--linha); }

h1 {
  font-size: clamp(1.55rem, 4vw, 2.15rem);
  line-height: 1.22;
  margin: 0 0 0.7rem;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2 {
  font-size: 1.28rem;
  margin: 0 0 1.1rem;
  letter-spacing: -0.01em;
}
h3 { font-size: 0.97rem; margin: 0 0 0.3rem; }

.capa { padding-top: 52px; }
.capa.estreita { max-width: 40rem; }
.chamada {
  font-size: 1.04rem;
  color: #333842;
  max-width: 40rem;
  margin: 0 0 0.8rem;
}
.acoes { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* ---------------------------------------------------------------- imagem */
.faixa-imagem figure { margin: 0; }
.faixa-imagem img {
  display: block;
  width: 100%;
  border: 1px solid var(--linha);
  border-radius: 9px;
  background: var(--papel);
}
figcaption {
  color: var(--tinta-fraca);
  font-size: 0.82rem;
  margin-top: 0.6rem;
}

/* --------------------------------------------------------------- recursos */
.grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem;
}
.grade li {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 9px;
  padding: 1rem 1.1rem;
}
.grade p { margin: 0; color: var(--tinta-fraca); font-size: 0.88rem; }

.colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.4rem;
}
.colunas p { margin: 0; color: var(--tinta-fraca); font-size: 0.88rem; }

/* ---------------------------------------------------------------- limites */
/* Bloco de maior contraste da pagina, de proposito: e o que a lei exige que
   seja lido, e aviso diluido no meio do resto e aviso que se argumenta
   depois que nao foi visto. */
.limites {
  background: #fdfaf3;
  border: 1px solid #e8dcc0;
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
  margin: 46px 0;
}
.limites + section { border-top: 0; }
.limites ul { margin: 0; padding-left: 1.15rem; }
.limites li { margin-bottom: 0.35rem; font-weight: 550; }

.fina { color: var(--tinta-fraca); font-size: 0.82rem; }

/* ----------------------------------------------------------------- planos */
.grade-planos {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}
.plano {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 1.2rem 1.1rem;
  text-align: center;
}
.preco {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.4rem 0 0.1rem;
  font-variant-numeric: tabular-nums;
}
/* Preco ainda nao definido nao pode parecer numero: cinza e sem peso, para
   ninguem ler "a definir" como se fosse valor. */
.preco.indefinido {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--tinta-fraca);
}
.por-mes, .periodo {
  margin: 0;
  color: var(--tinta-fraca);
  font-size: 0.8rem;
}

/* --------------------------------------------------------------- formulario */
.pedido form { max-width: 30rem; }
.campo { margin-bottom: 0.95rem; }
label {
  display: block;
  font-size: 0.76rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--tinta-fraca);
  margin: 0 0 0.28rem;
}
label .op { text-transform: none; letter-spacing: 0; font-weight: 400; }
input[type="text"], input[type="email"], input[type="tel"], select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--linha);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--tinta);
}
button[type="submit"] {
  padding: 0.68rem 1.3rem;
  border: 0;
  border-radius: 7px;
  background: var(--navy-claro);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
}
button[type="submit"]:hover { background: #223454; }
button[type="submit"]:disabled { opacity: 0.55; cursor: default; }

/* CAMPO-ARMADILHA. Fora da tela em vez de `display:none`: alguns robos
   ignoram o que esta escondido por display, e quase nenhum calcula posicao.
   `aria-hidden` e `tabindex=-1` no HTML mantem leitor de tela e teclado
   longe dele. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.recado {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linha);
  border-radius: 7px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  max-width: 30rem;
}
.recado.erro { background: #fdf3f3; border-color: #f0c9cb; color: var(--erro); }
.recado.ok { background: #f1f8f3; border-color: #c3e2ce; color: var(--ok); }

.dica {
  color: var(--tinta-fraca);
  font-size: 0.8rem;
  margin: 0.9rem 0 0;
}
.alternativa { color: var(--tinta-fraca); font-size: 0.88rem; margin-top: 1.4rem; }

/* ----------------------------------------------------------------- rodape */
.rodape {
  background: var(--navy);
  color: #96a3b6;
  margin-top: 40px;
  padding: 26px 22px;
}
.rodape .interno { max-width: 62rem; margin: 0 auto; }
.rodape p { margin: 0 0 0.7rem; font-size: 0.79rem; line-height: 1.55; }
.rodape a { color: #cfd9e6; }