/* ══════════════════════════════════════════════════
   FLUJO INTERACTIVO — Estilos compartidos
   Usado por: flujo_clinica, flujo_b2b, flujo_inmobiliaria,
              flujo_ecommerce, flujo_academia
   ══════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#141414;--card:#1e1e1e;
  --green:#3ecf6e;--gd:rgba(62,207,110,.10);--gb:rgba(62,207,110,.28);
  --w:#fff;--g1:#e8e8e8;--g2:#a0a0a0;--g3:#555;
  --bdr:rgba(255,255,255,.08);--bdr2:rgba(255,255,255,.13);
  --teal:#06b6d4;--amb:#f59e0b;--red:#ef4444;--blue:#3b82f6;--pur:#a855f7;
  --acc:#3ecf6e;
}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--w);min-height:100vh}
nav{display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:58px;background:#111;border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:100}
.logo{display:flex;align-items:center;text-decoration:none}
.logo .why{font-size:21px;font-weight:800;color:var(--w)}
.logo .crm{background:var(--green);color:#071a0d;font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;margin-left:3px;margin-bottom:9px}
.nav-r{display:flex;align-items:center;gap:10px}
.btn-back{font-size:12px;font-weight:500;color:var(--g2);text-decoration:none;display:flex;align-items:center;gap:4px}
.btn-back:hover{color:var(--w)}
.btn-demo{font-size:12px;font-weight:600;color:var(--acc);border:1.5px solid rgba(255,255,255,.18);padding:6px 15px;border-radius:30px;text-decoration:none}
.btn-demo:hover{background:rgba(255,255,255,.06)}
.prog{height:3px;background:rgba(255,255,255,.06)}
.prog-fill{height:100%;width:0%;transition:width .5s ease;border-radius:0 2px 2px 0;background:var(--acc)}
.hero{padding:28px 32px 22px;border-bottom:1px solid var(--bdr);background:#181818}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 12px;border-radius:30px;margin-bottom:10px}
.pdot{width:5px;height:5px;border-radius:50%;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.hero h1{font-size:24px;font-weight:800;letter-spacing:-.5px;margin-bottom:5px;line-height:1.2}
.hero-p{font-size:13px;color:var(--g2);max-width:580px;line-height:1.55}
.htags{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.htag{font-size:11px;font-weight:500;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--bdr2);color:var(--g2)}
.hint{display:flex;align-items:center;gap:8px;padding:10px 32px;font-size:12px;color:var(--g2);border-bottom:1px solid var(--bdr)}
.hint strong{color:var(--acc)}
#bc{display:none;padding:8px 32px;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--bdr)}
.bc-chip{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;display:flex;align-items:center;gap:4px}
#resetWrap{display:flex;justify-content:flex-end;padding:10px 32px 0;min-height:32px}
#resetBtn{display:none;font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;color:var(--g2);background:rgba(255,255,255,.04);border:1px solid var(--bdr2);padding:5px 14px;border-radius:20px;cursor:pointer}
#resetBtn:hover{color:var(--w)}
#canvas{max-width:620px;margin:0 auto;padding:12px 32px 72px}

/* NODE CARDS - enter animation */
.fn{border-radius:12px;padding:16px 18px;margin-bottom:0;
    opacity:0;transform:translateY(12px);
    transition:opacity .28s ease, transform .28s ease}
.fn.in{opacity:1;transform:translateY(0)}

.fn.start{background:var(--acc);border-radius:32px;padding:11px 28px;text-align:center;font-weight:700;font-size:14px;color:#071a0d}
.fn.action{background:var(--card);border:1.5px solid rgba(255,255,255,.18)}
.fn.info{background:var(--card);border:1.5px solid rgba(59,130,246,.3)}
.fn.question{background:var(--card);border:1.5px solid var(--bdr2)}
.fn.merge{background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.22);text-align:center}
.fn.end-ok{background:rgba(62,207,110,.08);border:1.5px solid rgba(62,207,110,.3)}
.fn.end-nur{background:rgba(245,158,11,.08);border:1.5px solid rgba(245,158,11,.3)}
.fn.end-urg{background:rgba(239,68,68,.08);border:1.5px solid rgba(239,68,68,.3)}
.fn.end-cold{background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.1)}
.fn.end-b2b{background:rgba(168,85,247,.08);border:1.5px solid rgba(168,85,247,.3)}

