/* funnel.css — Embudo: cuestionario, carga, resultados y conversión. Diseño épico. */

/* ── Barra de progreso del cuestionario ── */
.qz-top{position:sticky;top:calc(var(--hdr-h) + env(safe-area-inset-top,0px));z-index:90;background:var(--smoke);padding:12px 16px 8px;}
.qz-steps{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.qz-step-lbl{font-size:11px;font-weight:700;color:var(--navy);}
.qz-step-pct{font-size:11px;font-weight:700;color:var(--gold);}
.qz-bar{height:7px;background:#DCE6F2;border-radius:99px;overflow:hidden;}
.qz-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--sky),var(--gold));border-radius:99px;transition:width .45s cubic-bezier(.4,0,.2,1);}
.qz-dots{display:flex;gap:5px;margin-top:8px;justify-content:center;}
.qz-dots i{width:7px;height:7px;border-radius:50%;background:#C8D6E5;transition:.3s;}
.qz-dots i.done{background:var(--sky);}
.qz-dots i.now{background:var(--gold);transform:scale(1.35);}

/* ── Cuerpo del paso ── */
.qz-body{padding:16px;animation:scrIn .3s ease both;}
.qz-head{text-align:center;margin-bottom:18px;}
.qz-ic{font-size:34px;display:block;margin-bottom:6px;}
.qz-tema{font-size:19px;font-weight:700;color:var(--navy);}
.qz-obj{font-size:12px;color:var(--stone);margin-top:4px;line-height:1.4;max-width:320px;margin-left:auto;margin-right:auto;}

.qz-q{background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:15px;margin-bottom:12px;}
.qz-q-t{font-size:14px;font-weight:600;color:var(--slate);margin-bottom:12px;line-height:1.35;}
.qz-opts{display:flex;flex-direction:column;gap:8px;}
.qz-opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:#F7FAFD;border:1.5px solid var(--border);border-radius:10px;padding:12px 13px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--slate);transition:border-color .15s,background .15s,transform .08s;}
.qz-opt:active{transform:scale(.99);}
.qz-opt .rd{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s;}
.qz-opt .rd::after{content:"";width:9px;height:9px;border-radius:50%;background:transparent;transition:.15s;}
.qz-opt.sel{border-color:var(--gold);background:#FBF6EA;color:var(--navy);font-weight:600;}
.qz-opt.sel .rd{border-color:var(--gold);}
.qz-opt.sel .rd::after{background:var(--gold);}
.qz-opt .op-l{flex:1;}
.qz-opt .op-s{display:block;font-size:10px;color:var(--stone);font-weight:400;margin-top:1px;}

/* Escala 1-5 */
.qz-scale{display:flex;gap:7px;}
.qz-scale .qz-opt{flex-direction:column;align-items:center;gap:5px;padding:11px 4px;text-align:center;}
.qz-scale .qz-opt .rd{display:none;}
.qz-scale .qz-opt .op-l{font-family:'DM Mono',monospace;font-size:17px;font-weight:700;flex:none;}
.qz-scale .qz-opt .op-s{font-size:8px;line-height:1.1;}

.qz-nav{display:flex;gap:10px;margin-top:6px;}
.qz-nav .btn-p{flex:1;width:auto;min-width:0;}
.qz-back{flex:0 0 auto!important;width:auto!important;padding-left:18px;padding-right:18px;}

/* ── Pantalla de carga ── */
#s-cargando.on{display:flex;}
/* Fondo claro: la espera llega justo después de cinco pasos de formulario sobre blanco,
   y caer de golpe a un navy a pantalla completa se sentía como si la app se hubiera ido a
   otra parte. En claro, la transición al resultado es continua. */
#s-cargando{flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - var(--hdr-h));text-align:center;padding:30px;
  background:radial-gradient(620px 420px at 50% 30%, #fff, var(--smoke) 70%);}
.load-ring{width:96px;height:96px;margin-bottom:26px;position:relative;}
.load-ring svg{width:100%;height:100%;animation:spin 1.4s linear infinite;}
.load-ring .pulse{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;animation:pulse 1.6s ease-in-out infinite;}
.load-ring .pulse img{width:46px;height:46px;display:block;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.12);opacity:1;}}
.load-msg{color:var(--navy);font-size:15px;font-weight:600;min-height:44px;max-width:300px;transition:opacity .4s;line-height:1.4;}
.load-sub{color:var(--stone);font-size:11px;margin-top:14px;letter-spacing:1px;text-transform:uppercase;}
.load-bar{width:200px;height:5px;background:rgba(27,42,74,.12);border-radius:99px;overflow:hidden;margin-top:18px;}
.load-bar > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-lt));border-radius:99px;}

