/* Identidade provisória da Chancela. Revisar quando o Caio mandar a marca.
   O logo ainda não existe: quando chegar, o ajuste é trocar --fundo-escuro e
   --marca por os tons dele, e o site inteiro acompanha. */
:root {
  --ground: #FFFFFF;
  --ground-2: #F6F7F9;
  --linha: #E3E6EB;
  --linha-forte: #CFD5DE;
  --tinta: #10151C;
  --tinta-2: #3D4756;
  --tinta-3: #6B7684;
  --marca: #0B5FD0;
  --marca-escura: #08489E;
  --marca-lavada: #EEF4FE;
  --ok: #177A45;
  --alerta: #B4402F;

  /* Azul-marinho profundo: a base dominante que a analise-visual pede.
     Faltava, e era por isso que o site lia como branco com detalhe azul. */
  --fundo-escuro: #0A1B33;
  --fundo-escuro-2: #102748;
  --linha-escura: #1E3A5F;
  --tinta-clara: #E8EDF5;
  --tinta-clara-2: #A8B8CE;
  /* Cor de acao sobre fundo escuro: o --marca nao tem contraste suficiente la. */
  --marca-clara: #5B9BF5;

  --titulo: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --corpo: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --raio: 10px;
  --raio-g: 16px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ground);
  color: var(--tinta);
  font-family: var(--corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulo); line-height: 1.15; letter-spacing: -0.022em; text-wrap: balance; }
p, li { text-wrap: pretty; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.secao { padding: 72px 0; }
.secao-cinza { background: var(--ground-2); }
.btn {
  display: inline-block; background: var(--marca); color: #fff;
  font-weight: 600; font-size: 1rem; padding: 14px 26px;
  border-radius: var(--raio); text-decoration: none;
  transition: background .15s ease;
}
.btn:hover { background: var(--marca-escura); }
.btn-vazio { background: transparent; color: var(--marca); border: 1px solid var(--linha-forte); }
.btn-vazio:hover { background: var(--marca-lavada); border-color: var(--marca); }
@media (max-width: 640px) { .secao { padding: 48px 0; } }

/* ---- Faixa de números (prova em destaque, lição do Compagno) ---- */
.numeros { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); background: var(--ground); }
.numeros-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.numero { padding: 28px 22px; text-align: center; border-right: 1px solid var(--linha); }
.numero:last-child { border-right: none; }
.numero b { display: block; font-family: var(--titulo); font-size: 2rem; font-weight: 700; color: var(--marca); letter-spacing: -0.03em; line-height: 1.1; }
.numero span { display: block; margin-top: 4px; font-size: .92rem; color: var(--tinta-3); }
@media (max-width: 720px) {
  /* Uma coluna so. Com auto-fit de 150px cabiam duas colunas em 390px e o
     terceiro numero ficava sozinho embaixo, desalinhado dos outros dois. */
  .numeros-grade { grid-template-columns: 1fr; }
  .numero { border-right: none; border-bottom: 1px solid var(--linha); padding: 20px; text-align: left; }
  .numero:last-child { border-bottom: none; }
}

/* ---- Transicao entre secoes ----
   Corte reto entre faixas de cor deixa a pagina com cara de bloco empilhado.
   Aqui a emenda ganha respiro: mais ar no encontro de dois tons, e um fio
   sutil onde duas faixas claras se tocam, para separar sem criar barra. */
.secao + .secao { padding-top: 76px; }
/* faixa clara logo apos faixa escura, e o contrario: mais folga na emenda */
.secao-escura + .secao,
.secao + .secao-escura { padding-top: 84px; }
.secao-escura { padding-top: 84px; padding-bottom: 84px; }
/* Emenda entre faixas claras. Branco (#FFF) contra cinza (#F6F7F9) da 1.07:1 e
   duas faixas de mesma cor dao 1.00:1 — nos dois casos a divisa some e as
   secoes viram um bloco so. O fio de 1px e o que separa sem criar barra.
   A regra antiga so pegava branco+branco e deixava passar cinza+cinza (que era
   o caso do corretor e do consorcio, onde o fecho cinza cola na secao cinza). */
.secao:not(.secao-escura) + .secao:not(.secao-escura),
.secao:not(.secao-escura) + .fecho:not(.secao-escura),
.numeros + .secao:not(.secao-escura) {
  border-top: 1px solid var(--linha);
}
/* Faixa clara seguida de outra de MESMA cor precisa de mais que o fio: sem
   contraste de fundo, o unico sinal de que mudou de assunto e o espaco. */
.secao-cinza + .secao-cinza,
.secao-cinza + .fecho.secao-cinza {
  padding-top: 92px;
}
/* o degrade curto suaviza a passagem do escuro para o claro sem virar sombra */
.secao-escura + .secao:not(.secao-escura)::before,
.hero + .secao::before {
  content: "";
  display: block;
  height: 40px;
  margin: -84px 0 44px;
  background: linear-gradient(to bottom, rgba(10, 27, 51, .05), transparent);
}
@media (max-width: 640px) {
  .secao + .secao,
  .secao-escura + .secao,
  .secao + .secao-escura,
  .secao-escura { padding-top: 52px; padding-bottom: 52px; }
}

/* ---- Entrada suave ao rolar. Respeita quem pediu menos movimento. ---- */
.revelar { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.revelar.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
}

/* ---- Bloco "quem atende": foto ao lado do texto ---- */
.quem-bloco { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 44px; align-items: center; }
.quem-texto h2 { font-size: 1.7rem; margin-bottom: 12px; }
.quem-texto p { color: var(--tinta-2); margin-bottom: 14px; }
.quem-foto img { border-radius: var(--raio-g); width: 100%; height: auto; }
@media (max-width: 760px) { .quem-bloco { grid-template-columns: 1fr; gap: 26px; } }

/* ---- Ícone do produto, no traço do selo ---- */
.produto { display: flex; gap: 16px; align-items: flex-start; }
.produto-icone { width: 34px; height: 34px; flex: none; color: var(--marca); }
.produto-icone svg { width: 100%; height: 100%; }
.produto-texto h3 { margin-bottom: 6px; }