/* Diagnóstico de E-mail Profissional — HospedaInfo
   Mobile-first, sem framework, sem build. */

:root {
  --navy:        #0f2038;
  --navy-soft:   #1c3557;
  --ink:         #16202e;
  --ink-2:       #4a5a70;
  --ink-3:       #7a889b;
  --line:        #e2e5ea;
  --line-2:      #eef0f3;
  --bg:          #f6f7f9;
  --card:        #ffffff;
  --gold:        #a87a3d;
  --gold-soft:   #f4ecdd;
  --critico:     #b3261e;
  --critico-bg:  #fdecea;
  --atencao:     #a8600c;
  --atencao-bg:  #fdf2e3;
  --moderado:    #6b6a1f;
  --moderado-bg: #f8f7e2;
  --solido:      #1d6b45;
  --solido-bg:   #e8f5ee;
  --radius:      14px;
  --radius-lg:   20px;
  --shadow:      0 1px 2px rgba(16,32,56,.05), 0 8px 24px -12px rgba(16,32,56,.14);
  --shadow-lg:   0 2px 4px rgba(16,32,56,.06), 0 24px 48px -20px rgba(16,32,56,.22);
  /* Uma família só, em tudo. O serif de título e o monospace dos endereços saíram:
     três famílias numa tela de 400px de largura viram ruído, e o serif dava um ar
     antigo que não é o do produto. A hierarquia agora vem de tamanho e peso. */
  --sans:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Dourado escurecido para texto pequeno sobre ele: o --gold original dá 3,8:1 com
     branco e reprova no AA (4,5:1 exigido). Este dá 5,4:1. */
  --gold-forte:  #8a6330;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 18px 64px;
}

/* ---------- topo ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.topbar .brand {
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy);
  font-size: 15px;
  text-decoration: none;
}
.topbar .brand span { color: var(--gold); }
.topbar .tag {
  font-size: 11.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---------- telas ---------- */

.tela { display: none; }
.tela.ativa { display: block; animation: sobe .32s cubic-bezier(.22,.68,.35,1) both; }

@keyframes sobe {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tela.ativa { animation: none; }
}

/* ---------- landing ---------- */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 20px;
}
.selo::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

h1 {
  font-family: var(--sans);
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: var(--navy);
  font-weight: 600;
}
h1 em { font-style: italic; color: var(--gold); }

.lead {
  font-size: 17px;
  color: var(--ink-2);
  margin: 0 0 26px;
}

.provas {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.provas li {
  display: flex;
  gap: 11px;
  font-size: 15px;
  color: var(--ink-2);
  align-items: flex-start;
}
.provas svg { flex: 0 0 18px; margin-top: 3px; color: var(--gold); }

.meta-quiz {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 16px;
}
.meta-quiz span { display: inline-flex; align-items: center; gap: 6px; }
.meta-quiz span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
  opacity: .6;
}

/* ---------- botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: var(--shadow);
}
.btn:hover  { background: var(--navy-soft); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-zap { background: #128c7e; }
.btn-zap:hover { background: #0f7669; }

.btn-fantasma {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: none;
  min-height: 46px;
  font-size: 15px;
  font-weight: 500;
}
.btn-fantasma:hover { background: #fff; color: var(--ink); }

.btn-texto {
  background: none;
  border: 0;
  padding: 8px 4px;
  color: var(--ink-3);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  width: auto;
  min-height: 0;
  box-shadow: none;
}
.btn-texto:hover { color: var(--ink); text-decoration: underline; }

/* ---------- progresso ---------- */

.progresso-wrap {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding: 14px 0 18px;
  margin-bottom: 4px;
}
.progresso-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-bottom: 9px;
  letter-spacing: .02em;
}
.barra {
  height: 5px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.barra i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--navy), var(--gold));
  transition: width .38s cubic-bezier(.3,.7,.3,1);
}

/* ---------- pergunta ---------- */

.pergunta-titulo {
  font-family: var(--sans);
  font-size: clamp(22px, 6.2vw, 29px);
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--navy);
  margin: 8px 0 10px;
  font-weight: 600;
}
.pergunta-ajuda {
  font-size: 14.5px;
  color: var(--ink-3);
  margin: 0 0 24px;
}

.opcoes { display: grid; gap: 10px; }

