/* IA pro Corretor — estilo compartilhado. Mobile-first, sem framework. */
:root {
  --marca: #0f6b5c;
  --texto: #1c2430;
  --fundo: #f7f8fa;
  --verde: #1f8f4e;
  --vermelho: #c0392b;
  --branco: #ffffff;
  --cinza: #d5d9e0;
  --cinza-texto: #5a6474;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}
img { max-width: 100%; }
a { color: var(--marca); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .45em; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; font-weight: 800; }
h2 { font-size: 1.45rem; font-weight: 800; }
h3 { font-size: 1.1rem; font-weight: 700; }
strong { font-weight: 700; }
.mono { font-family: var(--mono); }

.wrap { max-width: 680px; margin: 0 auto; padding: 0 16px; }
.sec { padding: 40px 0; }
.sec--branco { background: var(--branco); }
.sec--fundo { background: var(--fundo); }

/* Barra do topo */
.topo {
  background: var(--texto);
  color: var(--branco);
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  padding: 10px 16px;
  line-height: 1.35;
}

/* Dobra 1 */
.eyebrow { color: var(--marca); font-size: .9rem; font-weight: 700; margin-bottom: .6em; }
.subtitulo { font-size: 1.1rem; font-weight: 500; color: var(--texto); }
.check-list { list-style: none; padding: 0; }
.check-list li { position: relative; padding-left: 1.6em; }
.check-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--verde); font-weight: 800; font-size: .95em;
}

