/* Neat Chat — site institucional (2026). Sem framework: uma folha só.
   Paleta e fontes do neatsistema.com.br: azul-marinho #034ea2, azul-céu #00b9f2, Sora e Inter. */
:root {
  --navy-950: #011a3d;
  --navy-900: #022451;
  --navy-800: #02357a;
  --navy: #034ea2;
  --navy-300: #8fb4e3;
  --navy-100: #dce8f7;
  --navy-50: #f0f6ff;
  --orange: #00b9f2;
  --orange-600: #0077a8;
  --orange-50: #e6f7fd;
  --orange-700: #00628a;
  --green: #1fa855;
  --ink: #1a2d3f;
  --text: #4a6278;
  --muted: #5f7388;
  --bg: #ffffff;
  --bg-soft: #f7f9fc;
  --border: #e1e8f2;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(1, 26, 61, 0.06);
  --shadow: 0 12px 32px rgba(1, 26, 61, 0.10);
  --shadow-lg: 0 30px 70px rgba(1, 26, 61, 0.20);
  --font-title: "Sora", "Segoe UI", Arial, sans-serif;
  --font-text: "Inter", "Segoe UI", Arial, sans-serif;
  --wrap: 1200px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
h1, h2, h3, h4 { font-family: var(--font-title); color: var(--ink); margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Botões ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--font-title); font-weight: 700; font-size: 16px; text-decoration: none;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 8px 22px rgba(3, 78, 162, .30); }
.btn-primary:hover { background: var(--navy-800); }
/* Sobre o cartão escuro do fim da página o azul-marinho sumiria: botão branco. */
.final .btn-primary { background: #fff; color: var(--navy); box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.final .btn-primary:hover { background: var(--navy-50); }
.btn-ghost { border-color: var(--navy-100); color: var(--navy); background: #fff; }
.btn-ghost:hover { border-color: var(--navy); }
.btn-light { background: #fff; color: var(--navy-900); }
.btn-outline-light { border-color: rgba(255,255,255,.35); color: #fff; background: transparent; }
.btn-outline-light:hover { border-color: #fff; }
.btn-sm { padding: 10px 18px; font-size: 15px; }

/* ── Cabeçalho ──────────────────────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease;
}
.topo.rolou { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.topo .wrap { display: flex; align-items: center; gap: 28px; height: 76px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca img { height: 46px; width: auto; }
.menu { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.menu a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15.5px; }
.menu a:hover { color: var(--navy); }
.acoes-topo { display: flex; align-items: center; gap: 14px; }
.acoes-topo .entrar { color: var(--navy); font-weight: 700; text-decoration: none; font-size: 15.5px; }
/* O botão azul-marinho do topo é um link do menu: sem isto herdaria a cor escura dos links. */
.menu .btn-primary, .menu .btn-primary:hover { color: #fff; }
.botao-menu { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
.botao-menu svg { width: 28px; height: 28px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  padding: 72px 0 96px;
  background:
    radial-gradient(820px 460px at 88% 8%, rgba(0, 185, 242, .20), transparent 62%),
    radial-gradient(700px 420px at 0% 95%, rgba(3, 78, 162, .10), transparent 60%),
    linear-gradient(180deg, #f3f8ff 0%, #ffffff 100%);
}
.hero .wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.selo {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px;
  border-radius: 999px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.selo b { background: var(--orange-600); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12px; letter-spacing: .06em; font-family: var(--font-title); }
.hero h1 { position: relative; z-index: 0; font-size: clamp(36px, 4.3vw, 56px); font-weight: 800; margin: 22px 0 20px; }
.hero h1 em { font-style: normal; color: var(--navy); position: relative; white-space: nowrap; }
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 12px; z-index: -1;
  background: rgba(0, 185, 242, .45); border-radius: 6px;
}
.hero .sub { font-size: 19px; color: var(--text); max-width: 560px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 26px; }
.hero .ctas .btn { padding: 14px 22px; }
.provas { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: var(--muted); }
.provas li { display: flex; align-items: center; gap: 8px; }
.provas svg { width: 18px; height: 18px; color: var(--green); flex: none; }

.vitrine { position: relative; }
.navegador {
  background: #fff; border-radius: 18px; border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); overflow: hidden;
  transform: perspective(1600px) rotateY(-7deg) rotateX(2deg);
  transform-origin: left center;
}
.navegador .barra { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #f1f4f8; border-bottom: 1px solid var(--border); }
.navegador .barra i { width: 11px; height: 11px; border-radius: 50%; background: #d5dbe4; display: block; }
.navegador .barra span { margin-left: 12px; font-size: 12.5px; color: var(--muted); background: #fff; border-radius: 6px; padding: 3px 12px; }
.ficha {
  position: absolute; display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow);
  border: 1px solid var(--border); font-size: 14px; line-height: 1.35; color: var(--ink);
}
.ficha .ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.ficha .ico svg { width: 20px; height: 20px; }
.ficha small { display: block; color: var(--muted); font-size: 12.5px; }
.ficha-1 { left: -26px; bottom: 54px; }
.ficha-1 .ico { background: var(--orange-50); color: var(--orange-600); }
.ficha-2 { right: -14px; top: 38px; }
.ficha-2 .ico { background: var(--navy-50); color: var(--navy); }

/* ── Seções ─────────────────────────────────────────────────────────────── */
.secao { padding: 104px 0; }
.secao.suave { background: var(--bg-soft); }
.olho {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-title); font-weight: 700; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
}
.olho::before { content: ""; width: 28px; height: 4px; border-radius: 4px; background: var(--orange); }
.cabeca { max-width: 760px; margin-bottom: 52px; }
.cabeca.centro { margin-left: auto; margin-right: auto; text-align: center; }
.cabeca.centro .olho { justify-content: center; }
.cabeca h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; margin: 14px 0 16px; }
.cabeca p { font-size: 18.5px; }

.grade { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.cartao {
  position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cartao:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(0, 185, 242, .45); }
.cartao .ico { width: 50px; height: 50px; border-radius: 14px; background: var(--orange-50); color: var(--orange-700); display: grid; place-items: center; margin-bottom: 18px; }
.cartao .ico svg { width: 25px; height: 25px; }
.cartao h3 { font-size: 19.5px; font-weight: 700; margin-bottom: 8px; }
.cartao p { font-size: 15.5px; }
.novo {
  position: absolute; top: 22px; right: 22px; background: var(--orange-600); color: #fff;
  font-family: var(--font-title); font-weight: 800; font-size: 11.5px; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px;
}

/* Antes × depois */
.troca { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #fff; }
.troca > div { padding: 26px 28px; }
.troca .antes { background: #fbfcfe; border-right: 1px solid var(--border); }
.troca .antes .troca-rotulo { color: var(--muted); }
.troca .troca-rotulo { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.troca .depois .troca-rotulo { color: var(--green); }
.troca p { font-size: 16px; color: var(--ink); }
.troca .antes p { color: var(--text); }
.troca .troca-rotulo svg { width: 16px; height: 16px; }
.grade > .troca { grid-template-columns: 1fr; }
.grade > .troca .antes { border-right: 0; border-bottom: 1px solid var(--border); }

/* Destaque com imagem */
.destaque { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.destaque.inverso { grid-template-columns: .85fr 1.15fr; }
.destaque.inverso .tela { order: 2; }
.tela {
  border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: #fff;
  box-shadow: var(--shadow-lg);
}
.texto-destaque h3, .h2-destaque { font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; margin: 14px 0 16px; }
.texto-destaque > p { font-size: 18px; margin-bottom: 24px; }
.lista-check li { display: flex; gap: 12px; margin-bottom: 14px; font-size: 16.5px; }
.lista-check svg { width: 22px; height: 22px; flex: none; color: var(--orange-700); margin-top: 2px; }
.lista-check b { color: var(--ink); }
.empilha > .destaque + .destaque { margin-top: 110px; }

/* Faixa escura (CRM) */
.escuro {
  background:
    radial-gradient(800px 420px at 90% 0%, rgba(0, 185, 242, .16), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(143, 180, 227, .18), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800) 55%, var(--navy));
  color: #c4d6ee;
}
.escuro h2, .escuro h3, .escuro b { color: #fff; }
.escuro .olho { color: var(--orange); }
.escuro .cabeca p { color: #c4d6ee; }
.escuro .tela { border-color: rgba(255,255,255,.12); }
.escuro .lista-check svg { color: var(--orange); }
.escuro .cartao { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.escuro .cartao:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); box-shadow: none; }
.escuro .cartao p { color: #c4d6ee; }
.escuro .cartao .ico { background: rgba(0, 185, 242,.14); color: var(--orange); }
.pilulas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pilulas span { border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 999px; padding: 9px 18px; font-weight: 700; font-family: var(--font-title); font-size: 15px; }
.subtitulo-faixa { color: #fff; font-size: 24px; font-weight: 800; margin: 96px 0 28px; text-align: center; }

/* Fluxo exemplo */
.fluxo { display: grid; gap: 0; margin-top: 8px; }
.passo-fluxo { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; }
.passo-fluxo b { font-family: var(--font-title); font-size: 12.5px; letter-spacing: .1em; color: var(--navy); min-width: 92px; }
.passo-fluxo.final { background: var(--navy); border-color: var(--navy); color: #fff; }
.passo-fluxo.final b { color: var(--orange); }
.seta-fluxo { width: 2px; height: 18px; background: var(--navy-100); margin-left: 36px; }

/* Comparação de canais */
.canais { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; }
.canal { border-radius: var(--radius); padding: 30px; border: 1px solid var(--border); background: #fff; }
.canal.oficial { background: var(--navy); border-color: var(--navy); color: #d6e4f5; }
.canal.oficial h3 { color: #fff; }
.canal .rotulo { font-family: var(--font-title); font-size: 12.5px; letter-spacing: .12em; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.canal.oficial .rotulo { color: var(--orange); }
.canal h3 { font-size: 22px; margin: 8px 0 14px; }
.canal li { display: flex; gap: 10px; margin-bottom: 10px; font-size: 15.5px; }
.canal li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--green); }
.canal.oficial li svg { color: var(--orange); }

/* Passos */
.passos { counter-reset: passo; }
.passos .cartao::before {
  counter-increment: passo; content: "0" counter(passo);
  display: block; font-family: var(--font-title); font-weight: 800; font-size: 38px; color: var(--orange); margin-bottom: 8px;
}

/* Proposta */
.proposta { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.form {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow);
}
.form fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.form legend { font-family: var(--font-title); font-weight: 700; color: var(--ink); margin-bottom: 12px; font-size: 16px; }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcao {
  position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; font-size: 15px; color: var(--ink); line-height: 1.35;
  transition: border-color .15s ease, background .15s ease;
}
.opcao input { margin-top: 3px; accent-color: var(--navy); width: 17px; height: 17px; flex: none; }
.opcao:has(input:checked) { border-color: var(--navy); background: var(--navy-50); }
.opcao small { display: block; color: var(--muted); font-size: 13px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo label { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(3, 78, 162,.12); }
.campo.inteiro { grid-column: 1 / -1; }
.form .rodape-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.form .aviso { font-size: 13.5px; color: var(--muted); margin-top: 14px; }
.retorno { margin-top: 16px; padding: 14px 16px; border-radius: 12px; font-size: 15px; display: none; }
.retorno.ok { display: block; background: #e8f7ee; color: #14663a; }
.retorno.erro { display: block; background: #fdeceb; color: #8a1f17; }
.inclui li { display: flex; gap: 12px; margin-bottom: 16px; }
.inclui svg { width: 24px; height: 24px; flex: none; color: var(--green); }

/* Dúvidas */
.duvidas { max-width: 860px; margin: 0 auto; }
.duvidas details { border-bottom: 1px solid var(--border); padding: 22px 0; }
.duvidas summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center;
  font-family: var(--font-title); font-weight: 700; font-size: 18.5px; color: var(--ink);
}
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: "+"; font-size: 28px; font-weight: 400; color: var(--navy); line-height: 1; transition: transform .2s ease; }
.duvidas details[open] summary::after { transform: rotate(45deg); }
.duvidas details p { margin-top: 12px; font-size: 16.5px; }

/* Chamada final */
.final {
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: center;
  border-radius: 32px; padding: 64px; color: #c4d6ee;
  background:
    radial-gradient(640px 340px at 100% 0%, rgba(0, 185, 242,.38), transparent 62%),
    radial-gradient(420px 260px at 0% 100%, rgba(0, 185, 242,.16), transparent 60%),
    linear-gradient(140deg, var(--navy-900), var(--navy));
}
.final h2 { color: #fff; font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; margin-bottom: 16px; }
.final p { font-size: 18.5px; }
.final .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.contatos { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; font-size: 16px; }
.contatos a { color: #fff; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.contatos svg { width: 18px; height: 18px; color: var(--orange); }
.qr { background: #fff; border-radius: 22px; padding: 26px; text-align: center; color: var(--navy); font-weight: 700; font-family: var(--font-title); }
.qr img { width: 220px; height: 220px; margin: 0 auto 12px; }

/* Rodapé */
.rodape { padding: 64px 0 40px; background: var(--navy-950); color: #9db5d6; font-size: 15px; }
.rodape .colunas { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.rodape .rodape-titulo { color: #fff; font-size: 15px; margin-bottom: 14px; }
.rodape a { color: #c4d6ee; text-decoration: none; }
.rodape a:hover { color: #fff; }
.rodape li { margin-bottom: 9px; }
.rodape .logo-rodape { background: #fff; border-radius: 14px; padding: 8px 12px; display: inline-block; margin-bottom: 16px; }
.rodape .logo-rodape img { height: 46px; width: auto; }
.rodape .base { border-top: 1px solid rgba(255,255,255,.08); margin-top: 44px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13.5px; color: #7f9cc0; }

/* WhatsApp flutuante */
.zap {
  position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 60px; height: 60px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(37,211,102,.45);
  transition: transform .15s ease;
}
.zap:hover { transform: scale(1.06); }
.zap svg { width: 32px; height: 32px; }

/* Animação de entrada (respeita quem prefere menos movimento) */
.js .surge { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .surge.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .surge { opacity: 1; transform: none; transition: none; }
  .navegador { transform: none; }
}

/* ── Responsivo ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .menu { gap: 18px; }
  .menu a { font-size: 15px; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .menu, .acoes-topo { display: none; }
  .botao-menu { display: block; }
  .topo.aberto .menu {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 76px; left: 0; right: 0; background: #fff; padding: 12px 24px 20px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
  }
  .topo.aberto .menu a { padding: 10px 0; font-size: 17px; width: 100%; }
  .topo.aberto .acoes-topo { display: flex; flex-wrap: wrap; width: 100%; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
  .topo.aberto .acoes-topo .btn { flex: 1; }
  .topo.aberto .menu { max-height: calc(100vh - 76px); overflow-y: auto; }
  .hero { padding: 48px 0 72px; }
  .hero .wrap, .destaque, .destaque.inverso, .proposta, .final { grid-template-columns: 1fr; }
  .destaque.inverso .tela { order: 0; }
  .navegador { transform: none; }
  .ficha-1 { left: 10px; bottom: -24px; }
  .ficha-2 { right: 10px; top: -20px; }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .rodape .colunas { grid-template-columns: 1fr 1fr; }
  .final { padding: 44px 32px; }
  .secao { padding: 80px 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .g2, .g3, .g4, .troca, .canais, .opcoes, .campos { grid-template-columns: 1fr; }
  .troca .antes { border-right: 0; border-bottom: 1px solid var(--border); }
  .hero .ctas .btn { width: 100%; }
  .ficha { display: none; }
  .form { padding: 24px; }
  .rodape .colunas { grid-template-columns: 1fr; }
  .qr img { width: 180px; height: 180px; }
  .final { padding: 36px 22px; border-radius: 24px; }
}

/* ── Navegação: pular para o conteúdo e submenu de soluções ─────────────── */
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.pular:focus { top: 12px; }
.submenu { position: relative; }
.submenu-botao {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink); font-weight: 500; font-size: 15.5px;
}
.submenu-botao:hover { color: var(--navy); }
.submenu-botao .seta { width: 15px; height: 15px; transform: rotate(90deg); transition: transform .2s ease; }
.submenu.aberto .submenu-botao .seta { transform: rotate(-90deg); }
.submenu-lista {
  position: absolute; top: calc(100% + 14px); left: -16px; min-width: 270px; padding: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.submenu.aberto .submenu-lista { opacity: 1; visibility: visible; transform: none; }
.submenu-lista a { display: block; padding: 9px 12px; border-radius: 9px; }
.submenu-lista a:hover { background: var(--navy-50); }
:focus-visible { outline: 3px solid rgba(0, 185, 242, .7); outline-offset: 2px; }

/* ── Páginas de solução ─────────────────────────────────────────────────── */
.hero-solucao { padding-top: 48px; }
.hero-solucao h1 { font-size: clamp(34px, 4.4vw, 54px); margin-top: 14px; }
.migalhas { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.migalhas a { color: var(--muted); text-decoration: none; }
.migalhas a:hover { color: var(--navy); text-decoration: underline; }
.passos-lista { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow); }
.passos-titulo { font-size: 21px; margin-bottom: 18px; }
.passos-ol { counter-reset: p; margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.passos-ol li { counter-increment: p; display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; }
.passos-ol li::before {
  content: counter(p); grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--orange-50); color: var(--orange-600); font-family: var(--font-title); font-weight: 800; font-size: 19px;
}
.passos-ol b { color: var(--ink); font-family: var(--font-title); }
.passos-ol span { font-size: 15.5px; }
.cartao-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.cartao-link p { flex: 1; }
.cartao-link .mais { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--navy); font-weight: 700; font-family: var(--font-title); font-size: 15px; }
.cartao-link .mais svg { width: 17px; height: 17px; transition: transform .15s ease; }
.cartao-link:hover .mais svg { transform: translateX(3px); }

/* ── Home: ajustes ──────────────────────────────────────────────────────── */
.espaco-topo { margin-top: 96px; }
.centro-link { text-align: center; margin-top: 48px; }
.secao-final { padding-top: 24px; }

/* ── Proposta e formulário ──────────────────────────────────────────────── */
#proposta.suave { background: linear-gradient(180deg, #e6f7fd 0%, #f7f9fc 55%); }
.intro-proposta { font-size: 18.5px; margin-bottom: 26px; }
.alternativa { border-top: 1px solid var(--border); padding-top: 22px; margin-top: 8px; }
.alternativa p { font-weight: 700; color: var(--ink); margin-bottom: 12px; font-family: var(--font-title); }
.form .qualifica { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px dashed var(--border); }
.form .qualifica legend { padding: 0; }
.form .qualifica legend span { font-weight: 400; color: var(--muted); font-size: 14px; font-family: var(--font-text); }
.form .qualifica .campos + .rotulo-grupo,
.form .qualifica .opcoes + .campos { margin-top: 16px; }
.rotulo-grupo { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.form .opcoes { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.form .opcao { padding: 10px 12px; font-size: 14.5px; }
.erro-campo { display: block; color: #b42318; font-size: 13.5px; margin-top: 4px; }
.erro-campo:empty { display: none; }
.campo.invalido input, .campo.invalido select { border-color: #d92d20; }
.consentimento { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.consentimento input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--navy); }
.aviso-form { font-size: 13.5px; color: var(--muted); }
.form button[disabled] { opacity: .7; cursor: progress; transform: none; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Páginas simples (obrigado, 404, privacidade) ───────────────────────── */
.estreito { max-width: 820px; }
.centro { text-align: center; }
.centro-flex { justify-content: center; }
.pagina-simples { padding: 120px 0; min-height: 60vh; }
.pagina-simples h1 { font-size: clamp(32px, 4vw, 46px); font-weight: 800; margin: 18px 0 16px; }
.pagina-simples .sub { font-size: 18.5px; }
.pagina-simples .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.ico-grande { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: #e8f7ee; color: var(--green); }
.ico-grande svg { width: 40px; height: 40px; }
.pagina-texto { padding: 64px 0 96px; }
.pagina-texto h1 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; margin-bottom: 16px; }
.pagina-texto .sub { font-size: 18.5px; margin-bottom: 12px; }
.pagina-texto h2 { font-size: 22px; margin: 34px 0 10px; }
.pagina-texto p + p { margin-top: 12px; }
.pagina-texto ul { list-style: disc; padding-left: 22px; }
.pagina-texto li { margin-bottom: 8px; }
.pagina-texto .atualizado { margin-top: 32px; font-size: 14px; color: var(--muted); }

@media (max-width: 960px) {
  .passos-lista { padding: 26px; }
  .submenu { width: 100%; }
  .submenu-botao { width: 100%; justify-content: space-between; padding: 10px 0; font-size: 17px; }
  .submenu-lista { position: static; display: none; box-shadow: none; border: 0; padding: 0 0 6px 14px; min-width: 0; opacity: 1; visibility: visible; transform: none; }
  .submenu.aberto .submenu-lista { display: block; }
  .topo.aberto .submenu-lista a { padding: 8px 0; font-size: 16px; }
  .espaco-topo { margin-top: 72px; }
}
@media (max-width: 640px) {
  .form .opcoes { grid-template-columns: 1fr 1fr; }
  .pagina-simples { padding: 80px 0; }
  .pagina-simples .ctas .btn { width: 100%; }
}

/* Telas pequenas (320 px): item de grade encolhe abaixo do conteúdo e botão quebra linha. */
.grade > *, .proposta > *, .destaque > *, .hero .wrap > *, .final > *, .campos > *, .opcoes > *, .form fieldset { min-width: 0; }
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; padding-left: 20px; padding-right: 20px; }
  .form { padding: 18px; }
  .final { padding: 30px 18px; }
  .hero h1 { font-size: 32px; }
  .cabeca h2 { font-size: 27px; }
}
/* Tablet: os 3 "antes × depois" ficariam 2 + 1; um por linha, com as duas metades lado a lado. */
@media (min-width: 641px) and (max-width: 960px) {
  .grade:has(> .troca) { grid-template-columns: 1fr; }
  .grade > .troca { grid-template-columns: 1fr 1fr; }
  .grade > .troca .antes { border-bottom: 0; border-right: 1px solid var(--border); }
}

/* ── Aviso de cookies ───────────────────────────────────────────────────── */
/* Barra baixa e centralizada: no canto ela cobria o botão principal do topo. */
.cookies {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 70;
  width: min(780px, calc(100% - 32px));
  display: flex; align-items: center; gap: 12px 18px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 10px 12px 10px 18px; font-size: 14px; color: var(--ink);
}
.cookies[hidden] { display: none; }
.cookies p { flex: 1; line-height: 1.4; }
.cookies-acoes { display: flex; gap: 10px; flex: none; }
@media (max-width: 1180px) { .com-aviso-cookies .zap { bottom: 96px; } }
@media (max-width: 640px) {
  .cookies { bottom: 12px; flex-wrap: wrap; padding: 14px 16px; }
  .cookies-acoes { width: 100%; }
  .cookies-acoes .btn { flex: 1; }
  .com-aviso-cookies .zap { bottom: 170px; }
}