.ntag{display:inline-block;font-size:9px;font-weight:700;padding:2px 9px;border-radius:10px;margin-bottom:7px}
.tga{background:rgba(62,207,110,.1);color:#3ecf6e;border:1px solid rgba(62,207,110,.28)}
.tgd{background:rgba(255,255,255,.06);color:var(--g2);border:1px solid var(--bdr2)}
.tgi{background:rgba(59,130,246,.12);color:#3b82f6;border:1px solid rgba(59,130,246,.3)}
.tgm{background:rgba(255,255,255,.05);color:var(--g3);border:1px solid var(--bdr)}
.tgp{background:rgba(168,85,247,.12);color:#a855f7;border:1px solid rgba(168,85,247,.3)}
.nn{font-size:14px;font-weight:700;line-height:1.3;margin-bottom:3px}
.ns{font-size:12px;color:var(--g2);line-height:1.45}
.nmsg{margin-top:9px;padding:8px 12px;background:rgba(255,255,255,.03);border-left:2px solid var(--acc);border-radius:0 7px 7px 0;font-size:12px;color:var(--g2);font-style:italic;line-height:1.5}
.nbadge{display:inline-block;margin-top:8px;font-size:9px;font-weight:700;padding:2px 9px;border-radius:10px;background:var(--gd);color:#3ecf6e;border:1px solid var(--gb)}
.end-ok .nn{color:#3ecf6e}.end-ok .ns{color:rgba(62,207,110,.6)}
.end-nur .nn{color:#f59e0b}.end-nur .ns{color:rgba(245,158,11,.6)}
.end-urg .nn{color:#ef4444}.end-urg .ns{color:rgba(239,68,68,.6)}
.end-cold .nn,.end-cold .ns{color:var(--g2)}
.end-b2b .nn{color:#a855f7}.end-b2b .ns{color:rgba(168,85,247,.6)}
.merge .nn{font-size:13px;font-weight:600;color:var(--g1)}

/* connector */
.conn{display:flex;flex-direction:column;align-items:center;height:28px;
      opacity:0;transition:opacity .2s}
.conn.in{opacity:1}
.conn-line{width:2px;flex:1;background:rgba(255,255,255,.12)}
.conn-tip{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid rgba(255,255,255,.18)}

/* choice buttons */
.choices{display:flex;flex-direction:column;gap:7px;margin-top:13px;
         opacity:0;transform:translateY(5px);transition:opacity .22s,transform .22s}
.choices.in{opacity:1;transform:translateY(0)}

.ch{display:flex;align-items:center;gap:10px;
    background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.10);
    border-radius:10px;padding:11px 14px;cursor:pointer;
    text-align:left;width:100%;font-family:'Outfit',sans-serif;
    color:var(--w);transition:background .12s,border-color .12s,transform .1s}
.ch:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);transform:translateX(2px)}
.ch.picked{pointer-events:none}
.ch.faded{opacity:.2;pointer-events:none;transform:none !important}
.ch-icon{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.06);
         display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.ch-body{flex:1}
.ch-label{font-size:13px;font-weight:600;line-height:1.25}
.ch-sub{font-size:11px;color:var(--g2);margin-top:2px;line-height:1.3}
.ch-arr{margin-left:auto;font-size:18px;opacity:.25;flex-shrink:0;transition:transform .1s}
.ch:hover .ch-arr{transform:translateX(2px);opacity:.5}

/* footer */
.wc-footer{padding:20px 32px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px}
.ft{font-size:12px;color:var(--g3)}
.fl{font-size:12px;font-weight:600;color:var(--acc);text-decoration:none;border:1px solid rgba(255,255,255,.15);padding:6px 14px;border-radius:20px}
.fl:hover{background:rgba(255,255,255,.05)}