/* ============================================================
   IntelliFin · Sección "Demos en vivo"  ·  .ifd
   Namespaceado .ifd-* — el index corre Bootstrap 5.
   Compartido entre el index (Destino A) y /demos/ (Destino B).

   Principio: el panel IZQUIERDO es donde de verdad está el humano.
     · Cliente   → WhatsApp
     · Analista  → consola de originación (Fineract)
     · Operador  → GConekt AI (inbox operativo)
   El panel DERECHO es el sistema reaccionando solo.
   Coral = "algo acaba de cambiar". Siempre. En las tres demos.
   ============================================================ */
.ifd{
  --ifd-ink:#2C2E3C;
  --ifd-muted:#797A85;
  --ifd-paper:#FFFFFF;
  --ifd-wash:#F7F7F9;
  --ifd-line:#E8E8ED;
  --ifd-coral:#FD6F63;
  --ifd-violet:#8B5CF6;
  --ifd-cyan:#22D3EE;
  --ifd-wa-bg:#EFE7E1;
  --ifd-wa-out:#D9FDD3;
  --ifd-ok:#12A150;
  --ifd-accent:var(--ifd-coral);   /* identidad de cada demo */
  --ifd-hot:#FD6F63;               /* universal: "acaba de cambiar" */
  --ifd-r:24px;
  --ifd-ff:'Manrope',system-ui,sans-serif;
  --ifd-mono:'JetBrains Mono',ui-monospace,monospace;

  position:relative;background:var(--ifd-paper);color:var(--ifd-ink);
  font-family:var(--ifd-ff);padding:104px 0 112px;overflow:hidden;isolation:isolate;
}
.ifd *,.ifd *::before,.ifd *::after{box-sizing:border-box}
.ifd ::selection{background:rgba(253,111,99,.22)}
.ifd :focus-visible{outline:2px solid var(--ifd-coral);outline-offset:2px;border-radius:6px}

.ifd-aurora{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ifd-aurora i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.5}
.ifd-aurora i:nth-child(1){width:520px;height:520px;top:-180px;left:-120px;
  background:radial-gradient(circle,rgba(253,111,99,.55),transparent 68%);animation:ifd-drift 26s ease-in-out infinite}
.ifd-aurora i:nth-child(2){width:460px;height:460px;bottom:-200px;right:-100px;
  background:radial-gradient(circle,rgba(139,92,246,.42),transparent 68%);animation:ifd-drift 32s ease-in-out infinite reverse}
.ifd-aurora i:nth-child(3){width:340px;height:340px;top:38%;right:22%;
  background:radial-gradient(circle,rgba(34,211,238,.24),transparent 70%);animation:ifd-drift 38s ease-in-out infinite}
@keyframes ifd-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-22px)}}

.ifd-wrap{position:relative;max-width:1180px;margin:0 auto;padding:0 24px}

.ifd-pill{display:inline-block;background:var(--ifd-coral);color:#fff;border-radius:30px;
  padding:7px 18px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.ifd-head{max-width:760px;margin-bottom:52px}
.ifd-head h2{font-size:clamp(2.2rem,5.2vw,3.65rem);line-height:1.04;letter-spacing:-.035em;
  font-weight:300;margin:26px 0 0}
.ifd-head h2 b{font-weight:800;display:block}
.ifd-head p{margin:22px 0 0;color:var(--ifd-muted);font-size:1.08rem;max-width:560px;line-height:1.6}

.ifd-tabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.ifd-tab{display:inline-flex;align-items:center;gap:9px;background:var(--ifd-paper);
  border:1px solid var(--ifd-line);border-radius:50px;padding:11px 20px;cursor:pointer;
  font-family:var(--ifd-ff);font-size:.875rem;font-weight:600;color:var(--ifd-muted);
  transition:color .2s,border-color .2s,background .2s}
.ifd-tab:hover{color:var(--ifd-ink);border-color:#d3d3db}
.ifd-tab .ifd-swatch{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.35;transition:opacity .2s}
.ifd-tab[aria-selected="true"]{background:var(--ifd-ink);border-color:var(--ifd-ink);color:#fff}
.ifd-tab[aria-selected="true"] .ifd-swatch{opacity:1;background:var(--tabc)}

.ifd-stage{position:relative;border:1px solid var(--ifd-line);border-radius:var(--ifd-r);
  background:var(--ifd-paper);box-shadow:0 34px 90px -38px rgba(44,46,60,.28);overflow:hidden}
.ifd-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--ifd-line);background:var(--ifd-wash);flex-wrap:wrap}
.ifd-bar-l{display:flex;align-items:center;gap:11px;font-size:.8rem;font-weight:600;color:var(--ifd-muted)}
.ifd-live{width:8px;height:8px;border-radius:50%;background:var(--ifd-accent);position:relative;flex-shrink:0}
.ifd-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--ifd-accent);
  opacity:.5;animation:ifd-ring 2.1s infinite}