.opcao {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 17px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.opcao:hover { border-color: var(--navy); box-shadow: var(--shadow); }
.opcao:active { transform: scale(.995); }
.opcao.marcada {
  border-color: var(--navy);
  background: #fbfcfe;
  box-shadow: 0 0 0 3px rgba(15,32,56,.07);
}
.opcao .marca {
  flex: 0 0 21px;
  width: 21px; height: 21px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  position: relative;
  transition: border-color .14s, background .14s;
}
.opcao.marcada .marca { border-color: var(--navy); background: var(--navy); }
.opcao.marcada .marca::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
}
.opcao .txt { flex: 1; min-width: 0; }
.opcao .txt b { display: block; font-weight: 500; font-size: 16px; }
.opcao .txt small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 2px; }

/* ---------- campos ---------- */

.campo { display: block; margin-bottom: 16px; }
.campo > span {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.campo input, .campo select {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  transition: border-color .14s, box-shadow .14s;
}
.campo input:focus, .campo select:focus {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15,32,56,.09);
}
.campo input::placeholder { color: #a9b3c1; }

.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 4px 0 20px;
  cursor: pointer;
}
.consent input {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  margin: 1px 0 0;
  accent-color: var(--navy);
}
.consent a { color: var(--navy); }

.erro {
  display: none;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--critico-bg);
  color: var(--critico);
  font-size: 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(179,38,30,.16);
}
.erro.on { display: block; }

/* ---------- resultado ---------- */

.placar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 22px;
}
.anel { flex: 0 0 96px; width: 96px; height: 96px; position: relative; }
.anel svg { transform: rotate(-90deg); display: block; }
.anel .trilha { stroke: var(--line); }
.anel .valor {
  stroke: currentColor;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(.25,.8,.3,1);
}
.anel .num {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.anel .num b {
  display: block;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink);
}
.anel .num small { font-size: 11px; color: var(--ink-3); }

.placar-txt { flex: 1; min-width: 0; }
.placar-txt .rotulo {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}
.pill.critico  { background: var(--critico-bg);  color: var(--critico); }
.pill.atencao  { background: var(--atencao-bg);  color: var(--atencao); }
.pill.moderado { background: var(--moderado-bg); color: var(--moderado); }
.pill.solido   { background: var(--solido-bg);   color: var(--solido); }

.cor-critico  { color: var(--critico); }
.cor-atencao  { color: var(--atencao); }
.cor-moderado { color: var(--moderado); }
.cor-solido   { color: var(--solido); }

