/* Venda Integrada
 *
 * As duas cores saem da propria logo de 2016, nao de um palpite:
 *   #0073e1  o azul do "integrada" e dos nos
 *   #929497  o cinza do "venda"
 *
 * Um arquivo so para as tres paginas. Sem framework e sem fonte externa: a
 * politica de privacidade e lida pela Meta na analise do aplicativo, e pagina
 * que depende de CDN e pagina que um dia nao carrega.
 */

:root {
  --azul: #0073e1;
  --azul-escuro: #005bb4;
  --cinza: #929497;
  --texto: #1b1f24;
  --texto-fraco: #5b646e;
  --fundo: #ffffff;
  --fundo-suave: #f6f8fa;
  --borda: #e3e6ea;
  --largura: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --texto: #e8eaed;
    --texto-fraco: #a7b0ba;
    --fundo: #14171a;
    --fundo-suave: #1b1f23;
    --borda: #2a2f36;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------- cabecalho */

header.topo {
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  z-index: 10;
}

header.topo .caixa {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}

header.topo img { height: 30px; width: auto; display: block; }

header.topo nav {
  margin-left: auto;
  display: flex;
  gap: 22px;
  font-size: 15px;
}

header.topo nav a {
  color: var(--texto-fraco);
  text-decoration: none;
}

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

@media (max-width: 680px) {
  header.topo nav { display: none; }
}

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

.hero { padding: 84px 0 64px; }

.hero h1 {
  font-size: clamp(32px, 5.2vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 17ch;
}

.hero h1 b { color: var(--azul); font-weight: 700; }

.hero p.linha {
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--texto-fraco);
  max-width: 58ch;
  margin: 0 0 32px;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--azul);
  border: 1px solid color-mix(in srgb, var(--azul) 35%, transparent);
  background: color-mix(in srgb, var(--azul) 8%, transparent);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.botoes { display: flex; flex-wrap: wrap; gap: 12px; }

.botao {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid transparent;
}

.botao.cheio { background: var(--azul); color: #fff; }
.botao.cheio:hover { background: var(--azul-escuro); }

.botao.vazio {
  border-color: var(--borda);
  color: var(--texto);
}
.botao.vazio:hover { border-color: var(--azul); color: var(--azul); }

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

section { padding: 64px 0; }

section.suave { background: var(--fundo-suave); border-block: 1px solid var(--borda); }

h2 {
  font-size: clamp(24px, 3.2vw, 32px);
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}

section > .caixa > p.intro {
  color: var(--texto-fraco);
  max-width: 62ch;
  margin: 0 0 36px;
}

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.cartao {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 24px;
}

.cartao h3 {
  font-size: 18px;
  margin: 0 0 8px;
}

.cartao p {
  margin: 0;
  color: var(--texto-fraco);
  font-size: 15.5px;
}

.cartao .depois {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cinza);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 10px;
}

/* --------------------------------------------------------------- como funciona */

ol.passos { counter-reset: p; list-style: none; padding: 0; margin: 0; }

ol.passos li {
  counter-increment: p;
  position: relative;
  padding: 0 0 26px 54px;
  border-left: 2px solid var(--borda);
  margin-left: 17px;
}

ol.passos li:last-child { border-left-color: transparent; padding-bottom: 0; }

ol.passos li::before {
  content: counter(p);
  position: absolute;
  left: -18px;
  top: -2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

ol.passos h3 { font-size: 17px; margin: 4px 0 6px; }
ol.passos p { margin: 0; color: var(--texto-fraco); font-size: 15.5px; }

/* ------------------------------------------------------------------ mensagem */

.exemplo {
  background: #e4ddd4;
  border-radius: 14px;
  padding: 26px;
  display: grid;
  gap: 10px;
}

@media (prefers-color-scheme: dark) {
  .exemplo { background: #1f2a24; }
}

.balao {
  background: #fff;
  color: #111;
  border-radius: 10px 10px 10px 2px;
  padding: 12px 15px;
  max-width: 420px;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 1px 1px rgba(0,0,0,.12);
  white-space: pre-line;
}

.balao .hora {
  display: block;
  font-size: 11px;
  color: #8a9199;
  text-align: right;
  margin-top: 4px;
}

/* -------------------------------------------------------------------- texto */

.documento { padding: 56px 0 72px; max-width: 760px; }

.documento h1 { font-size: clamp(28px, 4vw, 38px); margin: 0 0 6px; letter-spacing: -0.02em; }
.documento .data { color: var(--texto-fraco); font-size: 15px; margin: 0 0 40px; }
.documento h2 { font-size: 21px; margin: 40px 0 10px; }
.documento h3 { font-size: 17px; margin: 26px 0 8px; }
.documento p, .documento li { font-size: 16.5px; }
.documento ul, .documento ol { padding-left: 22px; }
.documento li { margin-bottom: 7px; }
.documento a { color: var(--azul); }

.documento table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 15.5px;
}
.documento th, .documento td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.documento th { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-fraco); }

.aviso {
  border: 1px solid var(--borda);
  border-left: 3px solid var(--azul);
  background: var(--fundo-suave);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 24px 0;
  font-size: 15.5px;
}

.preencher {
  background: color-mix(in srgb, #e8a33d 30%, transparent);
  border-bottom: 2px solid #e8a33d;
  padding: 0 3px;
  font-weight: 600;
}

/* ------------------------------------------------------------------- rodape */

footer.rodape {
  border-top: 1px solid var(--borda);
  padding: 36px 0;
  color: var(--texto-fraco);
  font-size: 14.5px;
}

footer.rodape .caixa {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
}

footer.rodape a { color: var(--texto-fraco); text-decoration: none; }
footer.rodape a:hover { color: var(--azul); }
footer.rodape .direita { margin-left: auto; display: flex; gap: 22px; }

@media (max-width: 680px) {
  footer.rodape .direita { margin-left: 0; width: 100%; }
}