@keyframes ifd-ring{0%{transform:scale(.65);opacity:.55}100%{transform:scale(1.7);opacity:0}}
.ifd-play{display:inline-flex;align-items:center;gap:9px;background:var(--ifd-ink);color:#fff;border:0;
  border-radius:50px;padding:10px 24px;font-family:var(--ifd-ff);font-size:.8125rem;font-weight:600;
  cursor:pointer;transition:transform .18s,opacity .18s}
.ifd-play:hover{transform:translateY(-1px)}
.ifd-play:disabled{opacity:.42;cursor:default;transform:none}
.ifd-play svg{width:12px;height:12px}

.ifd-split{display:grid;grid-template-columns:1fr 1.12fr;min-height:520px}
.ifd-side{padding:24px;min-width:0}
.ifd-side + .ifd-side{border-left:1px solid var(--ifd-line)}
.ifd-side-h{display:flex;align-items:center;gap:10px;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ifd-muted);margin-bottom:16px}
.ifd-side-h::after{content:"";flex:1;height:1px;background:var(--ifd-line)}
@media(max-width:900px){
  .ifd-split{grid-template-columns:1fr}
  .ifd-side + .ifd-side{border-left:0;border-top:1px solid var(--ifd-line)}
}

/* ---------- izquierda A: chat WhatsApp (solo e-commerce) ---------- */
.ifd-chat{background:var(--ifd-wa-bg);border-radius:16px;padding:14px;min-height:416px;
  display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.ifd-chat::before{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:radial-gradient(#2C2E3C 1px,transparent 1px);background-size:15px 15px}
.ifd-msg{position:relative;max-width:84%;padding:9px 12px;border-radius:9px;font-size:.845rem;
  line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.07);animation:ifd-pop .3s cubic-bezier(.22,1,.36,1)}
@keyframes ifd-pop{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}
.ifd-msg.in{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.ifd-msg.out{background:var(--ifd-wa-out);align-self:flex-end;border-top-right-radius:2px}
.ifd-msg .sku{font-family:var(--ifd-mono);font-weight:700;font-size:.8rem}
.ifd-msg time{display:block;text-align:right;font-size:.62rem;color:#8b9199;margin-top:3px}
.ifd-typing{align-self:flex-start;background:#fff;border-radius:9px;border-top-left-radius:2px;
  padding:12px 14px;display:flex;gap:4px;box-shadow:0 1px 1px rgba(0,0,0,.07)}
.ifd-typing span{width:6px;height:6px;border-radius:50%;background:#b6bcc4;animation:ifd-bounce 1.3s infinite}
.ifd-typing span:nth-child(2){animation-delay:.16s}.ifd-typing span:nth-child(3){animation-delay:.32s}
@keyframes ifd-bounce{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.ifd-paylink{display:inline-flex;align-items:center;gap:7px;margin-top:7px;background:#635BFF;color:#fff;
  border-radius:7px;padding:7px 11px;font-family:var(--ifd-mono);font-size:.72rem}
.ifd-empty{margin:auto;text-align:center;color:#9aa0a8;font-size:.84rem;max-width:230px;line-height:1.5;position:relative}

/* ---------- izquierda B: consola (Fineract / GConekt AI) ---------- */
.ifd-console{border:1px solid var(--ifd-line);border-radius:16px;background:#fff;overflow:hidden;
  min-height:416px;display:flex;flex-direction:column}
.ifd-console-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 15px;background:var(--ifd-wash);border-bottom:1px solid var(--ifd-line)}
.ifd-console-h .ttl{font-family:var(--ifd-mono);font-size:.74rem;font-weight:700;color:var(--ifd-ink)}
.ifd-badge{font-size:.63rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px;border-radius:30px;background:#F0F0F3;color:#797A85;transition:background .3s,color .3s}
.ifd-badge[data-s="aprobado"]{background:rgba(44,46,60,.09);color:#2C2E3C}
.ifd-badge[data-s="activo"],.ifd-badge[data-s="enviando"]{background:rgba(18,161,80,.13);color:#0E7C3E}
.ifd-badge[data-s="completada"]{background:rgba(18,161,80,.13);color:#0E7C3E}
.ifd-cbody{padding:6px 15px;flex:1}
.ifd-grp{padding:8px 0 4px;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:#b0b4bd;font-weight:700;opacity:0}
.ifd-grp.on{opacity:1;animation:ifd-pop .3s}
.ifd-crow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px dashed #EFEFF3;opacity:0}
.ifd-crow.on{opacity:1;animation:ifd-pop .34s}
.ifd-crow .l{font-size:.78rem;color:var(--ifd-muted);white-space:nowrap}
.ifd-crow .v{font-size:.82rem;font-weight:600;text-align:right;color:var(--ifd-ink)}
.ifd-crow .v.m{font-family:var(--ifd-mono);font-weight:500;font-size:.76rem}
.ifd-cta{display:flex;gap:8px;padding:14px 15px;border-top:1px solid var(--ifd-line);background:var(--ifd-wash);flex-wrap:wrap}
.ifd-cta button{flex:1;min-width:96px;border:1px solid var(--ifd-line);background:#fff;color:#b0b4bd;
  border-radius:50px;padding:9px 10px;font-family:var(--ifd-ff);font-size:.74rem;font-weight:600;cursor:default;
  transition:color .25s,border-color .25s,background .25s,opacity .25s}
.ifd-cta button.armed{color:var(--ifd-ink);border-color:#c9c9d2}
.ifd-cta button.press{animation:ifd-press .34s;background:var(--ifd-ink);color:#fff;border-color:var(--ifd-ink)}
.ifd-cta button.done{opacity:.35;background:#fff;color:var(--ifd-muted);border-color:var(--ifd-line)}
@keyframes ifd-press{0%{transform:scale(1)}45%{transform:scale(.93);box-shadow:0 0 0 6px rgba(253,111,99,.16)}100%{transform:scale(1)}}

/* --- GConekt AI: identidad del inbox operativo --- */
.ifd-gc-h{background:#fff}
.ifd-gc-brand{display:flex;align-items:center;gap:9px;font-family:var(--ifd-ff);font-weight:700;font-size:.82rem;color:var(--ifd-ink)}
.ifd-gc-logo{font-family:var(--ifd-ff);font-weight:800;font-size:.7rem;letter-spacing:-.02em;color:var(--ifd-ink);
  border:1.5px solid var(--ifd-ink);border-radius:7px;padding:3px 5px;line-height:1}
.ifd-gc-logo b{color:var(--ifd-violet)}
/* editor de plantilla con variables */
.ifd-tpl{margin:2px 0 4px;background:#FBFBFD;border:1px solid var(--ifd-line);border-radius:11px;
  padding:12px 13px;font-size:.83rem;line-height:1.55;color:var(--ifd-ink);opacity:0}
.ifd-tpl.on{opacity:1;animation:ifd-pop .34s}
.ifd-tpl .var{font-family:var(--ifd-mono);font-size:.72rem;font-weight:500;color:#6D3BEE;
  background:rgba(139,92,246,.12);border-radius:5px;padding:1px 6px}
.ifd-pvnav{font-family:var(--ifd-mono);font-size:.64rem;color:var(--ifd-violet);font-weight:700}
.ifd-wapv .cap{display:flex;align-items:center;justify-content:space-between}
#pvBody.ifd-flash{animation:ifd-flash .5s}
@keyframes ifd-flash{0%{background:rgba(139,92,246,.14)}100%{background:#fff}}

/* vista previa del mensaje que sale (GConekt) */
.ifd-wapv{margin:12px 0 4px;background:var(--ifd-wa-bg);border-radius:12px;padding:12px;opacity:0}
.ifd-wapv.on{opacity:1;animation:ifd-pop .34s}
.ifd-wapv .cap{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#9aa0a8;font-weight:700;margin-bottom:8px}
.ifd-wapv .b{background:#fff;border-radius:9px;border-top-left-radius:2px;padding:9px 12px;
  font-size:.8rem;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.07)}

/* ---------- derecha: el sistema ---------- */
.ifd-panel{border:1px solid var(--ifd-line);border-radius:14px;overflow:hidden;background:#fff}
.ifd-panel-h{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;
  background:var(--ifd-wash);border-bottom:1px solid var(--ifd-line);font-size:.74rem;font-weight:700;color:var(--ifd-muted)}
.ifd-panel-h .m{font-family:var(--ifd-mono);font-size:.66rem;font-weight:500}

.ifd-big{padding:16px 16px 14px}

/* tarjetas de producto — catálogo real de Odoo */
.ifd-cards{padding:6px}
.ifd-pcard{display:flex;gap:13px;align-items:center;padding:12px;border:1px solid var(--ifd-line);
  border-radius:12px;margin:6px;background:#fff;transition:background .35s,box-shadow .35s}
.ifd-pcard.hot{background:rgba(253,111,99,.06);box-shadow:inset 3px 0 0 var(--ifd-hot)}
.ifd-pthumb{width:76px;height:58px;flex-shrink:0;border-radius:9px;background:var(--ifd-wash);
  border:1px solid var(--ifd-line);display:grid;place-items:center;overflow:hidden}
.ifd-pthumb svg{width:70px;height:52px}
.ifd-pinfo{min-width:0;flex:1}
.ifd-pname{font-size:.82rem;font-weight:700;line-height:1.28;color:var(--ifd-ink)}
.ifd-psku{font-family:var(--ifd-mono);font-size:.68rem;color:#9aa0a8;margin:3px 0 6px}
.ifd-pprice{font-size:.8rem;color:var(--ifd-muted)}
.ifd-pprice b{color:var(--ifd-ink);font-weight:700;font-family:var(--ifd-mono);font-size:.86rem}
.ifd-pstock{font-size:.8rem;color:var(--ifd-muted);margin-top:2px;display:flex;align-items:center;gap:0}
.ifd-pstock b{color:var(--ifd-ink);font-weight:700;font-family:var(--ifd-mono);font-size:.86rem;margin-left:4px;display:inline-block}
.ifd-big .k{font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:#9aa0a8;font-weight:700}
.ifd-big .v{font-family:var(--ifd-mono);font-weight:700;font-size:1.9rem;letter-spacing:-.02em;margin-top:4px;display:inline-block}
.ifd-big .sub{font-size:.72rem;color:var(--ifd-muted);margin-top:2px}

.ifd-tbl{width:100%;border-collapse:collapse;font-size:.8rem}
.ifd-tbl th{text-align:left;padding:9px 14px;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:#9aa0a8;font-weight:700;border-bottom:1px solid var(--ifd-line);background:#fff;position:sticky;top:0}
.ifd-tbl td{padding:11px 14px;border-bottom:1px solid #f2f2f5;color:var(--ifd-ink)}
.ifd-tbl tr:last-child td{border-bottom:0}
.ifd-tbl .m{font-family:var(--ifd-mono);font-size:.74rem}
.ifd-tbl .num{text-align:right;font-family:var(--ifd-mono);font-weight:700;font-size:.92rem}
.ifd-tbl tr{transition:background .35s}
.ifd-tbl tr.hot td{background:rgba(253,111,99,.07)}
.ifd-tbl tr.hot td:first-child{box-shadow:inset 3px 0 0 var(--ifd-hot)}
.ifd-tbl tr.paid td{color:#0E7C3E}
.ifd-tbl tr.paid td:first-child{box-shadow:inset 3px 0 0 var(--ifd-ok)}
.ifd-roll{animation:ifd-roll .48s cubic-bezier(.22,1,.36,1)}
@keyframes ifd-roll{0%{transform:translateY(0);opacity:1}40%{transform:translateY(-13px);opacity:0}
  60%{transform:translateY(13px);opacity:0}100%{transform:translateY(0);opacity:1}}
.ifd-num-hot{color:var(--ifd-hot)!important}
.ifd-chip{display:inline-block;font-family:var(--ifd-mono);font-size:.65rem;padding:2px 7px;border-radius:5px;
  background:rgba(253,111,99,.11);color:#c74a3f;margin-left:7px;animation:ifd-pop .3s}

/* tabla de amortización con scroll */
.ifd-sched{max-height:186px;overflow-y:auto;overflow-x:auto}
.ifd-sched::-webkit-scrollbar{width:6px}
.ifd-sched::-webkit-scrollbar-thumb{background:#dcdce3;border-radius:6px}
.ifd-sched tr{animation:ifd-pop .26s}
.ifd-sched .ifd-tbl td{padding:9px 12px;font-size:.76rem}
.ifd-sched .ifd-tbl th{padding:8px 12px}
.ifd-sched-empty{padding:26px 14px;text-align:center;color:#b6bcc4;font-size:.76rem;font-family:var(--ifd-mono)}

/* bitácora / asientos / eventos */
.ifd-log{margin-top:14px;border:1px solid var(--ifd-line);border-radius:14px;overflow:hidden}
.ifd-log-h{padding:9px 14px;background:var(--ifd-wash);border-bottom:1px solid var(--ifd-line);
  font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:#9aa0a8;font-weight:700}
.ifd-log-b{padding:6px 0;min-height:104px;max-height:104px;overflow-y:auto}
.ifd-log-b::-webkit-scrollbar{width:6px}
.ifd-log-b::-webkit-scrollbar-thumb{background:#dcdce3;border-radius:6px}
.ifd-log-b .row{display:flex;gap:9px;padding:5px 14px;font-family:var(--ifd-mono);font-size:.69rem;
  color:var(--ifd-muted);animation:ifd-pop .3s;align-items:baseline}
.ifd-log-b .row b{color:var(--ifd-ink);font-weight:500}
.ifd-log-b .row .ok{color:var(--ifd-ok)}
.ifd-log-b .row .dr{color:#0E7C3E;font-weight:700}
.ifd-log-b .row .cr{color:#c74a3f;font-weight:700}
.ifd-log-b .row .amt{margin-left:auto;color:var(--ifd-ink);font-weight:700}
.ifd-log-empty{padding:14px;color:#b6bcc4;font-size:.74rem;font-family:var(--ifd-mono)}

/* embudo de campaña con barras */
.ifd-funnel{padding:6px 14px 12px}
.ifd-fn{position:relative;display:flex;align-items:baseline;justify-content:space-between;
  padding:11px 0 8px;border-bottom:1px solid #f2f2f5}
.ifd-fn:last-child{border-bottom:0}
.ifd-fn .fl{font-size:.8rem;color:var(--ifd-muted)}
.ifd-fn .fnum{font-family:var(--ifd-mono);font-weight:700;font-size:1rem;color:var(--ifd-ink)}
.ifd-fn .fbar{position:absolute;left:0;bottom:0;height:2px;width:0;background:#c9ccd6;transition:width .6s cubic-bezier(.22,1,.36,1)}
.ifd-fn .fbar.pay{background:var(--ifd-ok)}
.ifd-fn.hotfn .fnum{color:var(--ifd-ok)}
.ifd-fn.hot .fnum{color:var(--ifd-hot)}
.ifd-fn.hot{background:rgba(253,111,99,.05)}
/* bandeja de respuestas */
.ifd-inbox{padding:4px 0}
.ifd-ib{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid #f4f4f7;animation:ifd-pop .34s}
.ifd-ib:last-child{border-bottom:0}
.ifd-ib .av{width:26px;height:26px;border-radius:50%;background:#EDEBFB;color:#6D3BEE;font-size:.62rem;
  font-weight:800;display:grid;place-items:center;flex-shrink:0;font-family:var(--ifd-ff)}
.ifd-ib .tx{font-size:.76rem;color:var(--ifd-muted);line-height:1.35;flex:1;min-width:0}
.ifd-ib .tx b{display:block;color:var(--ifd-ink);font-size:.78rem;font-weight:600}
.ifd-ib .ibdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ifd-ib .ibdot.ok{background:var(--ifd-ok)}
.ifd-ib .ibdot.pay{background:#635BFF}
.ifd-ib .ibdot.ask{background:#E8B85C}

.ifd-toast{position:absolute;right:22px;bottom:22px;display:flex;align-items:center;gap:11px;
  background:var(--ifd-ink);color:#fff;border-radius:12px;padding:13px 16px;max-width:300px;
  box-shadow:0 16px 40px -12px rgba(44,46,60,.5);opacity:0;transform:translateY(14px);
  transition:opacity .35s,transform .35s;pointer-events:none;z-index:5}
.ifd-toast.on{opacity:1;transform:none}
.ifd-toast .ic{width:30px;height:30px;border-radius:8px;background:var(--ifd-ok);display:grid;place-items:center;flex-shrink:0}
.ifd-toast .ic svg{width:15px;height:15px}
.ifd-toast b{display:block;font-size:.8rem;font-weight:700}
.ifd-toast span{font-size:.72rem;color:#b8bac6}

.ifd-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--ifd-hot);
  box-shadow:0 0 0 5px rgba(253,111,99,.18);opacity:0;z-index:6;pointer-events:none}

.ifd-rail{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ifd-line);background:var(--ifd-wash)}
.ifd-rail .st{padding:15px 16px;border-right:1px solid var(--ifd-line);position:relative;opacity:.42;transition:opacity .3s}
.ifd-rail .st:last-child{border-right:0}
.ifd-rail .st::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--ifd-accent);transition:width .5s ease}
.ifd-rail .st.on{opacity:1}
.ifd-rail .st.on::before{width:100%}
.ifd-rail .n{font-family:var(--ifd-mono);font-size:.65rem;font-weight:700;color:var(--ifd-accent);display:block;margin-bottom:3px}
.ifd-rail .t{font-size:.74rem;font-weight:600;line-height:1.3}
@media(max-width:900px){.ifd-rail{grid-template-columns:repeat(2,1fr)}.ifd-rail .st{border-bottom:1px solid var(--ifd-line)}}

.ifd-access{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;margin-top:22px;align-items:center;
  border:1px solid var(--ifd-line);border-radius:var(--ifd-r);padding:24px 26px}
.ifd-access h4{margin:0 0 5px;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.ifd-access p{margin:0;color:var(--ifd-muted);font-size:.88rem}
.ifd-access-btns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.ifd-btn{display:inline-flex;align-items:center;gap:8px;border-radius:50px;padding:12px 26px;
  font-family:var(--ifd-ff);font-size:.875rem;font-weight:600;cursor:pointer;text-decoration:none;
  border:1px solid transparent;transition:transform .18s}
.ifd-btn:hover{transform:translateY(-1px)}
.ifd-btn-dark{background:var(--ifd-ink);color:#fff}
.ifd-btn-out{background:transparent;border-color:var(--ifd-line);color:var(--ifd-ink)}
@media(max-width:760px){
  .ifd-access{grid-template-columns:1fr}.ifd-access-btns{justify-content:flex-start}
  .ifd{padding:64px 0 72px}
  .ifd-side{padding:16px}
  .ifd-cred{flex-wrap:wrap}
  .ifd-cred-actions{width:100%;justify-content:flex-end;margin-top:8px}
}
@media(max-width:400px){
  .ifd-tab{padding:9px 14px;font-size:.8rem}
  .ifd-dh,.ifd-db{padding:18px}
}

/* drawer */
.ifd-ov{position:fixed;inset:0;z-index:9998;background:rgba(44,46,60,.45);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.ifd-ov.on{opacity:1;visibility:visible}
.ifd-drawer{position:fixed;top:0;right:0;bottom:0;z-index:9999;width:min(520px,100vw);background:#fff;
  transform:translateX(101%);transition:transform .38s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;
  font-family:'Manrope',sans-serif;box-shadow:-24px 0 70px rgba(44,46,60,.22)}
.ifd-drawer.on{transform:none}
.ifd-dh{padding:26px;border-bottom:1px solid #E8E8ED;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.ifd-dh .k{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:#FD6F63}
.ifd-dh h3{margin:7px 0 0;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:#2C2E3C}
.ifd-x{width:38px;height:38px;border-radius:50%;border:1px solid #E8E8ED;background:#fff;cursor:pointer;color:#797A85;flex-shrink:0}
.ifd-db{padding:26px;overflow-y:auto;flex:1}
.ifd-lbl{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:#9aa0a8;font-weight:700;display:flex;align-items:center;gap:11px;margin:0 0 15px}
.ifd-lbl::after{content:"";flex:1;height:1px;background:#E8E8ED}
.ifd-cred{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #E8E8ED;
  border-radius:12px;padding:11px 12px 11px 15px;margin-bottom:9px;background:#FCFCFD}
.ifd-cred .k{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:#9aa0a8;font-weight:700}
.ifd-cred .v{font-family:'JetBrains Mono',monospace;font-size:.86rem;color:#2C2E3C;word-break:break-all;margin-top:2px}
.ifd-copy{border:1px solid #E8E8ED;background:#fff;color:#2C2E3C;font-family:'JetBrains Mono',monospace;
  font-size:.68rem;padding:8px 12px;border-radius:50px;cursor:pointer;flex-shrink:0;white-space:nowrap;transition:all .16s}
.ifd-copy:hover{border-color:#FD6F63;color:#FD6F63}
.ifd-copy.ok{background:#12A150;color:#fff;border-color:#12A150}
.ifd-cred-actions{display:flex;gap:6px;flex-shrink:0}
.ifd-wa{display:inline-flex;align-items:center;border:1px solid #25D366;background:#25D366;color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;padding:8px 12px;border-radius:50px;
  cursor:pointer;white-space:nowrap;text-decoration:none;transition:opacity .16s}
.ifd-wa:hover{opacity:.85}
.ifd-steps{list-style:none;margin:0;padding:0}
.ifd-steps li{position:relative;padding:0 0 20px 40px}
.ifd-steps li::before{content:attr(data-n);position:absolute;left:0;top:0;width:27px;height:27px;border-radius:50%;
  border:1px solid #E8E8ED;background:#fff;color:#FD6F63;font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:.72rem;display:grid;place-items:center}
.ifd-steps li::after{content:"";position:absolute;left:13px;top:31px;bottom:2px;width:1px;background:#E8E8ED}
.ifd-steps li:last-child{padding-bottom:0}.ifd-steps li:last-child::after{display:none}
.ifd-steps h5{margin:3px 0 3px;font-size:.9rem;font-weight:700;color:#2C2E3C}
.ifd-steps p{margin:0;font-size:.83rem;color:#797A85;line-height:1.5}
.ifd-steps code{font-family:'JetBrains Mono',monospace;font-size:.78rem;background:rgba(253,111,99,.09);color:#c74a3f;padding:1px 6px;border-radius:4px}
.ifd-dopen{display:block;text-align:center;background:#2C2E3C;color:#fff;border-radius:50px;padding:14px;
  font-weight:600;font-size:.9rem;text-decoration:none;margin-top:8px}
.ifd-note{text-align:center;font-size:.74rem;color:#b6bcc4;margin-top:12px}

.ifd-rv{opacity:0;transform:translateY(20px);transition:opacity .65s,transform .65s}
.ifd-rv.in{opacity:1;transform:none}

/* ---------- llamada de atención: "esto se puede tocar" ----------
   Degradado NexIA (violeta #8B5CF6 → cian #22D3EE) — confirmado por Alan,
   no se usa coral aquí para no mezclarlo con la semántica "algo cambió". */
.ifd-head.in h2 b{animation:ifd-gold-flash 5s ease-in-out .6s infinite}
@keyframes ifd-gold-flash{
  0%,58%,100%{color:#2C2E3C;text-shadow:none}
  15%,38%{color:#D4AF37;text-shadow:0 0 16px rgba(212,175,55,.5)}
}

.ifd-touch{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  padding:10px 18px 10px 14px;border-radius:50px;position:relative;max-width:fit-content;
  color:#5B21B6;font-family:var(--ifd-ff);font-size:.84rem;font-weight:700;
  background-image:linear-gradient(#fff,#fff),linear-gradient(90deg,#8B5CF6,#22D3EE);
  background-origin:border-box;background-clip:padding-box,border-box;
  border:1.5px solid transparent}
.ifd-touch .cur{width:16px;height:16px;flex-shrink:0}
.ifd-touch::before{content:"";position:absolute;inset:-3px;border-radius:50px;z-index:-1;
  background:linear-gradient(90deg,#8B5CF6,#22D3EE);opacity:.35;filter:blur(7px);
  animation:ifd-touch-pulse 2.2s ease-in-out infinite}
@keyframes ifd-touch-pulse{0%,100%{opacity:.28;transform:scale(1)}50%{opacity:.55;transform:scale(1.05)}}
@media(max-width:480px){.ifd-touch{font-size:.78rem}}

@media(prefers-reduced-motion:reduce){
  .ifd *,.ifd *::before,.ifd *::after{animation:none!important;transition:none!important}
  .ifd-rv{opacity:1;transform:none}
  .ifd-dot{display:none}
  .ifd-crow,.ifd-grp,.ifd-wapv{opacity:1}
}