/* ═══════════════════════════════════════════════════════════
   A CONTA — quanto a operação do leitor está perdendo hoje.

   Estatística de terceiro o leitor discute ("no meu caso é diferente").
   A conta feita com os números dele mesmo, ele não discute — ele reconhece.
   Por isso os campos são editáveis e a fórmula fica à vista: quem desconfia
   pode conferir a matemática, e conferir é engajar.

   Nada aqui afirma resultado. A tela diz o que ESTÁ SENDO PERDIDO hoje, que é
   fato aritmético sobre os dados que a própria pessoa digitou.
   ═══════════════════════════════════════════════════════════ */

.perda{margin:var(--sp-12) 0;border-radius:var(--r-2xl);overflow:hidden;
  background:linear-gradient(135deg,#14120F 0%,#231C16 58%,#2B1D14 100%);
  box-shadow:0 30px 70px -40px rgba(10,10,11,.8);max-width:540px}

.pr-topo{padding:24px 26px 20px;border-bottom:1px solid rgba(255,255,255,.09)}
.pr-rot{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:#FFB800;display:block;margin-bottom:10px}
.pr-h{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:1.375rem;font-weight:600;line-height:1.3;color:#FFF;letter-spacing:-.02em}

/* ── os campos ── */
.pr-campos{padding:20px 26px 4px;display:flex;flex-direction:column;gap:18px}
.pr-c > label{display:block;font-size:.8125rem;line-height:1.45;
  color:rgba(255,255,255,.72);margin-bottom:9px}
.pr-in{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:2px 14px;
  transition:border-color var(--d-fast),background var(--d-fast)}
.pr-in:focus-within{border-color:var(--nucleo-laranja);background:rgba(255,107,53,.08)}
.pr-in span{font-size:.875rem;color:rgba(255,255,255,.45);white-space:nowrap}
.pr-in input{flex:1;min-width:0;background:none;border:0;outline:0;padding:13px 0;
  font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:1.375rem;font-weight:600;color:#FFF;letter-spacing:-.01em;
  /* as setinhas do number roubam espaço e ninguém clica nelas */
  -moz-appearance:textfield}
.pr-in input::-webkit-outer-spin-button,
.pr-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── o resultado ── */
.pr-saida{margin-top:18px;padding:22px 26px 24px;background:rgba(0,0,0,.34);
  border-top:1px solid rgba(255,184,0,.22)}
.pr-linha{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:.8125rem;color:rgba(255,255,255,.6)}
.pr-linha + .pr-linha{margin-top:7px}
/* qualquer <b> dentro da caixa escura, venha de onde vier */
.perda b{color:#FFF}
.perda .pr-c > label b,.perda .pr-dica b{color:rgba(255,255,255,.9)}
.perda .pr-pe b{color:rgba(255,255,255,.92);font-weight:600}

.perda .pr-linha b{font-family:var(--font-mono);font-size:.875rem;
  color:rgba(255,255,255,.92);font-weight:500;white-space:nowrap}
.pr-total{margin-top:16px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.16)}
.pr-total-r{display:block;font-family:var(--font-mono);font-size:.625rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);
  margin-bottom:6px}
.pr-n{display:block;font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:clamp(2.25rem,1.4rem + 3.4vw,3.25rem);font-weight:600;line-height:1;
  letter-spacing:-.035em;
  background:linear-gradient(135deg,#FFB800,#FF6B35 52%,#FF3D7F);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* o cifrão e a vírgula descem abaixo da caixa e background-clip não pinta
     fora dela — mesma armadilha do .hero-l2 */
  padding-bottom:.06em}
.pr-n-sub{display:block;margin-top:8px;font-size:.875rem;line-height:1.5;
  color:rgba(255,255,255,.72)}
.perda .pr-n-sub b{color:#FFF;font-weight:600}

.pr-pe{padding:14px 26px 18px;background:#14120F;font-size:.6875rem;line-height:1.6;
  color:rgba(255,255,255,.42)}

@media (max-width:620px){ .perda{max-width:none} }

/* a dica embaixo do rótulo: diz o que entra na conta sem alongar a pergunta */
.pr-dica{display:block;margin-top:4px;font-size:.75rem;color:rgba(255,255,255,.45)}

/* quarto campo: o funil comercial tem mais etapas que os outros ICPs, e cortar
   uma delas para caber em três campos falsearia a conta */
.pr-campos--4{gap:15px}
.pr-campos--4 .pr-in input{font-size:1.25rem;padding:11px 0}