.veredito {
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: #e9eef6;
  margin-bottom: 26px;
  box-shadow: var(--shadow);
}
.veredito h2 {
  font-family: var(--sans);
  font-size: 21px;
  line-height: 1.26;
  margin: 0 0 10px;
  color: #fff;
  font-weight: 700;
}
.veredito p { margin: 0; font-size: 15px; color: #b9c6d8; }

h3.secao {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  margin: 32px 0 14px;
  font-weight: 700;
}
h3.secao:first-child { margin-top: 0; }

.cards { display: grid; gap: 12px; }

.card {
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card h4 {
  margin: 0 0 7px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.3;
}
.card p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.card .sev {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 8px;
}
.card.sev-critica { border-left-color: var(--critico); }
.card.sev-critica .sev { color: var(--critico); }
.card.sev-alta    { border-left-color: var(--atencao); }
.card.sev-alta .sev { color: var(--atencao); }
.card.sev-media   { border-left-color: var(--moderado); }
.card.sev-media .sev { color: var(--moderado); }
.card.oportunidade { border-left-color: var(--gold); background: #fffdf9; }
.card.oportunidade .sev { color: var(--gold); }

/* riscos travados */
.travado {
  position: relative;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: #fbfbfc;
  overflow: hidden;
}
.travado .fake { filter: blur(4.5px); opacity: .5; user-select: none; pointer-events: none; }
.travado .fake b { display: block; height: 13px; background: var(--ink-3); border-radius: 4px; width: 62%; margin-bottom: 10px; }
.travado .fake i { display: block; height: 9px; background: var(--line); border-radius: 4px; margin-bottom: 6px; }
.travado .fake i:nth-child(3) { width: 88%; }
.travado .fake i:nth-child(4) { width: 71%; }
.travado .cadeado {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
}

/* domínios */
.dominios { display: grid; gap: 8px; }

/* Linha de domínio. Mesma linguagem das opções das outras etapas: bolinha à
   esquerda, texto à esquerda, largura toda. A pessoa já tocou nesse formato na
   etapa 1 — reaproveitar poupa o aprendizado de um segundo padrão.

   O <button> vinha com text-align: center do navegador, e era isso que deixava o
   domínio flutuando no meio do cartão, longe de tudo. */
.dom {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 62px;
  padding: 14px 16px;
  text-align: left;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  color: var(--ink);
  transition: border-color .14s, box-shadow .14s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.dom.livre { cursor: pointer; }
.dom.livre:hover { border-color: var(--navy); box-shadow: var(--shadow); }
.dom.livre:active { transform: scale(.995); }

/* A bolinha é o convite a tocar: sem ela o cartão não se parece com um controle. */
.dom-marca {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  position: relative;
  transition: border-color .14s, background .14s;
}
.dom.marcada { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15,32,56,.08); }
.dom.marcada .dom-marca { border-color: var(--navy); background: var(--navy); }
.dom.marcada .dom-marca::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

/* O nome é o conteúdo da linha, não um detalhe: 16px e peso 600. overflow-wrap
   anywhere porque domínio longo não tem espaço onde quebrar. */
.dom-nome {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  font-variant-ligatures: none;
}

/* Rótulo do grupo: uma vez por extensão, em vez de um selo por linha. */
.dom-grupo {
  margin: 14px 0 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dom-grupo:first-child { margin-top: 2px; }

/* Indisponível não ganha cartão: no celular cada linha custa uma rolagem, e um
   nome em uso não é opção. Vira uma frase discreta no fim da lista. */
.dom-usados {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
.dom-usados s { text-decoration-thickness: 1px; }

/* Ainda existe o caminho de um domínio único consultado direto (a pessoa digita o
   endereço completo): aí a linha aparece com o status escrito. */
.dom.indisponivel {
  min-height: 52px;
  background: var(--line-2);
  border-color: transparent;
}
.dom.indisponivel .dom-nome {
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.dom-st {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dom-dica {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.nota-adv {
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--gold-soft);
  border-radius: 11px;
  padding: 13px 15px;
  margin-top: 12px;
}
.nota-adv b { color: var(--gold); }

/* oferta */
.oferta {
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  margin-top: 8px;
}
.oferta .chamada {
  font-family: var(--sans);
  font-size: 21px;
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 6px;
  font-weight: 700;
}
.oferta .plano {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 16px;
}
.oferta .preco { margin: 0 0 18px; }
.oferta .preco b { font-size: 30px; letter-spacing: -.02em; color: var(--ink); }
.oferta .preco small { color: var(--ink-3); font-size: 14px; }
.oferta .preco .consulta { font-size: 17px; font-weight: 600; color: var(--ink-2); }

.oferta ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.oferta ul li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
  align-items: flex-start;
}
.oferta ul li svg { flex: 0 0 17px; margin-top: 3px; color: var(--solido); }

.passo {
  font-size: 14px;
  color: var(--ink-2);
  background: var(--line-2);
  border-radius: 11px;
  padding: 14px 15px;
  margin-bottom: 20px;
}
.passo b { color: var(--ink); }

.acoes { display: grid; gap: 10px; }

.rodape {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.6;
}
.rodape a { color: var(--ink-2); }

.carregando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 56px 20px;
  color: var(--ink-3);
  font-size: 15px;
}
.spin {
  width: 19px; height: 19px;
  border: 2px solid var(--line);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- âncora de preço na abertura ---------- */

.ancora-preco {
  font-size: 14px;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 22px;
  line-height: 1.5;
}
.ancora-preco b { color: var(--ink); font-size: 15.5px; }

/* ---------- bloco de insight (topo da pergunta) ---------- */

.insight {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px;
  margin: 0 0 26px;
  box-shadow: var(--shadow);
  animation: entra .42s cubic-bezier(.22,.68,.35,1) both;
}
@keyframes entra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .insight { animation: none; } }

.insight .etiqueta {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gold-forte);
  margin-bottom: 8px;
}
.insight h3 {
  font-family: var(--sans);
  font-size: 18.5px;
  line-height: 1.28;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}
.insight p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.insight ul {
  list-style: none;
  margin: 13px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.insight ul li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-2);
}
.insight ul li::before {
  content: "";
  flex: 0 0 6px;
  width: 6px; height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.insight .rodape-insight {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line-2);
  font-size: 13.5px;
  color: var(--ink-3);
}

/* comparação de endereços */
.cmp { display: grid; gap: 9px; margin: 15px 0 0; }
.cmp-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 13px;
  border-radius: 11px;
  background: var(--bg);
}
.cmp-item.bom { background: var(--solido-bg); }
.cmp-item .ico {
  flex: 0 0 19px;
  width: 19px; height: 19px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  margin-top: 1px;
}
.cmp-item.ruim .ico { background: var(--critico); }
.cmp-item.bom .ico  { background: var(--solido); }
.cmp-item .dados { min-width: 0; flex: 1; }
.cmp-item .mail {
  display: block;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  word-break: break-all;
  line-height: 1.4;
}
.cmp-item.ruim .mail { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.cmp-item .nota { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.cmp-item.bom .nota { color: var(--solido); font-weight: 600; }

/* prévia de preço dentro do insight */
.precinho {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 15px 0 0;
  padding: 15px 16px;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
}
.precinho .pnome {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #a9bcd6;
  font-weight: 700;
}
.precinho .pvalor { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.precinho .pvalor small { font-size: 13px; font-weight: 500; color: #a9bcd6; letter-spacing: 0; }
.precinho .pdetalhe { font-size: 13px; color: #b9c6d8; flex: 1 1 100%; }
.precinho .badge-pop {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: var(--gold);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
}

/* ---------- contador de contas ---------- */

.contador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 26px 18px 22px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.contador button {
  flex: 0 0 52px;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .14s, background .14s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.contador button:hover:not(:disabled) { border-color: var(--navy); background: var(--bg); }
.contador button:active:not(:disabled) { transform: scale(.94); }
.contador button:disabled { opacity: .35; cursor: not-allowed; }
.contador .valor { text-align: center; min-width: 108px; }
.contador .valor b {
  display: block;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.contador .valor span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 5px; }

.atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 14px 0 0;
}
.atalhos button {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.atalhos button:hover { border-color: var(--navy); color: var(--ink); }
.atalhos button.on { border-color: var(--navy); background: var(--navy); color: #fff; }

.preco-vivo {
  text-align: center;
  margin: 16px 0 0;
  font-size: 14.5px;
  color: var(--ink-2);
  min-height: 22px;
}
.preco-vivo b { color: var(--ink); }

/* ---------- plano recomendado (herói do resultado) ---------- */

.plano-hero {
  position: relative;
  padding: 26px 22px 24px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1.5px solid var(--gold);
  box-shadow: var(--shadow-lg);
  margin-bottom: 14px;
}
.plano-hero .fita {
  position: absolute;
  top: -11px; left: 22px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--gold);
  color: #fff;
  padding: 5px 11px;
  border-radius: 7px;
}
.plano-hero .rot {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-2);
  font-weight: 700;
  margin-bottom: 6px;
}
.plano-hero .pnome {
  font-family: var(--sans);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy);
  margin: 0 0 4px;
}
.plano-hero .psub { font-size: 14.5px; color: var(--ink-2); margin: 0 0 18px; }

.plano-hero .bloco-preco {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 0 14px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 16px;
}
.plano-hero .bloco-preco .val {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}
.plano-hero .bloco-preco .per { font-size: 15px; color: var(--ink-3); }
.plano-hero .bloco-preco .eq {
  flex: 1 1 100%;
  font-size: 13.5px;
  color: var(--ink-3);
  margin-top: 6px;
}
.plano-hero .bloco-preco .eq b { color: var(--gold); }
.plano-hero .bloco-preco .consulta { font-size: 20px; font-weight: 600; color: var(--ink-2); }

.especs { display: grid; gap: 10px; margin: 0 0 18px; }
.espec {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  color: var(--ink);
}
.espec svg { flex: 0 0 18px; color: var(--gold); }
.espec b { font-weight: 600; }

.upgrade-nota {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--gold-soft);
  border-radius: 11px;
  padding: 13px 14px;
  margin: 0 0 18px;
  line-height: 1.5;
}
.upgrade-nota svg { flex: 0 0 17px; margin-top: 2px; color: var(--gold); }

/* escada de planos */
.escada {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 2px 0 6px;
  margin: 0 0 8px;
  -webkit-overflow-scrolling: touch;
}
.escada-item {
  flex: 0 0 auto;
  min-width: 118px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  text-align: center;
}
.escada-item.atual { border-color: var(--navy); background: #fbfcfe; box-shadow: 0 0 0 2px rgba(15,32,56,.07); }
.escada-item .en { font-size: 14px; font-weight: 700; color: var(--ink); }
.escada-item .ec { font-size: 12px; color: var(--ink-3); margin: 3px 0 6px; }
.escada-item .ep { font-size: 14px; font-weight: 600; color: var(--navy); }
.escada-item.atual .ep { color: var(--gold); }

/* ---------- o que muda ---------- */

.ganhos { display: grid; gap: 13px; }
.ganho {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ganho .ck {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--solido-bg);
  color: var(--solido);
  display: grid;
  place-content: center;
  margin-top: 1px;
}
.ganho h4 {
  margin: 0 0 3px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.ganho p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- domínio escolhido / confirmado ---------- */

.dom-confirmado {
  font-size: 14.5px;
  color: var(--solido);
  background: var(--solido-bg);
  border-radius: 11px;
  padding: 12px 14px;
  margin: 0 0 14px;
}
.dom-confirmado b {
  font-family: var(--sans);
  font-size: 14px;
  word-break: break-all;
}

.dom-escolhido {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 17px 18px;
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fffdf8, #fff);
  box-shadow: 0 0 0 3px rgba(168,122,61,.1);
}
.dom-escolhido .ico {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--solido);
  color: #fff;
  display: grid;
  place-content: center;
  margin-top: 1px;
}
.dom-escolhido b {
  display: block;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  word-break: break-all;
  line-height: 1.35;
}
.dom-escolhido small {
  display: block;
  font-size: 13.5px;
  color: var(--ink-2);
  margin-top: 4px;
}

/* ---------- formulário secundário ---------- */

.form-intro {
  font-size: 14.5px;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.bloco-form {
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-top: 12px;
}

@media (min-width: 560px) {
  .wrap { padding: 32px 24px 80px; }
  .acoes { grid-template-columns: 1fr 1fr; }
  .acoes .full { grid-column: 1 / -1; }
  .cmp { grid-template-columns: 1fr 1fr; }
  .plano-hero { padding: 30px 26px 26px; }
  .plano-hero .bloco-preco .val { font-size: 46px; }
}

/* ---------- adições da versão editável ---------- */

.faixa-preview {
  background: var(--gold);
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 9px 16px;
  line-height: 1.45;
}
.faixa-preview a { color: #fff; text-decoration: underline; margin-left: 6px; }

.saudacao {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3);
  margin: 0 0 14px;
}

.secao-intro {
  font-size: 14.5px;
  color: var(--ink-2);
  margin: -6px 0 16px;
}

.dom-dica {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 12px 0 0;
}

.escada-nota {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 6px;
}

/* ==================== jornada de percepção ==================== */

/* ---------- comparação de contatos (etapa 2) ---------- */

.cmp-visual { display: grid; gap: 12px; margin: 0 0 26px; align-items: stretch; }
.cmp-vs {
  text-align: center; font-size: 12px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
}

.cartao-contato {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px 18px;
  text-align: center;
  box-shadow: var(--shadow);
}
.cartao-contato.pro { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168,122,61,.1), var(--shadow); }
.cc-tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--ink-2); color: #fff;
  /* 10px com .1em de tracking era ilegível: em maiúsculas o espaçamento largo
     desmancha a palavra em letras soltas. Maior, mais pesado e mais junto. */
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em; line-height: 1;
  padding: 5px 11px; border-radius: 6px;
}
.cartao-contato.pro .cc-tag { background: var(--gold-forte); }
.cc-av {
  width: 44px; height: 44px; margin: 4px auto 12px;
  border-radius: 50%; background: var(--line-2); color: var(--ink-2);
  display: grid; place-content: center;
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
}
.cartao-contato.pro .cc-av { background: var(--navy); color: #fff; }
.cc-nome { font-size: 16px; font-weight: 600; color: var(--ink); }
.cc-cargo { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.cc-mail {
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line-2);
  font-family: var(--sans);
  font-size: 13px; color: var(--ink-2); word-break: break-all; line-height: 1.4;
}
.cartao-contato.pro .cc-mail { color: var(--navy); font-weight: 600; }

/* ---------- antes/depois da assinatura (etapa 3) ---------- */

.asn-visual { display: grid; gap: 10px; margin: 0 0 26px; }
.asn-seta { display: grid; place-content: center; color: var(--gold); }
.asn-seta svg { width: 22px; height: 22px; }

.assinatura {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.assinatura.pro { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168,122,61,.1), var(--shadow); }
.asn-tag {
  position: absolute; top: -12px; left: 16px;
  background: var(--ink-2); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  line-height: 1; padding: 5px 11px; border-radius: 6px;
}
.assinatura.pro .asn-tag { background: var(--gold-forte); }
.asn-corpo { display: flex; gap: 14px; align-items: flex-start; }
.asn-logo {
  flex: 0 0 46px; width: 46px; height: 46px;
  border-radius: 9px; background: var(--navy); color: #fff;
  display: grid; place-content: center;
  font-size: 15px; font-weight: 700; letter-spacing: .04em;
}
.asn-txt { min-width: 0; flex: 1; }
.asn-nome { font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.asn-cargo { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.asn-esc { font-size: 13.5px; font-weight: 600; color: var(--navy); margin-top: 5px; }
.asn-linha { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.asn-mail {
  font-family: var(--sans);
  font-size: 12.5px; color: var(--ink-2); margin-top: 5px; word-break: break-all;
}
.assinatura.pro .asn-mail { color: var(--navy); font-weight: 600; }

/* ---------- mockup do e-mail (resultado) ---------- */

.mock-tit { font-size: 14.5px; color: var(--ink-2); margin: -4px 0 14px; }
.mock {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin-bottom: 10px;
}
.mock-cab {
  display: flex; gap: 6px; align-items: center;
  padding: 11px 15px; background: var(--line-2); border-bottom: 1px solid var(--line);
}
.mock-ponto { width: 9px; height: 9px; border-radius: 50%; background: #c8cfda; }
.mock-meta { padding: 14px 17px; border-bottom: 1px solid var(--line-2); }
.mock-linha { display: flex; gap: 10px; font-size: 13px; padding: 3px 0; align-items: baseline; }
.mock-rot {
  flex: 0 0 62px; color: var(--ink-3); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.mock-val { color: var(--ink); min-width: 0; word-break: break-word; }
.mock-val b { font-weight: 600; }
.mock-mail {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px; color: var(--navy); margin-top: 2px; word-break: break-all;
}
.mock-corpo { padding: 18px 17px; }
.mock-corpo p { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.mock-asn {
  display: flex; gap: 13px; align-items: flex-start;
  margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--gold);
}

/* ---------- bônus ---------- */

.bonus {
  position: relative;
  background: linear-gradient(180deg, #fffdf8, var(--card));
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  box-shadow: var(--shadow-lg);
}
.bonus-tag {
  display: inline-block; background: var(--gold-forte); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  line-height: 1; padding: 6px 11px; border-radius: 6px; margin-bottom: 12px;
}
.bonus-tit {
  font-family: var(--sans); font-size: 21px; line-height: 1.25;
  color: var(--navy); margin: 0 0 9px; font-weight: 700;
}
.bonus-txt { font-size: 14.5px; color: var(--ink-2); margin: 0 0 18px; }
.bonus-preco {
  display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap;
  padding: 15px 0; margin-bottom: 16px;
  border-top: 1px solid rgba(168,122,61,.25); border-bottom: 1px solid rgba(168,122,61,.25);
}
.bonus-preco small {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-3); margin-bottom: 3px; font-weight: 700;
}
.bp-de s { font-size: 19px; color: var(--ink-3); }
.bp-para b { font-size: 30px; color: var(--solido); letter-spacing: -.02em; }
.bonus-itens {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; gap: 7px 16px; grid-template-columns: 1fr 1fr;
}
.bonus-itens li { font-size: 13.5px; color: var(--ink-2); display: flex; gap: 7px; }
.bonus-itens li::before { content: "✓"; color: var(--gold); font-weight: 800; flex: none; }
.bonus-pe { font-size: 13px; color: var(--ink-3); margin: 0; }

@media (min-width: 560px) {
  .cmp-visual { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .cmp-vs { writing-mode: vertical-rl; }
}

/* Etiquetas suspensas precisam de folga: com ajuda vazia, o título fica a 3px. */
.cmp-visual, .asn-visual { margin-top: 16px; }
.cc-tag, .asn-tag { text-transform: uppercase; }

/* O mockup precisa do mesmo realce do cartão "com assinatura" que a pessoa
   viu na etapa 3 — senão o pagamento visual é mais fraco que a promessa. */
.mock-asn .asn-mail { color: var(--navy); font-weight: 600; }
.mock-asn .asn-esc { color: var(--navy); }

/* ---------- captura no meio do funil ---------- */
.captura {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  box-shadow: var(--shadow);
}
.captura .campo:last-of-type { margin-bottom: 4px; }
.captura-saida { margin: 14px 0 0; text-align: center; }
.checkout-obs { font-size: 13px; color: var(--ink-3); margin: 10px 0 0; text-align: center; }

/* Voltar no topo do resultado. Discreto de propósito: precisa estar sempre lá,
   sem competir com o botão de contratar, que é a ação principal da tela. */
.volta { margin: 0 0 16px; }
.volta .btn-texto { padding-left: 0; }

/* Linha de apoio da etapa de identidade — quem atua sozinho não sabe o que
   escrever em "nome do escritório", e a frase resolve isso sem virar um tooltip. */
.ident-aj {
  margin: -6px 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3, #6b7280);
}
.captura.ident .campo { margin-bottom: 16px; }

/* Selo da opção — mesma linguagem visual da etiqueta do cartão, para a pessoa
   ligar os dois sem reler. Fica DENTRO do <b>, então acompanha a linha do texto
   quando o rótulo quebra em duas linhas. */
.opcao-tag {
  display: inline-block;
  margin-right: 9px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--ink-2);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  vertical-align: 2px;
  white-space: nowrap;
}
.opcao-tag.pro { background: var(--gold-forte); }
/* "A e B" não é nenhum dos dois lados: contorno em vez de preenchimento, senão
   pareceria uma terceira categoria de mesmo peso que os cartões. */
.opcao-tag.ambos {
  background: transparent;
  color: var(--ink-2);
  border: 1.5px solid var(--line-2);
  letter-spacing: .06em;
}

/* ---------- caixa de e-mail dentro da etapa ---------- */

/* No resultado a caixa é o clímax e leva sombra grande; dentro da etapa ela é o
   argumento antes de responder, então pesa menos e cede espaço para as opções. */
.email-visual { margin: 4px 0 22px; }
.email-visual .mock {
  box-shadow: var(--shadow);
  margin-bottom: 0;
}
.email-visual .mock-corpo { padding: 16px 15px; }
.email-visual .mock-corpo p { font-size: 14px; }

/* Etiqueta na barra de título da janela, onde ficaria o nome do programa. */
.mock-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* "Atenciosamente," encosta na assinatura: é a despedida dela, não um parágrafo. */
.mock-desp { margin-bottom: 4px !important; }

/* Espaço reservado de logo. Tracejado porque tracejado significa "a preencher" em
   qualquer interface — a pessoa entende sem legenda que ali entra a marca dela. */
.asn-logo-ph {
  background: var(--line-2);
  border: 1.5px dashed #b9c2ce;
  color: var(--ink-3);
  display: grid;
  place-content: center;
  padding: 0;
}
.asn-logo-ph svg { width: 24px; height: 24px; }
.mock-asn .asn-logo-ph { flex: 0 0 46px; width: 46px; height: 46px; }

/* ---------- pagamento e PIX ---------- */

.pagamento {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  box-shadow: var(--shadow);
}
.pag-tit { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--navy); }
.pag-txt { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

.pix { margin-top: 18px; text-align: center; }
.pix-tit { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: var(--navy); }
.pix-valor { margin: 0 0 14px; font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }

/* O QR precisa de fundo branco e margem própria: impresso sobre cor ou encostado na
   borda, leitor de celular erra a leitura. */
.pix-qr {
  display: inline-block;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.pix-qr img {
  display: block;
  width: 220px;
  height: 220px;
  max-width: 100%;
  image-rendering: pixelated;   /* não suavizar: borra os módulos do QR */
}
.pix-ajuda { margin: 12px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

.pix-cola { display: block; text-align: left; }
.pix-cola textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--bg);
  color: var(--ink-2);
  font: 12.5px/1.45 var(--sans);
  resize: none;
  overflow-wrap: anywhere;
}
.pix-cola textarea:focus { outline: none; border-color: var(--navy); }
.pix .btn-fantasma { margin-top: 10px; }

.pix-espera {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
.pix-fatura { margin: 10px 0 0; font-size: 13px; }
.pix-fatura a { color: var(--ink-2); }

.pix-pago {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  background: var(--solido-bg);
  border: 1.5px solid var(--solido);
  border-radius: var(--radius);
  text-align: left;
}
.pix-pago .ico {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--solido);
  color: #fff;
  display: grid;
  place-content: center;
}
.pix-pago b { display: block; font-size: 15.5px; color: var(--solido); }
.pix-pago small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* Validade do PIX. Discreta enquanto vale, evidente quando vence — um código morto que
   parece válido é o pior estado possível nesta tela. */
.pix-validade { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); }
.pix-validade.venceu {
  margin-top: 12px;
  padding: 11px 13px;
  background: var(--atencao-bg);
  border-radius: 11px;
  color: var(--atencao);
  font-size: 13.5px;
  font-weight: 600;
}
.pix-validade.venceu .btn-texto { color: var(--atencao); text-decoration: underline; }

/* CPF no bloco de pagamento */
.campo-cpf { display: block; margin: 0 0 4px; }
.pag-ajuda { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
#pag-erro { margin-bottom: 10px; }

/* Espera do PIX: o iframe que gera fica fora da tela, então a pessoa precisa de um
   sinal de que algo está acontecendo — senão o silêncio parece travamento. */
.pix-espera-bloco {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  background: var(--bg);
  border-radius: var(--radius);
}
.pix-espera-bloco p { margin: 0; font-size: 14px; color: var(--ink-2); }
.pix-caiu {
  margin-top: 18px;
  padding: 16px;
  background: var(--atencao-bg);
  border-radius: var(--radius);
}
.pix-caiu p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--atencao); }

/* ---------- resumo do que está sendo contratado ---------- */

.resumo {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.res-item { padding: 15px 17px; border-bottom: 1px solid var(--line-2); }
.res-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.res-nome { font-size: 15px; font-weight: 600; color: var(--ink); min-width: 0; }
.res-preco { flex: none; font-size: 15px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.res-obs { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* O domínio novo é a linha que a pessoa não esperava: marcada para não passar batido. */
.res-item.dominio_novo { background: var(--gold-soft); border-bottom-color: rgba(168,122,61,.2); }
.res-item.dominio_novo .res-preco { color: var(--gold-forte); }

/* O que ela paga AGORA, destacado do que é anual e de terceiros. */
.res-total { padding: 16px 17px; background: var(--navy); }
.res-total .res-nome { color: #fff; font-size: 15.5px; }
.res-total .res-preco { color: #fff; font-size: 20px; }
.res-total .res-obs { color: #c8d3e4; }


/* ============================================================================
   LANDING
   A abertura deixou de ser uma tela única e passou a rolar. O herói continua
   igual; daqui para baixo entram os blocos que convencem antes do funil.
   Sem preço em nenhum deles: o valor só aparece no resultado.
   ========================================================================== */

.lp-bloco {
  margin: 46px 0 0;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.lp-tit {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 640;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}
.lp-tit em { font-style: italic; color: var(--gold-forte); }

.lp-txt {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-2);
}

/* ---------- como funciona ---------- */

.lp-passos {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.lp-passos li { display: flex; gap: 13px; align-items: flex-start; }

.lp-num {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--gold-soft);
  border: 1px solid rgba(168,122,61,.28);
  color: var(--gold-forte);
  font-size: 13px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-passos b {
  display: block;
  font-size: 15.5px;
  font-weight: 620;
  line-height: 1.4;
  color: var(--ink);
}
.lp-passos p {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.58;
  color: var(--ink-2);
}

/* ---------- perguntas frequentes ---------- */

.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq details:first-child { border-top: 1px solid var(--line); }

.lp-faq summary {
  /* O marcador nativo desalinha e muda de forma entre navegadores; desenho o meu. */
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 15px 34px 15px 0;
  font-size: 15px;
  font-weight: 570;
  line-height: 1.45;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.lp-faq details[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.lp-faq summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}
.lp-faq-r {
  padding: 0 4px 17px 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.lp-faq-r strong { color: var(--ink); font-weight: 600; }
.lp-faq-r > :last-child { margin-bottom: 0; }

/* ---------- fecho ---------- */

.lp-fecho {
  margin: 46px 0 0;
  padding: 30px 22px 28px;
  border: 1px solid rgba(168,122,61,.28);
  border-radius: var(--radius-lg);
  background: var(--gold-soft);
  text-align: center;
}
.lp-fecho h2 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 640;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--ink);
}
.lp-fecho h2 em { font-style: italic; color: var(--gold-forte); }
.lp-fecho p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.lp-fecho .btn { margin: 0; }

@media (min-width: 620px) {
  .lp-bloco { margin-top: 56px; padding-top: 40px; }
  .lp-tit { font-size: 22px; }
  .lp-passos { gap: 19px; }
  .lp-fecho { margin-top: 56px; padding: 36px 30px 34px; }
  .lp-fecho h2 { font-size: 21px; }
}