/* Base: cores da marca, fonte, botões, seções e animação de entrada. Mudou a cor da marca? Só aqui. */
:root {
  --azul: #0A1733;        /* azul profundo da marca */
  --azul-2: #11234A;
  --azul-3: #1B3263;
  --caminho: #5B8CFF;     /* azul-caminho (o trajeto do C) */
  --verde: #1FBF75;       /* o "sim" */
  --verde-esc: #0F8A55;   /* sim sobre fundo claro */
  --gelo: #F2F6FC;
  --texto: #0A1733;
  --texto-2: #4A5A7A;
  --linha: #DCE4F2;
  --raio: 18px;
  --sombra: 0 18px 50px rgba(10, 23, 51, .12);
  --topo-altura: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* garante que "hidden" esconda mesmo com display definido no CSS */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-altura) + 12px); }
body { margin: 0; font-family: Sora, system-ui, sans-serif; color: var(--texto); background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.02em; }
h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 700; }
p { margin: 0; }
em { font-style: normal; color: var(--verde); }
.container { width: min(1180px, 100% - 32px); margin-inline: auto; }
.estreito { width: min(820px, 100% - 32px); }
.pular { position: absolute; left: -999px; top: 8px; background: var(--verde); color: var(--azul); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.pular:focus { left: 8px; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: inherit; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--caminho); outline-offset: 3px; }
.btn-verde { background: var(--verde); color: var(--azul); box-shadow: 0 8px 24px rgba(31, 191, 117, .35); }
.btn-verde:hover { box-shadow: 0 12px 30px rgba(31, 191, 117, .5); }
.btn-linha { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn-linha:hover { background: rgba(255, 255, 255, .08); }
.btn-linha-escura { border-color: var(--azul); color: var(--azul); background: transparent; }
.btn-linha-escura:hover { background: var(--azul); color: #fff; }
.btn-grande { padding: 15px 28px; font-size: 16px; }
.btn-peq { padding: 9px 16px; font-size: 14px; }
.btn-bloco { width: 100%; }

/* seções */
.secao { padding: clamp(64px, 9vw, 112px) 0; background: var(--gelo); }
.secao.clara { background: #fff; }
.titulo { max-width: 720px; margin-bottom: 40px; }
.titulo p { color: var(--texto-2); margin-top: 14px; font-size: 17px; }
.rotulo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--verde-esc); margin-bottom: 12px; }
.rotulo::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; transform: rotate(45deg); } /* mini C */

/* entrada suave dos blocos ao rolar (js/geral.js põe a classe .visivel) */
.revela { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .revela { opacity: 1; transform: none; }
}