/* Identidade da Chancela, entregue pela designer Tai Giuffrida em 21/10/2026
   (PDF em propostas/giga-seguros/marca/). Tres cores: creme #F7F4F2, turquesa
   #14ADAB e petroleo #0A4656; Montserrat no texto (a Vonique 92 so existe no
   logo, ja convertida em vetor). O PDF diz "RGB 10 70 66" no petroleo, mas o
   hex e a cor usada nos proprios textos do PDF sao #0A4656: vale o hex.

   Turquesa sobre branco da 2.8:1, entao NUNCA vira texto em faixa clara. Em
   faixa escura serve para titulo, numero e CTA (botao turquesa leva texto
   #062E38, 5.2:1). A paleta anterior (petroleo do RioCert + ambar, 16/09)
   esta no historico do git. */
:root {
  --ground: #FFFFFF;
  --ground-2: #F7F4F2;
  --linha: #E8E2DD;
  --linha-forte: #D2CAC3;
  --tinta: #0E1618;
  --tinta-2: #3A4A4D;
  --tinta-3: #5A6B6E;   /* herdado do RioCert */
  --marca: #0A4656;     /* o petroleo do RioCert: o elo entre as marcas */
  --marca-escura: #07333F;
  --marca-lavada: #E4F4F3;
  --ok: #177A45;
  --alerta: #B4402F;

  /* Acento proprio da Chancela. Contraste 4.6:1 sobre branco e 5.9:1 sobre o
     --fundo-escuro, entao serve para titulo, numero e CTA. NUNCA em corpo de
     texto: em 16px o limite fica apertado demais. */
  --acento: #14ADAB;
  --acento-claro: #4FD1CE;

  /* Petroleo profundo: a base dominante que a analise-visual pede.
     Mais escuro que o --marca para as duas leituras nao se confundirem. */
  --fundo-escuro: #0A4656;
  --fundo-escuro-2: #0F5567;
  --linha-escura: #1E6577;
  --tinta-clara: #EAF3F3;
  --tinta-clara-2: #A9C6CC;
  /* Cor de acao sobre fundo escuro: o --marca nao tem contraste suficiente la. */
  --marca-clara: #4FD1CE;

  --titulo: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --corpo: "Montserrat", "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); }
/* Colunas de largura IGUAL. Com auto-fit + minmax cada coluna crescia conforme
   o texto dela, entao os divisores ficavam fora do centro e os numeros
   desalinhados entre si (visto na faixa 100+ / 10 anos / Zona Oeste). */
.numeros-grade { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; 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. */
  /* `grid-auto-flow: row` junto: a regra de cima poe `column`, e trocar so o
     grid-template-columns nao desfaz isso — as colunas restantes viram
     trilhas implicitas de `grid-auto-columns: 1fr` e os numeros seguem lado a
     lado, estourando a largura da tela no celular. */
  .numeros-grade { grid-template-columns: 1fr; grid-auto-flow: row; }
  /* segue centralizado no celular: em uma coluna so, o alinhamento a esquerda
     deixava numero e legenda encostados na borda em vez de no meio da faixa */
  .numero { border-right: none; border-bottom: 1px solid var(--linha); padding: 20px; }
  .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, 70, 86, .05), transparent);
}
@media (max-width: 640px) {
  .secao + .secao,
  .secao-escura + .secao,
  .secao + .secao-escura,
  .secao-escura { padding-top: 52px; padding-bottom: 52px; }
}


/* ---- 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; }
/* Em faixa escura: o texto herda a cor clara, a foto ganha borda para nao
   flutuar sobre o petroleo, e o botao vai de ambar (o .btn padrao e petroleo e
   sumiria no fundo). */
.secao-escura .quem-texto h2 { color: #fff; }
.secao-escura .quem-texto p { color: var(--tinta-clara-2); }
.secao-escura .quem-foto img { border: 1px solid var(--linha-escura); }
.secao-escura .quem-texto .btn { background: var(--acento); color: #062E38; }
.secao-escura .quem-texto .btn:hover { background: var(--acento-claro); }
@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; }