/* ── Bloques de resultados / conversión ── */
.res-narr{margin:0 14px 12px;background:#fff;border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:var(--r);box-shadow:var(--sh);padding:14px 15px;font-size:13px;line-height:1.55;color:var(--slate);}
.res-narr b{color:var(--navy);}

.blind{margin:0 14px 12px;background:linear-gradient(135deg,#8B2500,#B23A1A);border-radius:var(--r);padding:13px 15px;color:#fff;display:flex;align-items:center;gap:12px;}
.blind .ic{font-size:26px;}
.blind .k{font-size:9px;text-transform:uppercase;letter-spacing:.6px;opacity:.8;}
.blind .v{font-size:16px;font-weight:700;}

.act{counter-reset:actn;}
.act-i{display:flex;gap:12px;padding:12px 14px;border-top:1px solid var(--border);align-items:flex-start;}
.act-i:first-child{border-top:none;}
.act-i::before{counter-increment:actn;content:counter(actn);flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;}
.act-i .tx{flex:1;font-size:12.5px;line-height:1.45;color:var(--slate);}

/* Tarjetas de conversión */
.conv{margin:16px 14px 10px;}
.cierre{
  background:linear-gradient(135deg,#1B2A4A,#2E5B9A);border:1px solid var(--gold);border-radius:16px;
  padding:20px 18px;color:#fff;box-shadow:0 8px 24px rgba(27,42,74,.25);margin-bottom:12px;text-align:center;
}
.cierre-ic{font-size:26px;display:block;margin-bottom:6px;}
.cierre h3{font-size:16px;font-weight:700;color:var(--gold-lt);margin-bottom:8px;}
.cierre p{font-size:12.5px;line-height:1.6;opacity:.92;text-align:left;}
.cierre p + p{margin-top:9px;}
.cierre b{color:var(--gold-lt);}
.conv-ttl{text-align:center;font-size:11px;font-weight:700;color:var(--stone);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;}
.premium{background:linear-gradient(135deg,#1B2A4A,#2E5B9A);border:1px solid var(--gold);border-radius:16px;padding:18px;color:#fff;box-shadow:0 8px 24px rgba(27,42,74,.25);position:relative;overflow:hidden;margin-bottom:12px;}
.premium::before{content:"★ PREMIUM";position:absolute;top:12px;right:-30px;background:var(--gold);color:#fff;font-size:9px;font-weight:700;padding:3px 34px;transform:rotate(38deg);letter-spacing:1px;}
.premium h3{font-size:16px;font-weight:700;margin-bottom:6px;}
.premium p{font-size:12px;opacity:.9;line-height:1.5;margin-bottom:14px;}
.premium .price{font-family:'DM Mono',monospace;font-size:30px;font-weight:700;color:var(--gold-lt);}
.premium .price small{font-size:12px;opacity:.7;}
.premium .btn-p{margin-top:12px;background:linear-gradient(135deg,var(--gold),var(--gold-lt))!important;color:#1B2A4A!important;}

.lead-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--sh);margin-bottom:12px;}
.lead-card h4{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:4px;}
.lead-card p{font-size:11.5px;color:var(--stone);line-height:1.45;margin-bottom:12px;}
.lead-row{display:flex;gap:8px;}
.lead-row input{flex:1;border:1px solid var(--border);border-radius:9px;padding:11px 12px;font-family:inherit;font-size:13px;outline:none;}
.lead-row input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,149,58,.12);}
.lead-row button{flex:0 0 auto;width:auto;}

/* Tarjeta de contacto directo. Antes era un recuadro gris que se leía como pie de página;
   ahora pesa lo que debe pesar, porque es la acción que el negocio quiere que ocurra. El
   verde lo asocia de inmediato con WhatsApp sin usar su logotipo. */
.consult{
  margin:0 0 14px;background:#fff;border:1px solid #BFE6CE;border-radius:14px;
  padding:18px 16px;text-align:center;box-shadow:0 6px 20px rgba(18,140,126,.12);
}
.consult-ic{
  width:46px;height:46px;margin:0 auto 11px;border-radius:50%;
  background:#E8F8EF;color:#128C7E;display:flex;align-items:center;justify-content:center;font-size:24px;
}
.consult h4{font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:5px;}
.consult p{font-size:11.5px;color:var(--stone);line-height:1.5;margin-bottom:14px;}
.btn-wa{
  width:100%;font-family:inherit;font-size:13.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#25D366,#12916E);border:none;border-radius:11px;
  padding:13px 18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 6px 16px rgba(18,140,126,.30);transition:filter .15s,transform .1s,box-shadow .15s;
}
.btn-wa .ico{font-size:18px;}
.btn-wa:hover{filter:brightness(1.06);box-shadow:0 10px 24px rgba(18,140,126,.36);}
.btn-wa:active{transform:translateY(1px);}

/* Sello de desbloqueado */
.unlocked{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--green);background:#E8F8EF;border-radius:20px;padding:3px 10px;}

/* ── Pregunta de monto (campo numérico con moneda) ── */
.qz-q-h{font-size:10.5px;color:var(--stone);margin-top:8px;line-height:1.45;}
.qz-money{
  display:flex; align-items:center; gap:0; background:#F7FAFD;
  border:1.5px solid var(--border); border-radius:10px; overflow:hidden;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.qz-money:focus-within{border-color:var(--gold); background:#fff; box-shadow:0 0 0 3px rgba(184,149,58,.12);}
.qz-cur{
  display:flex; align-items:baseline; gap:4px; flex-shrink:0; align-self:stretch;
  padding:0 11px; background:var(--navy); color:#fff;
  font-size:9.5px; font-weight:700; letter-spacing:.5px;
}
.qz-cur b{font-size:14px; font-weight:700; color:var(--gold-lt);}
.qz-money-in{
  flex:1; min-width:0; border:none; background:transparent; outline:none;
  font-family:'DM Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:19px; font-weight:700; color:var(--navy);
  padding:13px 10px; text-align:right; -webkit-appearance:none; appearance:none;
}
.qz-money-in::placeholder{color:var(--border); font-weight:700;}
.qz-per{flex-shrink:0; padding-right:13px; font-size:11px; color:var(--stone); font-weight:600;}
.qz-money.err{border-color:var(--red); background:#FDEDEC;}
.qz-money.err .qz-cur{background:var(--red);}
.qz-money.err .qz-cur b{color:#fff;}

/* ── Puerta del paso: dos tarjetas grandes ── */
.qz-q-plain{background:none;border:none;box-shadow:none;padding:0;}
.qz-q-plain .qz-q-t{text-align:center;font-size:15px;color:var(--navy);font-weight:700;margin-bottom:14px;}
.qz-cards{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.qz-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  background:#fff;border:2px solid var(--border);border-radius:14px;padding:22px 12px 18px;
  cursor:pointer;font-family:inherit;box-shadow:var(--sh);
  transition:border-color .15s,transform .08s,box-shadow .15s;
}
.qz-card:active{transform:scale(.98);}
.qz-card.sel{border-color:var(--gold);background:#FBF6EA;}
.qz-card-ic{font-size:36px;line-height:1;}
.qz-card-t{font-size:14px;font-weight:700;color:var(--navy);line-height:1.25;}
.qz-card-s{font-size:10.5px;color:var(--stone);line-height:1.35;}

/* Respuesta de la puerta ya elegida */
.qz-chosen{
  display:flex;align-items:center;gap:9px;background:#FBF6EA;border:1px solid var(--gold);
  border-radius:10px;padding:9px 12px;margin-bottom:12px;
}
.qz-chosen-ic{font-size:18px;}
.qz-chosen-t{flex:1;font-size:12.5px;font-weight:700;color:var(--navy);}
.qz-chosen-x{
  background:none;border:none;font-family:inherit;font-size:11px;font-weight:700;
  color:var(--gold);cursor:pointer;text-decoration:underline;padding:2px 4px;
}

/* ── Lista de chequeo de deudas ── */
.qz-q.err{border-color:var(--red);box-shadow:0 0 0 3px rgba(231,76,60,.10);}
.dl{display:flex;flex-direction:column;gap:6px;}
.dl-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.dl-chk{
  flex:1;min-width:0;display:flex;align-items:center;gap:9px;text-align:left;
  background:#F7FAFD;border:1.5px solid var(--border);border-radius:10px;padding:10px 11px;
  cursor:pointer;font-family:inherit;font-size:12.5px;color:var(--slate);
  transition:border-color .15s,background .15s;
}
.dl-box{
  width:19px;height:19px;border-radius:6px;border:2px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.dl-box::after{content:"✓";font-size:12px;font-weight:700;color:#fff;opacity:0;transition:.15s;}
.dl-ic{font-size:15px;flex-shrink:0;}
.dl-lb{flex:1;line-height:1.3;}
.dl-row.on .dl-chk{border-color:var(--gold);background:#FBF6EA;color:var(--navy);font-weight:600;}
.dl-row.on .dl-box{background:var(--gold);border-color:var(--gold);}
.dl-row.on .dl-box::after{opacity:1;}
.dl-val{display:none;align-items:center;gap:5px;flex:0 0 122px;
  border:1.5px solid var(--gold);border-radius:10px;padding:0 10px;background:#fff;}
.dl-row.on .dl-val{display:flex;}
.dl-cur{font-size:12px;color:var(--stone);font-weight:700;flex-shrink:0;}
.dl-in{
  width:100%;min-width:0;border:none;outline:none;background:transparent;
  font-family:'DM Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:14px;font-weight:700;color:var(--navy);text-align:right;padding:9px 0;
}
.dl-in::placeholder{color:var(--border);font-size:12px;}
@media (max-width:359px){ .dl-val{flex:1 0 100%;} }

.dl-total{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;
  background:var(--navy);border-radius:10px;padding:12px 14px;color:#fff;
}
.dl-total span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--mist);}
.dl-total b{font-family:'DM Mono','SFMono-Regular',ui-monospace,monospace;font-size:17px;color:var(--gold-lt);}

/* ── Sub-campo de porcentaje (aparece bajo la opción elegida) ── */
.qz-sub{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:2px 0 2px 30px;padding:9px 12px;background:#fff;
  border:1.5px solid var(--gold);border-radius:10px;animation:scrIn .2s ease both;
}
.qz-sub.err{border-color:var(--red);background:#FDEDEC;}
.qz-sub-l{font-size:11.5px;color:var(--navy);font-weight:600;line-height:1.3;flex:1;min-width:0;}
.qz-sub-l i{display:block;font-size:9.5px;color:var(--stone);font-weight:400;font-style:normal;margin-top:2px;line-height:1.35;}
.qz-sub + .qz-sub{margin-top:6px;}
.qz-pct{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;}
.qz-pct-in{
  width:54px;border:1.5px solid var(--border);border-radius:8px;background:#fff;outline:none;
  font-family:'DM Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:17px;font-weight:700;color:var(--navy);text-align:center;padding:7px 4px;
  -webkit-appearance:none;appearance:none;
}
.qz-pct-in:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,149,58,.12);}
.qz-pct-in::placeholder{color:var(--border);}
.qz-pct b{font-size:16px;color:var(--gold);font-weight:700;}
.qz-pct b.pre{font-size:12px;color:var(--stone);}
.qz-pct b.suf{font-size:10px;color:var(--stone);font-weight:600;}
.qz-pct-in.ancho{width:136px;font-size:15px;text-align:right;padding-right:9px;}

/* El logotipo oficial, cuando está presente, ocupa el sitio del ícono genérico. */
.wa-logo{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:0 0 auto;}
.consult-ic .wa-logo{width:26px;height:26px;}
.btn-wa .wa-logo{width:20px;height:20px;}