/* Base das 3 opções do site da AC (fontes, botões, revelar na rolagem). Cada opção tem o próprio visual no index.html dela. */
@font-face { font-family: "Montserrat"; src: url(fontes/montserrat-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fontes/inter-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --titulo: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --corpo: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --marinho: #0f3457; --zap: #1fb855; --vermelho: #d4202c;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--corpo); line-height: 1.55; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--titulo); line-height: 1.12; margin: 0; letter-spacing: -.01em; }
a { color: inherit; }
.caixa { width: min(1180px, 100% - 32px); margin-inline: auto; }
.pular { position: absolute; left: -999px; }
.pular:focus { left: 12px; top: 12px; z-index: 99; background: #fff; color: #000; padding: 8px 12px; border-radius: 8px; }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px;
  font: 600 15px/1 var(--corpo); text-decoration: none; border: 0; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.botao:hover { transform: translateY(-1px); }
.botao svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.botao-zap { background: var(--zap); color: #fff; box-shadow: 0 8px 24px -10px rgba(31,184,85,.8); }
.botao-zap:hover { background: #18a34a; }
:focus-visible { outline: 3px solid #3696ff; outline-offset: 3px; }

/* revelar na rolagem (só com JS e sem "reduzir movimento") */
.js [data-revela] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js [data-revela].visto { opacity: 1; transform: none; }

.assinatura { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; opacity: .75; text-decoration: none; }
.assinatura img { height: 18px; width: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-revela] { opacity: 1; transform: none; }
}