/* Botão */
.cta { margin: 28px 0 8px; text-align: center; }
.btn {
  display: block;
  width: 100%;
  background: var(--marca);
  color: var(--branco);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 18px 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.btn:hover, .btn:focus-visible { filter: brightness(1.1); }
.sob-botao { font-size: .82rem; color: var(--cinza-texto); margin-top: 10px; text-align: center; }

/* Mockup de celular */
.celular {
  margin: 28px auto 8px;
  max-width: 300px;
  border: 10px solid var(--texto);
  border-radius: 34px;
  background: var(--branco);
  padding: 22px 14px 18px;
  position: relative;
  box-shadow: 0 10px 30px rgba(28,36,48,.15);
}
.celular::before {
  content: "";
  position: absolute; top: 7px; left: 50%;
  width: 60px; height: 5px; margin-left: -30px;
  border-radius: 3px; background: var(--cinza);
}
.celular .pdf-titulo { font-weight: 800; font-size: 1.05rem; margin-bottom: .3em; }
.celular .pdf-intro { font-size: .72rem; color: var(--cinza-texto); margin-bottom: .7em; }
.mapa { width: 100%; border-collapse: collapse; font-size: .72rem; }
.mapa th, .mapa td { text-align: left; padding: 5px 4px; border-bottom: 1px solid var(--cinza); vertical-align: top; }
.mapa th { background: var(--fundo); font-weight: 700; }
.mapa td:last-child { font-family: var(--mono); white-space: nowrap; color: var(--marca); }

/* Lista de marcar (só visual) */
.marcar { list-style: none; padding: 0; }
.marcar li { margin-bottom: .7em; }
.marcar label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.marcar input {
  flex: 0 0 auto;
  width: 22px; height: 22px; margin: 2px 0 0;
  accent-color: var(--marca);
}

.coringa { color: var(--vermelho); font-weight: 700; }

/* Caixas */
.caixa {
  background: var(--fundo);
  border-radius: 10px;
  padding: 18px 18px 6px;
  margin: 18px 0;
}
.sec--fundo .caixa { background: var(--branco); }
.caixa--borda { background: transparent; border: 1.5px solid var(--cinza); }
.sec--fundo .caixa--borda { background: transparent; }

/* Antes e depois */
.cartoes-ad { display: grid; gap: 18px; margin: 20px 0; }
.cartao-ad {
  background: var(--branco);
  border: 2px solid var(--cinza);
  border-radius: 12px;
  padding: 16px;
}
.cartao-ad--antes { border-color: var(--vermelho); }
.cartao-ad--depois { border-color: var(--verde); }
.selo {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.cartao-ad--antes .selo, .cartao-ad--antes .rotulo { color: var(--vermelho); }
.cartao-ad--depois .selo, .cartao-ad--depois .rotulo { color: var(--verde); }
.rotulo { font-weight: 800; font-size: .95rem; margin-bottom: .6em; }
.ad {
  font-family: var(--mono);
  font-size: .84rem;
  line-height: 1.5;
  white-space: pre-line;
  background: var(--fundo);
  border-radius: 8px;
  padding: 12px;
  margin: 0 0 .8em;
  overflow-wrap: anywhere;
}
.ad-campo { font-size: .75rem; font-weight: 700; color: var(--cinza-texto); margin: .6em 0 .25em; }
.nota-ad { font-size: .88rem; margin-bottom: 0; }
.legenda { font-size: .78rem; color: var(--cinza-texto); }
.caixa-alerta {
  border-left: 4px solid var(--texto);
  background: var(--branco);
  border-radius: 0 10px 10px 0;
  padding: 16px 16px 4px;
  margin-top: 16px;
}
.caixa-alerta h3 { font-size: 1.05rem; }

/* Cartões de mecanismo */
.cartoes { list-style: none; padding: 0; display: grid; gap: 10px; }
.cartoes li {
  background: var(--branco);
  border: 1px solid var(--cinza);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0;
}
.num-prompt { font-family: var(--mono); color: var(--marca); font-weight: 600; }
.selo-regra {
  display: inline-block;
  color: var(--verde);
  border: 2px solid var(--verde);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: .9rem;
  margin: 8px 0 18px;
}

/* Frase marcante */
.frase {
  padding: 72px 0;
  background: var(--fundo);
}
.frase p {
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--texto);
  margin: 0;
}

/* Passos */
.passos { display: grid; gap: 12px; margin: 20px 0; }
.passo {
  background: var(--branco);
  border: 1px solid var(--cinza);
  border-radius: 12px;
  padding: 16px;
}
.passo-num { display: block; color: var(--marca); font-weight: 900; font-size: 2rem; line-height: 1; margin-bottom: 8px; }
.passo-num small { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }

/* O que tem no kit */
.momentos { display: grid; gap: 14px; margin: 20px 0; }
.momento {
  background: var(--branco);
  border: 1px solid var(--cinza);
  border-radius: 12px;
  padding: 16px 16px 4px;
}
.momento h3 { color: var(--marca); }
.momento ul { padding-left: 1.1em; }
.pdf-mock {
  background: var(--branco);
  border: 1px solid var(--cinza);
  border-radius: 12px;
  padding: 18px 16px;
  margin: 18px 0;
  box-shadow: 0 6px 20px rgba(28,36,48,.08);
}
.pdf-mock .pdf-bloco { font-weight: 800; font-size: 1.1rem; margin-bottom: .3em; }
.pdf-mock .pdf-fonte { font-size: .8rem; color: var(--cinza-texto); margin-bottom: 1em; }
.pdf-mock .pdf-prompt-titulo { font-weight: 700; margin-bottom: .5em; }
.prompt {
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.5;
  white-space: pre-line;
  background: var(--fundo);
  border: 1px solid var(--cinza);
  border-radius: 8px;
  padding: 12px;
  margin: 0;
  overflow-wrap: anywhere;
}
.trocar { background: #d6f0df; color: #135f34; border-radius: 3px; padding: 0 2px; font-weight: 600; }

/* Comparativo */
.comp { margin: 20px 0; }
.comp-cab { display: none; }
.comp-linha {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cinza);
}
.comp-sem, .comp-com { position: relative; padding-left: 1.7em; }
.comp-sem::before { content: "✗"; position: absolute; left: 0; color: var(--vermelho); font-weight: 900; }
.comp-com::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 900; }
.comp-sem { color: var(--cinza-texto); }
.comp-rot { display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.comp-sem .comp-rot { color: var(--vermelho); }
.comp-com .comp-rot { color: var(--verde); }

/* Fonte */
.fontes { font-size: .9rem; }
.fontes .dominio { font-family: var(--mono); font-weight: 600; color: var(--texto); }

/* Preço */
.preco h2 { font-size: 2rem; }
.miudo { font-size: .85rem; color: var(--cinza-texto); }
.selos { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.selos span {
  border: 1.5px solid var(--texto);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: .8rem;
  font-weight: 700;
}
.garantia {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1.5px solid var(--cinza);
  border-radius: 12px;
  padding: 18px 16px 4px;
  margin: 18px 0;
  background: var(--branco);
}
.garantia-num { font-size: 4rem; font-weight: 900; color: var(--marca); line-height: .9; }

/* FAQ */
.faq details {
  border-bottom: 1px solid var(--cinza);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 12px 28px 12px 0;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 4px; top: 10px;
  font-size: 1.3rem; font-weight: 700; color: var(--marca);
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 12px; }

/* Fechamento */
.fechamento { background: var(--marca); color: var(--branco); padding: 48px 0; }
.fechamento h2 { color: var(--branco); }
.fechamento .btn { background: var(--branco); color: var(--marca); }
.fechamento .sob-botao { color: rgba(255,255,255,.85); }

/* Rodapé */
.rodape {
  background: var(--texto);
  color: #c9d0da;
  font-size: .78rem;
  padding: 28px 0 36px;
  line-height: 1.6;
}
.rodape p { margin-bottom: .8em; }
.rodape a { color: var(--branco); }

/* Marcador de pendência: amarelo, visível, pra ninguém publicar sem trocar */
.pendente {
  background: #ffe600;
  color: #1c2430;
  font-weight: 800;
  font-family: var(--sans);
  font-size: .85em;
  padding: 1px 6px;
  border-radius: 3px;
  outline: 2px dashed #c9a800;
}

/* Obrigado */
.passos-lista { list-style: none; padding: 0; counter-reset: p; display: grid; gap: 10px; margin: 16px 0; }
.passos-lista li {
  counter-increment: p;
  background: var(--branco);
  border: 1px solid var(--cinza);
  border-radius: 10px;
  padding: 14px 14px 14px 56px;
  position: relative;
  margin: 0;
}
.passos-lista li::before {
  content: counter(p);
  position: absolute; left: 14px; top: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--marca); color: var(--branco);
  font-weight: 800; text-align: center; line-height: 30px;
}
.cartao-teste {
  background: var(--branco);
  border: 2px solid var(--marca);
  border-radius: 12px;
  padding: 18px 16px 6px;
  margin: 18px 0;
}
.cartao-teste h2 { color: var(--marca); }

/* Política e termos */
.legal h1 { font-size: 1.6rem; }
.legal h2 { font-size: 1.3rem; margin-top: 1.2em; }
.legal h3 { margin-top: 1.4em; }
.tabela-rolagem { overflow-x: auto; margin: 0 0 1em; }
.legal table { border-collapse: collapse; width: 100%; font-size: .85rem; min-width: 520px; }
.legal th, .legal td { border: 1px solid var(--cinza); padding: 8px; text-align: left; vertical-align: top; }
.legal th { background: var(--fundo); }

/* Telas maiores */
@media (min-width: 760px) {
  body { font-size: 18px; }
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.8rem; }
  .sec { padding: 64px 0; }
  .btn { display: inline-block; width: auto; min-width: 360px; }
  .cartoes-ad { grid-template-columns: 1fr 1fr; }
  .wrap--largo { max-width: 960px; }
  .passos { grid-template-columns: repeat(3, 1fr); }
  .frase p { font-size: 2.4rem; }
  .comp-cab { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-weight: 800; padding-bottom: 8px; border-bottom: 2px solid var(--texto); }
  .comp-cab .c-sem { color: var(--vermelho); }
  .comp-cab .c-com { color: var(--verde); }
  .comp-linha { grid-template-columns: 1fr 1fr; gap: 16px; }
  .comp-rot { display: none; }
}