:root {
  --marinho: #1f3864;
  --marinho-escuro: #14213f;
  --marinho-claro: #3e64a0;
  --acento: #c0611a;
  --acento-forte: #a5510f;
  --verde: #1e7566;
  --fundo: #f7f8fa;
  --superficie: #ffffff;
  --borda: #e6e9ef;
  --texto: #29313f;
  --texto-medio: #5b6474;
  --texto-fraco: #8a93a6;
  --corpo: "Inter", Helvetica, Arial, sans-serif;
  --display: "Manrope", "Inter", sans-serif;
  --mono: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--corpo);
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); color: var(--marinho); letter-spacing: -0.01em; }

.faixa {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-solido { background: var(--acento); color: #fff; box-shadow: 0 6px 16px rgba(192, 97, 26, 0.28); }
.btn-solido:hover { background: var(--acento-forte); }

.btn-fantasma { color: var(--marinho); background: transparent; }
.btn-fantasma:hover { background: rgba(31, 56, 100, 0.06); }

.btn-linha { color: var(--marinho); border-color: var(--marinho); background: transparent; }
.btn-linha:hover { background: rgba(31, 56, 100, 0.06); }

.btn-linha-clara { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn-linha-clara:hover { background: rgba(255, 255, 255, 0.1); }

.btn-grande { padding: 13px 24px; font-size: 1rem; }

/* Topo */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 248, 250, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}
.faixa.topo-faixa { display: flex; }
.topo .faixa { display: flex; align-items: center; justify-content: space-between; height: 68px; }

.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-icone { width: 34px; height: 34px; object-fit: contain; }
.marca-texto { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--marinho); }
.marca-texto strong { color: var(--acento); }

.nav-topo { display: flex; gap: 28px; }
.nav-topo a { color: var(--texto-medio); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.nav-topo a:hover { color: var(--marinho); }

.acoes-topo { display: flex; align-items: center; gap: 10px; }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
  padding: 96px 0 84px;
}
.hero-grade {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(31, 56, 100, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 56, 100, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 40%, transparent 100%);
}
.hero-conteudo { position: relative; max-width: 760px; }

.etiqueta-secao {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
  font-weight: 500;
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  font-weight: 800;
  line-height: 1.14;
  margin-bottom: 22px;
}
.hero h1 span { color: var(--marinho-claro); }

.hero-sub {
  font-size: 1.12rem;
  color: var(--texto-medio);
  max-width: 620px;
  margin-bottom: 34px;
}

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }

.hero-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--texto-fraco);
  font-family: var(--mono);
}
.selo-ponto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 4px rgba(30, 117, 102, 0.15);
}

/* Dores */
.dor { padding: 8px 0 88px; }
.dor-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dor-item {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 26px 24px;
}
.dor-numero {
  display: block;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--acento);
  font-weight: 600;
  margin-bottom: 10px;
}
.dor-item p { color: var(--texto-medio); font-size: 0.96rem; }

/* Seções gerais */
.secao { padding: 84px 0; }
.secao-alt { background: var(--superficie); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }

.secao h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  margin-bottom: 44px;
  max-width: 640px;
}

/* Passos */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.passo {
  border-top: 3px solid var(--marinho);
  padding-top: 18px;
}
.passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--marinho);
  color: #fff;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 14px;
}
.passo h3 { font-size: 1.04rem; margin-bottom: 8px; }
.passo p { color: var(--texto-medio); font-size: 0.92rem; }

/* Públicos */
.publicos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.publico-card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 32px 30px;
}
.publico-card h3 { font-size: 1.3rem; margin-bottom: 4px; }
.publico-sub { color: var(--texto-fraco); font-size: 0.88rem; margin-bottom: 20px; }
.publico-card ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 22px; }
.publico-card li {
  position: relative;
  padding-left: 20px;
  color: var(--texto-medio);
  font-size: 0.94rem;
}
.publico-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 7px; height: 7px;
  background: var(--acento);
  border-radius: 2px;
}
.link-publico { color: var(--marinho); font-weight: 600; text-decoration: none; font-size: 0.94rem; }
.link-publico:hover { color: var(--acento); }

/* Confiança */
.confianca-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.confianca-item { padding-left: 18px; border-left: 2px solid var(--borda); }
.confianca-marca { display: block; width: 22px; height: 3px; border-radius: 2px; margin-bottom: 16px; }
.marca-marinho { background: var(--marinho); }
.marca-laranja { background: var(--acento); }
.marca-verde { background: var(--verde); }
.confianca-item h3 { font-size: 1.02rem; margin-bottom: 8px; }
.confianca-item p { color: var(--texto-medio); font-size: 0.92rem; }

/* CTA final */
.cta-final {
  background: var(--marinho);
  padding: 76px 0;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 97, 26, 0.35), transparent 70%);
}
.cta-final-conteudo { position: relative; text-align: center; }
.cta-final h2 { color: #fff; max-width: 640px; margin: 0 auto 30px; }
.cta-final .hero-cta { justify-content: center; margin-bottom: 0; }

/* Rodapé */
.rodape { padding: 40px 0; border-top: 1px solid var(--borda); }
.rodape-conteudo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.rodape-nota { color: var(--texto-fraco); font-size: 0.86rem; }

/* Responsivo */
@media (max-width: 900px) {
  .nav-topo { display: none; }
  .dor-grade { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr 1fr; }
  .publicos { grid-template-columns: 1fr; }
  .confianca-grade { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .passos { grid-template-columns: 1fr; }
  .acoes-topo .btn-fantasma { display: none; }
  .hero { padding: 64px 0 56px; }
  .secao { padding: 60px 0; }
}