/* =====================================================================
   FICHA DE SISTEMA — modal que se abre al tocar una tarjeta de producto
   (o "Conocer X" en el selector de rubros). Mismo lenguaje que la sección
   de productos: negro + naranja Dycam, Poppins/Inter, vidrio y brillo.
   Lógica en assets/ficha.js · contenido en data/fichas.json (+ /admin).
   ===================================================================== */

.fi-modal{position:fixed;inset:0;z-index:65;color:#fff;font-family:Inter,system-ui,sans-serif}
.fi-modal[hidden]{display:none}
.fi-backdrop{position:absolute;inset:0;background:rgba(5,6,9,.74)}
.fi-panel{position:absolute;inset:12px;border-radius:28px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(255,150,69,.26), transparent 60%),
    radial-gradient(700px 420px at -8% 38%, rgba(255,150,69,.08), transparent 62%),
    linear-gradient(165deg,#0a0b0f 0%,#12141a 48%,#1a1209 100%);
  box-shadow:0 50px 140px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07)}
@media (max-width:640px){ .fi-panel{inset:0;border-radius:0} }
.fi-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.fi-scroll::-webkit-scrollbar{width:10px}
.fi-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
.fi-scroll::-webkit-scrollbar-track{background:transparent}
.fi-wrap{max-width:1240px;margin:0 auto}

/* ---------- barra superior ---------- */
.fi-top{position:sticky;top:0;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px clamp(16px,3vw,28px);transition:background .3s ease, box-shadow .3s ease}
.fi-top.solid{background:#0c0d11;box-shadow:0 1px 0 rgba(255,255,255,.07), 0 18px 30px -18px rgba(0,0,0,.9)}
.fi-top-id{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(-6px);transition:opacity .3s ease, transform .3s ease;min-width:0}
.fi-top.solid .fi-top-id{opacity:1;transform:none}
.fi-top-id b{font-family:Poppins,Inter,sans-serif;font-weight:800;letter-spacing:-.01em;font-size:17px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fi-top-id span{font-size:13px;color:#ffb16c;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-top-id .em{font-size:20px;flex:none}
.fi-top-id span:not(.em){flex:0 1000 auto;min-width:0}
.fi-top-btns{display:flex;align-items:center;gap:8px;margin-left:auto}
.fi-ib{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:background .2s, border-color .2s, transform .2s}
.fi-ib:hover{background:rgba(255,150,69,.16);border-color:rgba(255,150,69,.6);transform:translateY(-1px)}
.fi-ib svg{width:18px;height:18px}
.fi-ib.close{background:#fff;color:#0a0b0f;border-color:#fff}
.fi-ib.close:hover{background:#ff9645;border-color:#ff9645;color:#fff;transform:rotate(90deg)}
.fi-ib:focus-visible,.fi-btn:focus-visible,.fi-tab:focus-visible,.fi-sw:focus-visible{outline:2px solid #ff9645;outline-offset:3px}

/* ---------- hero ---------- */
.fi-hero{position:relative;padding:8px clamp(20px,5vw,64px) 72px;overflow:hidden}
/* El halo de la portada se sale por la derecha: se recorta para que la ficha no pueda correrse de costado en el celular. */
@supports (overflow:clip){.fi-hero{overflow:visible;overflow-x:clip}}
.fi-hero-in{position:relative;display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;min-height:min(70vh,680px)}
.fi-grid{position:absolute;inset:-80px 0 0 0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 72% 40%,#000 15%,transparent 72%);
          mask-image:radial-gradient(ellipse 60% 70% at 72% 40%,#000 15%,transparent 72%)}
.fi-orb{position:absolute;width:640px;height:640px;right:-120px;top:-160px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,150,69,.30),rgba(255,150,69,.08) 40%,transparent 66%);animation:fiOrb 16s ease-in-out infinite alternate}
@keyframes fiOrb{to{transform:translate(-90px,70px) scale(1.12)}}
.fi-eyebrow{display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:1px solid rgba(255,150,69,.38);
  background:rgba(255,150,69,.1);padding:7px 14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffb16c}
.fi-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#ff9645;box-shadow:0 0 0 0 rgba(255,150,69,.7);animation:fiPing 2s infinite}
@keyframes fiPing{70%{box-shadow:0 0 0 9px rgba(255,150,69,0)}100%{box-shadow:0 0 0 0 rgba(255,150,69,0)}}
.fi-name{margin-top:18px;font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:var(--fs,clamp(46px,7.2vw,104px));line-height:.92;letter-spacing:-.035em;
  background:linear-gradient(100deg,#fff 0%,#ffe6cf 26%,#ff9645 50%,#ffe6cf 74%,#fff 100%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fiWipe 1s cubic-bezier(.2,.9,.2,1) .15s both, fiSheen 7s ease-in-out 1.2s infinite alternate;overflow-wrap:break-word}
@keyframes fiWipe{from{clip-path:inset(0 100% 0 0);transform:translateX(-14px);opacity:.3}to{clip-path:inset(0 0 0 0);transform:none;opacity:1}}
@keyframes fiSheen{from{background-position:100% 0}to{background-position:0 0}}
.fi-tag{margin-top:20px;font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:clamp(19px,2vw,26px);line-height:1.3;color:#fff;max-width:30ch}
.fi-intro{margin-top:14px;color:#aab3c2;font-size:16px;line-height:1.75;max-width:60ch}
.fi-badges{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.fi-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  padding:6px 12px;font-size:12px;font-weight:600;color:#e3e7ee}
.fi-chip.free{border-color:rgba(25,185,122,.45);background:rgba(25,185,122,.13);color:#4fe3a8}
.fi-chip.new{border-color:#ff9645;background:#ff9645;color:#fff}
.fi-ctas{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.fi-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:14px 24px;font-weight:700;font-size:15px;line-height:1;
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background .2s, border-color .2s, color .2s;white-space:nowrap;cursor:pointer}
.fi-btn svg{width:18px;height:18px;flex:none}
.fi-btn-pri{background:#ff9645;color:#fff;box-shadow:0 18px 40px -14px rgba(255,150,69,.95)}
.fi-btn-pri:hover{background:#e2730f;transform:translateY(-2px);box-shadow:0 24px 48px -14px rgba(255,150,69,1)}
.fi-btn-sec{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:#fff}
.fi-btn-sec:hover{border-color:#ff9645;background:rgba(255,150,69,.1);transform:translateY(-2px)}
.fi-btn-wa{background:#22c55e;color:#fff;box-shadow:0 16px 36px -16px rgba(34,197,94,.9)}
.fi-btn-wa:hover{background:#16a34a;transform:translateY(-2px)}
.fi-btn-sm{padding:10px 16px;font-size:13px}
.fi-dl{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.fi-dl a{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#dfe3ea;border-radius:12px;padding:8px 12px;
  border:1px dashed rgba(255,255,255,.2);transition:border-color .2s,color .2s}
.fi-dl a:hover{border-color:#ff9645;color:#ffb16c}
.fi-dl a svg{width:16px;height:16px;flex:none}
.fi-from{margin-top:18px;font-size:14px;color:#9aa3b2}
.fi-from b{font-family:Poppins,Inter,sans-serif;font-size:20px;color:#fff}

/* escenario del dispositivo (tilt 3D con el mouse) */
.fi-stage{position:relative;perspective:1600px;display:grid;place-items:center;min-height:420px;padding:30px 0}
.fi-stage::after{content:"";position:absolute;left:12%;right:12%;bottom:2%;height:60px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,150,69,.45),transparent 70%)}
.fi-device{position:relative;width:min(640px,100%);transform-style:preserve-3d;
  transform:rotateY(var(--ry,-13deg)) rotateX(var(--rx,5deg));transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform;
  animation:fiRise 1s cubic-bezier(.2,.9,.2,1) .25s backwards}
@keyframes fiRise{from{opacity:0;transform:translateY(40px) rotateY(-28deg) rotateX(12deg) scale(.94)}}
.fi-screen{position:relative;overflow:hidden;background:#fff;aspect-ratio:16/10}
.fi-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 34%)}
.fi-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:scale(1.001);
  transition:opacity 1s ease, transform 7s ease-out}
.fi-slide.on{opacity:1;transform:scale(1.045)}
.fi-mock{transform:scale(.74);transform-origin:top left;width:135.2%;padding:20px;color:#1d2129}
.fi-monitor .bezel{background:#0b0c10;border-radius:18px;padding:11px 11px 13px;border:1px solid rgba(255,255,255,.13);
  box-shadow:0 60px 110px -34px rgba(0,0,0,.95), inset 0 0 0 1px rgba(0,0,0,.6)}
.fi-monitor .fi-screen{border-radius:7px}
.fi-monitor .neck{width:17%;height:54px;margin:0 auto;background:linear-gradient(#1c1e25,#0c0d11);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.fi-monitor .base{width:40%;height:10px;margin:0 auto;border-radius:6px 6px 12px 12px;background:linear-gradient(#262a33,#0c0d11);box-shadow:0 10px 30px -6px rgba(0,0,0,.8)}
.fi-browser{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 60px 110px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.1)}
.fi-browser .bar{height:38px;background:#eef0f4;display:flex;align-items:center;gap:7px;padding:0 14px}
.fi-browser .bar i{width:11px;height:11px;border-radius:50%;background:#d6d9e0}
.fi-browser .bar i:nth-child(1){background:#ff6b5f}.fi-browser .bar i:nth-child(2){background:#ffbd2e}.fi-browser .bar i:nth-child(3){background:#28c840}
.fi-browser .url{flex:1;margin-left:10px;height:24px;border-radius:999px;background:#fff;font-size:11px;color:#6b7280;display:flex;align-items:center;gap:6px;padding:0 12px;max-width:340px}
.fi-browser .url svg{width:11px;height:11px;color:#19b97a}
.fi-photo{border-radius:28px;overflow:hidden;box-shadow:0 60px 110px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.1)}
.fi-photo .fi-screen{aspect-ratio:4/3}
.fi-photo .fi-screen::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(200deg,rgba(255,150,69,.0) 40%,rgba(255,150,69,.35))}
/* navegador + celular: el contenedor lleva el 3D y el navegador va adentro */
.fi-bp .fi-phone{right:-5%;bottom:-16%;width:29%}
/* width:0 + min-width:100%: ocupa todo el contenedor sin ensancharlo con su contenido (en celular desbordaba) */
.fi-bp .fi-browser{width:0;min-width:100%}
.fi-phone{position:absolute;right:-7%;bottom:-12%;width:31%;transform:translateZ(90px) rotate(5deg);filter:drop-shadow(0 30px 34px rgba(0,0,0,.7))}
.fi-phone .ph-in{position:relative;aspect-ratio:397/768}
.fi-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .8s ease}
.fi-phone img.on{opacity:1}
.fi-phone img.fi-slide,.fi-phone img.fi-slide.on{transform:none;object-fit:contain;object-position:center}
.fi-float{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;padding:10px 14px 10px 10px;border-radius:14px;white-space:nowrap;
  background:rgba(17,19,25,.94);border:1px solid rgba(255,255,255,.13);box-shadow:0 22px 44px -14px rgba(0,0,0,.8);
  font-size:13px;font-weight:600;color:#fff;opacity:0;animation:fiPop .7s cubic-bezier(.3,1.4,.4,1) forwards, fiFloat 6s ease-in-out infinite}
.fi-float i{flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:#19b97a;color:#fff}
.fi-float i svg{width:14px;height:14px}
.fi-float.f1{left:-6%;top:12%;animation-delay:.9s,1.6s}
.fi-float.f2{right:-4%;top:42%;animation-delay:1.1s,2.4s}
.fi-float.f2 i{background:#ff9645}
.fi-float.f3{left:6%;bottom:6%;animation-delay:1.3s,3.1s}
.fi-float.f3 i{background:#6b8afd}
@keyframes fiPop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes fiFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* ---------- marquee de destacados ---------- */
.fi-marquee{position:relative;overflow:hidden;padding:20px 0;border-block:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fi-marquee .track{display:flex;width:max-content;animation:scrollx 46s linear infinite}
.fi-marquee:hover .track{animation-play-state:paused}
.fi-mq{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:clamp(16px,1.6vw,21px);color:#e9ecf2;white-space:nowrap}
.fi-mq::after{content:"✦";color:#ff9645;font-size:.8em}

/* ---------- secciones ---------- */
.fi-sec{position:relative;padding:clamp(56px,7vw,92px) clamp(20px,5vw,64px)}
.fi-kicker{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#ffb16c}
.fi-h{margin-top:10px;font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.025em;color:#fff;max-width:22ch}
.fi-h em{font-style:normal;background:linear-gradient(100deg,#ffb16c,#ff9645);-webkit-background-clip:text;background-clip:text;color:transparent}
.fi-sub{margin-top:14px;color:#98a1b1;font-size:17px;line-height:1.65;max-width:62ch}
.fi-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.fi-quote{padding:clamp(48px,7vw,88px) clamp(20px,5vw,64px) 0;text-align:center}
.fi-quote p{font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:clamp(30px,4.6vw,64px);line-height:1.05;letter-spacing:-.03em;
  background:linear-gradient(100deg,#fff,#ffb16c 60%,#ff9645);-webkit-background-clip:text;background-clip:text;color:transparent}
.fi-quote span{display:block;margin-top:14px;color:#98a1b1;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}

/* reveal al scrollear dentro del modal */
.fi-rv{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.fi-rv.in{opacity:1;transform:none}

/* ---------- antes / después ---------- */
.fi-switch{position:relative;display:inline-flex;padding:5px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.fi-sw{position:relative;z-index:1;padding:11px 18px;border-radius:999px;font-weight:700;font-size:14px;color:#9aa3b2;transition:color .35s;white-space:nowrap}
.fi-sw.on{color:#fff}
.fi-knob{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:#3a3f4b;transition:left .5s cubic-bezier(.3,1.3,.4,1), width .5s cubic-bezier(.3,1.3,.4,1), background .4s, box-shadow .4s}
.fi-switch.con .fi-knob{background:#ff9645;box-shadow:0 10px 24px -8px rgba(255,150,69,.9)}
.fi-flips{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fi-flips.n2{grid-template-columns:repeat(2,1fr)}
.fi-flips.n1{grid-template-columns:1fr;max-width:560px}
.fi-flip{perspective:1300px}
.fi-flip-in{display:grid;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,1.15,.4,1)}
.fi-flip:nth-child(2) .fi-flip-in{transition-delay:.12s}
.fi-flip:nth-child(3) .fi-flip-in{transition-delay:.24s}
.fi-flips.con .fi-flip-in{transform:rotateY(180deg)}
.fi-face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:26px;padding:28px;min-height:230px;display:flex;flex-direction:column;gap:18px}
.fi-face.antes{background:linear-gradient(165deg,#17191f,#0f1014);border:1px solid rgba(255,255,255,.08)}
/* Safari (iPhone, iPad, Mac) no oculta la cara de atrás con backface-visibility y mostraba el "después" en espejo:
   además se apaga la cara que no toca, a mitad del giro (también con el retraso de la 2ª y la 3ª tarjeta). */
.fi-face{transition:visibility 0s linear .3s}
.fi-flip:nth-child(2) .fi-face{transition-delay:.42s}
.fi-flip:nth-child(3) .fi-face{transition-delay:.54s}
.fi-face.despues,.fi-flips.con .fi-face.antes{visibility:hidden}
.fi-flips.con .fi-face.despues{visibility:visible}
.fi-face.despues{transform:rotateY(180deg);background:radial-gradient(420px 220px at 100% 0%,rgba(255,150,69,.30),transparent 62%),linear-gradient(165deg,#1d150d,#120e0a);
  border:1px solid rgba(255,150,69,.5);box-shadow:0 30px 70px -36px rgba(255,150,69,.75)}
.fi-face .lbl{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8b93a3}
.fi-face.despues .lbl{color:#ffb16c}
.fi-face .lbl i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(226,96,110,.16);color:#f07f8b}
.fi-face.despues .lbl i{background:#ff9645;color:#fff}
.fi-face .lbl i svg{width:16px;height:16px}
.fi-face p{font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:clamp(18px,1.7vw,21px);line-height:1.38;color:#cfd5df}
.fi-face.antes p{color:#9aa3b2}
.fi-face.antes p.corto{text-decoration:line-through;text-decoration-color:rgba(226,96,110,.55);text-decoration-thickness:2px}
.fi-face.despues p{color:#fff}
/* tareas con título y tiempos (p. ej. el Debe / Haber de ContaIAGest) */
.fi-flips.n4{grid-template-columns:repeat(2,1fr)}
.fi-flips.tit .fi-face{min-height:320px}
.fi-flips.tit .fi-face p{font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:clamp(15px,1.25vw,17px);line-height:1.6}
.fi-face .cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fi-face .cab .nro{font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:13px;letter-spacing:.08em;color:#8b93a3}
.fi-face.despues .cab .nro{color:#ffb16c}
.fi-face .cab h4{font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:clamp(17px,1.5vw,20px);line-height:1.25;color:#fff}
.fi-face .cab .nota{border-radius:999px;padding:4px 10px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#ffb16c;background:rgba(255,150,69,.14);box-shadow:inset 0 0 0 1px rgba(255,150,69,.4)}
.fi-face .t{margin-top:auto;display:flex;align-items:center;gap:12px}
.fi-face .t svg{width:22px;height:22px;color:#f07f8b}
.fi-face.antes .t b{font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:30px;letter-spacing:-.02em;color:#f07f8b}
.fi-face.despues .t span{font-size:16px;font-weight:600;color:#8b93a3;text-decoration:line-through;text-decoration-color:rgba(240,127,139,.7)}
.fi-face.despues .t b{font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:clamp(36px,3.4vw,48px);line-height:1;letter-spacing:-.03em;background:linear-gradient(100deg,#ffe0c4,#ff9645);-webkit-background-clip:text;background-clip:text;color:transparent}
.fi-rnota{margin-top:24px;color:#98a1b1;font-size:15px;font-style:italic}

/* ---------- módulos (pestañas + pantalla) ---------- */
.fi-mods{margin-top:44px;display:grid;grid-template-columns:290px 1fr;gap:28px;align-items:start}
.fi-tabs{display:flex;flex-direction:column;gap:6px;position:sticky;top:84px}
.fi-tab{position:relative;display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;text-align:left;color:#9aa3b2;font-weight:600;font-size:15px;
  transition:background .25s,color .25s,box-shadow .25s;overflow:hidden}
.fi-tab:hover{background:rgba(255,255,255,.05);color:#fff}
.fi-tab.on{background:rgba(255,150,69,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,150,69,.4)}
.fi-tab .ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:#ffb16c;transition:background .25s,color .25s,transform .35s cubic-bezier(.3,1.4,.4,1)}
.fi-tab .ic svg{width:19px;height:19px}
.fi-tab.on .ic{background:#ff9645;color:#fff;transform:rotate(-6deg) scale(1.06)}
.fi-tab .bar{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;opacity:0;transition:opacity .2s}
.fi-tab.on .bar{opacity:1}
.fi-tab .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb16c,#ff9645)}
.fi-tab.on.run .bar i{animation:fiBar var(--dur,7000ms) linear forwards}
.fi-tab.on.paused .bar i{animation-play-state:paused}
@keyframes fiBar{to{width:100%}}
.fi-pane{position:relative;border-radius:30px;padding:clamp(18px,2.4vw,30px);min-height:470px;
  background:linear-gradient(165deg,rgba(255,255,255,.065),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1)}
.fi-pane-in{animation:fiPaneIn .55s cubic-bezier(.2,.8,.2,1)}
@keyframes fiPaneIn{from{opacity:0;transform:translateY(16px)}}
.fi-pane-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:center}
.fi-pane-grid.solo{grid-template-columns:1fr 1fr}
.fi-win{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 34px 70px -30px rgba(0,0,0,.85);cursor:zoom-in;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fi-win:hover{transform:translateY(-4px) scale(1.01)}
.fi-win .wb{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#ff9645}
.fi-win .wb i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55)}
.fi-win .wb span{margin-left:8px;font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-win .wi{position:relative;background:#eef0f3;aspect-ratio:16/11}
.fi-win img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .45s ease}
/* captura vertical (de celular): entera, sin la barra de ventana */
.fi-win.vert{background:none;box-shadow:none;border-radius:0;overflow:visible;width:min(270px,70%);margin:0 auto;filter:drop-shadow(0 34px 44px rgba(0,0,0,.7))}
.fi-win.vert .wb{display:none}
.fi-win.vert .wi{background:none;aspect-ratio:auto}
.fi-win.vert img{position:static;display:block;height:auto}
.fi-win .zoom{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(10,11,15,.7);color:#fff;opacity:0;transition:opacity .25s}
.fi-win:hover .zoom{opacity:1}
.fi-win .zoom svg{width:16px;height:16px}
.fi-thumbs{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.fi-thumb{width:78px;height:52px;border-radius:10px;overflow:hidden;border:2px solid transparent;opacity:.55;transition:opacity .2s,border-color .2s,transform .2s;background:#eef0f3}
.fi-thumb img{width:100%;height:100%;object-fit:cover;object-position:top left}
.fi-thumb:hover{opacity:.9;transform:translateY(-2px)}
.fi-thumb.on{opacity:1;border-color:#ff9645}
.fi-mt{font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:clamp(24px,2.3vw,32px);letter-spacing:-.02em}
.fi-mx{margin-top:10px;color:#aab3c2;line-height:1.7}
.fi-checks{margin-top:20px;display:grid;gap:12px}
.fi-checks.two{grid-template-columns:1fr 1fr}
.fi-check{display:flex;gap:11px;align-items:flex-start;color:#e3e7ee;font-size:15px;line-height:1.45}
.fi-check i{flex:none;margin-top:1px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,150,69,.16);color:#ff9645}
.fi-check i svg{width:13px;height:13px}
.fi-pane-in .fi-check{animation:fiPaneIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0) * 60ms + 120ms)}
/* módulo sin capturas: ícono gigante con anillos y chips orbitando */
.fi-art{position:relative;display:grid;place-items:center;aspect-ratio:16/12;border-radius:22px;overflow:hidden;
  background:radial-gradient(circle at 50% 46%,rgba(255,150,69,.28),transparent 58%),#0e0f14;border:1px solid rgba(255,255,255,.08)}
.fi-art .ring{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:1px solid rgba(255,150,69,.45);animation:fiRing 3.6s ease-out infinite}
.fi-art .ring:nth-child(2){animation-delay:1.2s}.fi-art .ring:nth-child(3){animation-delay:2.4s}
@keyframes fiRing{from{transform:scale(.6);opacity:1}to{transform:scale(2.4);opacity:0}}
.fi-art .core{position:relative;z-index:1;width:112px;height:112px;border-radius:32px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,#ffb16c,#ff9645 55%,#e2730f);box-shadow:0 26px 60px -12px rgba(255,150,69,.85);animation:fiBob 5s ease-in-out infinite}
.fi-art .core svg{width:54px;height:54px}
@keyframes fiBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.fi-art .cap{position:absolute;left:0;right:0;bottom:8%;z-index:2;text-align:center;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#ffb16c}
.fi-art .cnt{position:absolute;top:8%;right:7%;z-index:2;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;color:#fff;background:rgba(255,150,69,.18);border:1px solid rgba(255,150,69,.45)}

/* ---------- app móvil (abanico de celulares) ---------- */
.fi-movil{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:center}
.fi-phones{position:relative;height:540px;perspective:1400px}
.fi-ph{position:absolute;left:50%;top:50%;width:min(230px,42%);cursor:pointer;transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .7s, filter .7s;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.7));transform:translate(-50%,-50%) scale(.6);opacity:0}
.fi-ph img{width:100%;height:auto;display:block}
.fi-ph.c{transform:translate(-50%,-50%) translateZ(70px);opacity:1;z-index:3;cursor:default}
.fi-ph.l{transform:translate(-118%,-47%) rotateY(22deg) rotateZ(-7deg) scale(.8);opacity:.7;z-index:2;filter:drop-shadow(0 30px 40px rgba(0,0,0,.7)) brightness(.7)}
.fi-ph.r{transform:translate(18%,-47%) rotateY(-22deg) rotateZ(7deg) scale(.8);opacity:.7;z-index:2;filter:drop-shadow(0 30px 40px rgba(0,0,0,.7)) brightness(.7)}
.fi-ph.l:hover,.fi-ph.r:hover{opacity:1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.7)) brightness(1)}
.fi-phones::after{content:"";position:absolute;left:20%;right:20%;bottom:4%;height:50px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,150,69,.45),transparent 70%)}

/* ---------- videos ---------- */
/* video propio, vertical (fichas.json → clip) */
.fi-clip{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,6vw,96px);align-items:center}
.fi-clip-pasos{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.fi-clip-pasos li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;color:#dfe3ea}
.fi-clip-pasos b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 12px Poppins,Inter,sans-serif;color:#ffb16c;border:1px solid rgba(255,150,69,.55);background:rgba(255,150,69,.1)}
.fi-clip-ph{position:relative;width:min(300px,70vw);aspect-ratio:9/16;border-radius:36px;overflow:hidden;background:#0a1330;cursor:pointer;justify-self:center;margin:10px;
  box-shadow:0 0 0 9px #0b0c10,0 0 0 10.5px rgba(255,255,255,.16),0 60px 100px -40px rgba(255,150,69,.5),0 40px 80px -30px rgba(0,0,0,.9);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fi-clip-ph:not(.playing):hover{transform:translateY(-5px)}
.fi-clip-ph.playing{cursor:default}
.fi-clip-ph img,.fi-clip-ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fi-clip-ph .play{position:absolute;left:50%;top:85%;z-index:2;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;display:grid;place-items:center;
  background:#ff9645;color:#fff;animation:fiPulse 2.2s infinite;transition:transform .3s cubic-bezier(.3,1.4,.4,1)}
.fi-clip-ph:hover .play{transform:scale(1.12)}
.fi-clip-ph .play svg{width:28px;height:28px;margin-left:4px}
.fi-vids{margin-top:40px;display:grid;grid-template-columns:1.65fr 1fr;gap:20px;align-items:start}
.fi-vids.uno{grid-template-columns:1fr;max-width:960px}
.fi-vid{position:relative;display:block;width:100%;border-radius:24px;overflow:hidden;aspect-ratio:16/9;background:#000;cursor:pointer;
  box-shadow:0 40px 80px -36px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08)}
.fi-vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .4s}
.fi-vid:hover img{transform:scale(1.05);filter:brightness(.85)}
.fi-vid::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.78));pointer-events:none}
.fi-vid .play{position:absolute;left:50%;top:50%;z-index:2;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;
  background:#ff9645;color:#fff;box-shadow:0 0 0 0 rgba(255,150,69,.6);animation:fiPulse 2.2s infinite;transition:transform .3s cubic-bezier(.3,1.4,.4,1)}
.fi-vid:hover .play{transform:scale(1.12)}
.fi-vid .play svg{width:30px;height:30px;margin-left:4px}
@keyframes fiPulse{0%{box-shadow:0 0 0 0 rgba(255,150,69,.55)}75%{box-shadow:0 0 0 26px rgba(255,150,69,0)}100%{box-shadow:0 0 0 0 rgba(255,150,69,0)}}
.fi-vid .vt{position:absolute;left:22px;right:22px;bottom:18px;z-index:2;font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:clamp(16px,1.6vw,20px);text-align:left}
.fi-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fi-vid.playing::after{display:none}
.fi-vlist{display:flex;flex-direction:column;gap:12px}
.fi-vi{display:flex;gap:14px;align-items:center;padding:10px;border-radius:18px;text-align:left;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);transition:background .2s,border-color .2s,transform .2s}
.fi-vi:hover{background:rgba(255,150,69,.08);border-color:rgba(255,150,69,.4);transform:translateX(4px)}
.fi-vi.on{border-color:#ff9645;background:rgba(255,150,69,.12)}
.fi-vi .th{position:relative;flex:none;width:132px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.fi-vi .th img{width:100%;height:100%;object-fit:cover}
.fi-vi .th span{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.fi-vi .th span svg{width:22px;height:22px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
.fi-vi b{font-size:14px;font-weight:600;line-height:1.35;color:#e3e7ee}

/* ---------- integraciones / requisitos ---------- */
.fi-comp{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:14px}
.fi-card{border-radius:24px;padding:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s}
.fi-card:hover{transform:translateY(-6px);border-color:rgba(255,150,69,.55);background:rgba(255,150,69,.06)}
.fi-card .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#ff9645;background:rgba(255,150,69,.12);transition:transform .45s cubic-bezier(.3,1.4,.4,1),background .3s,color .3s}
.fi-card .ic svg{width:26px;height:26px}
.fi-card:hover .ic{transform:rotate(-8deg) scale(1.1);background:#ff9645;color:#fff}
.fi-card h4{margin-top:16px;font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:18px}
.fi-card ul{margin-top:10px;display:grid;gap:6px}
.fi-card li{color:#aab3c2;font-size:14px;line-height:1.5;padding-left:16px;position:relative}
.fi-card li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:#ff9645}
.fi-req{margin-top:18px;border-radius:22px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025)}
.fi-req summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;font-weight:700}
.fi-req summary::-webkit-details-marker{display:none}
.fi-req summary svg{width:18px;height:18px;transition:transform .3s;color:#ffb16c}
.fi-req[open] summary svg{transform:rotate(180deg)}
.fi-req .rq{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;padding:0 22px 22px;animation:fiPaneIn .4s}
.fi-req .rq div{border-radius:16px;padding:16px;background:rgba(0,0,0,.25)}
.fi-req .rq b{display:block;font-size:14px;color:#fff}
.fi-req .rq p{margin-top:6px;font-size:14px;color:#aab3c2;line-height:1.6}

/* ---------- demo online ---------- */
.fi-demo{position:relative;border-radius:30px;padding:clamp(24px,4vw,48px);overflow:hidden;display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;
  background:radial-gradient(500px 260px at 0% 0%,rgba(25,185,122,.18),transparent 60%),linear-gradient(165deg,#111318,#0d0e12);border:1px solid rgba(25,185,122,.35)}
.fi-demo .live{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4fe3a8}
.fi-demo .live i{width:8px;height:8px;border-radius:50%;background:#19b97a;animation:fiPing 2s infinite;box-shadow:0 0 0 0 rgba(25,185,122,.7)}
.fi-cred{border-radius:20px;padding:18px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.fi-cred div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px}
.fi-cred div+div{border-top:1px dashed rgba(255,255,255,.1)}
.fi-cred span{font-size:12px;color:#8b93a3;font-family:Inter,sans-serif;font-weight:600}
.fi-cred b{font-size:16px;color:#fff;letter-spacing:.02em}
.fi-copy{font-family:Inter,sans-serif;font-size:12px;font-weight:700;color:#4fe3a8;border:1px solid rgba(25,185,122,.4);border-radius:999px;padding:6px 10px;transition:background .2s}
.fi-copy:hover{background:rgba(25,185,122,.15)}

/* ---------- planes ---------- */
.fi-bill{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:#9aa3b2}
.fi-bill .on{color:#fff}
.fi-tg{position:relative;width:54px;height:30px;border-radius:999px;background:rgba(255,150,69,.25);transition:background .3s}
.fi-tg i{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:#ff9645;transition:transform .35s cubic-bezier(.3,1.4,.4,1);box-shadow:0 4px 10px rgba(0,0,0,.4)}
.fi-tg[aria-checked="true"] i{transform:translateX(24px)}
.fi-tg[aria-checked="true"]{background:rgba(255,150,69,.5)}
.fi-plans{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;align-items:stretch}
.fi-plans[data-n="1"]{max-width:380px;margin-inline:auto}
.fi-plans.cig{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fi-plans.cig .fi-plan{padding:26px}
.fi-plans.cig .fi-plan .pr b{font-size:clamp(24px,2.1vw,32px);white-space:nowrap}
.fi-plan{position:relative;display:flex;flex-direction:column;border-radius:28px;padding:30px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.fi-plan:hover{transform:translateY(-6px);border-color:rgba(255,150,69,.5)}
.fi-plan.hot{background:radial-gradient(360px 200px at 50% 0%,rgba(255,150,69,.22),transparent 70%),rgba(255,255,255,.05);border:1.5px solid #ff9645;box-shadow:0 40px 80px -40px rgba(255,150,69,.75)}
.fi-plan .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);border-radius:999px;background:#ff9645;color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;padding:5px 12px;white-space:nowrap}
.fi-plan h4{font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:20px}
.fi-plan .ps{margin-top:4px;color:#98a1b1;font-size:14px}
.fi-plan .pr{margin-top:22px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px}
.fi-plan .pr b{font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:clamp(32px,3vw,42px);letter-spacing:-.02em;transition:opacity .25s}
.fi-plan .pr span{color:#98a1b1;font-size:13px}
.fi-plan .inc{margin-top:6px;font-size:13px;color:#ffb16c;font-weight:600;min-height:18px}
.fi-plan .eq{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:#98a1b1}
.fi-plan .eq:empty{display:none}
.fi-plan .eq b{color:#fff}
.fi-plan .eq .ah{border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;color:#4fe3a8;background:rgba(25,185,122,.14);box-shadow:inset 0 0 0 1px rgba(25,185,122,.38)}
.fi-plan .pr b.cambia{animation:fiNum .45s cubic-bezier(.2,.8,.2,1)}
@keyframes fiNum{from{opacity:0;transform:translateY(8px)}}
.fi-plan .fi-checks{margin-top:18px;flex:1}
.fi-plan .fi-checks .fi-check{font-size:14px;color:#cfd5df}
.fi-plan .fi-btn{margin-top:24px;width:100%}
/* 4 a 6 planes: una sola fila en compu, tarjetas compactas (sin bajar a una segunda fila) */
@media (min-width:1000px){
  .fi-plans[data-n="4"]{grid-template-columns:repeat(4,1fr)}
  .fi-plans[data-n="5"]{grid-template-columns:repeat(5,1fr)}
  .fi-plans[data-n="6"]{grid-template-columns:repeat(6,1fr)}
  .fi-plans:is([data-n="4"],[data-n="5"],[data-n="6"]){gap:12px}
  .fi-plans:is([data-n="4"],[data-n="5"],[data-n="6"]) .fi-plan{padding:22px 16px;border-radius:22px}
  .fi-plans:is([data-n="4"],[data-n="5"],[data-n="6"]) .fi-plan h4{font-size:17px}
  .fi-plans:is([data-n="4"],[data-n="5"],[data-n="6"]) .fi-plan .ps{font-size:12.5px}
  .fi-plans:is([data-n="4"],[data-n="5"],[data-n="6"]) .fi-plan .pr{margin-top:14px}
  .fi-plans:is([data-n="4"],[data-n="5"],[data-n="6"]) .fi-plan .pr b{font-size:clamp(20px,1.9vw,27px);white-space:nowrap}
  .fi-plans:is([data-n="4"],[data-n="5"],[data-n="6"]) .fi-plan .inc,
  .fi-plans:is([data-n="4"],[data-n="5"],[data-n="6"]) .fi-plan .eq{font-size:12px}
  .fi-plans:is([data-n="4"],[data-n="5"],[data-n="6"]) .fi-plan .fi-checks{margin-top:12px}
  .fi-plans:is([data-n="4"],[data-n="5"],[data-n="6"]) .fi-plan .fi-checks .fi-check{font-size:12.5px}
  .fi-plans:is([data-n="4"],[data-n="5"],[data-n="6"]) .fi-plan .fi-btn{margin-top:16px;padding-left:10px;padding-right:10px;font-size:13px}
}
.fi-pnote{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;color:#98a1b1;font-size:14px}
.fi-link{color:#ffb16c;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.fi-link:hover{color:#fff}
.fi-link svg{width:16px;height:16px;transition:transform .2s}
.fi-link:hover svg{transform:translateX(3px)}
.fi-budget{margin-top:40px;border-radius:30px;padding:clamp(24px,4vw,44px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  background:radial-gradient(500px 260px at 100% 0%,rgba(255,150,69,.22),transparent 60%),rgba(255,255,255,.04);border:1px solid rgba(255,150,69,.4)}
.fi-budget h4{font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:clamp(24px,2.4vw,32px)}
.fi-budget p{margin-top:8px;color:#aab3c2;max-width:56ch;line-height:1.65}

/* ---------- cómo empezamos ---------- */
.fi-steps{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px 18px}
.fi-steps.n3{grid-template-columns:repeat(3,1fr);max-width:1000px;margin-left:auto;margin-right:auto}
.fi-steps.n2{grid-template-columns:repeat(2,1fr);max-width:720px;margin-left:auto;margin-right:auto}
.fi-step{position:relative;text-align:center;padding:0 6px}
.fi-step .n{position:relative;z-index:1;margin:0 auto;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:18px;
  color:#ffb16c;background:#14161c;border:2px solid rgba(255,150,69,.6);transition:background .4s,color .4s,box-shadow .4s}
.fi-step:hover .n{background:#ff9645;color:#fff;box-shadow:0 0 0 8px rgba(255,150,69,.15)}
.fi-step:not(:nth-child(4n)):not(:last-child)::after{content:"";position:absolute;top:28px;left:calc(50% + 36px);right:calc(-50% + 36px);height:2px;
  background:linear-gradient(90deg,#ff9645,rgba(255,150,69,.15));transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.fi-steps.in .fi-step::after{transform:scaleX(1)}
.fi-step h5{margin-top:16px;font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:17px}
.fi-step p{margin-top:6px;color:#98a1b1;font-size:14px;line-height:1.55}
.fi-modal-chips{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* ---------- preguntas ---------- */
.fi-faq{margin-top:34px;max-width:880px}
.fi-faq details{border-bottom:1px solid rgba(255,255,255,.09)}
.fi-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;font-weight:600;font-size:clamp(16px,1.5vw,18px);transition:color .2s}
.fi-faq summary::-webkit-details-marker{display:none}
.fi-faq summary:hover{color:#ffb16c}
.fi-faq summary i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);color:#ffb16c;transition:transform .35s cubic-bezier(.3,1.4,.4,1),background .3s,color .3s}
.fi-faq summary i svg{width:16px;height:16px}
.fi-faq details[open] summary i{transform:rotate(45deg);background:#ff9645;color:#fff}
.fi-faq .ans{padding:0 50px 24px 0;color:#aab3c2;line-height:1.75;animation:fiPaneIn .4s cubic-bezier(.2,.8,.2,1)}

/* ---------- CTA final con borde de cometa ---------- */
@property --fi-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.fi-cta{position:relative;isolation:isolate;border-radius:34px;padding:clamp(32px,5vw,64px);overflow:hidden;text-align:center}
.fi-cta::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  background:conic-gradient(from var(--fi-a),rgba(255,150,69,0) 0deg,rgba(255,150,69,0) 230deg,#ff9645 300deg,#ffe0c4 330deg,rgba(255,150,69,0) 360deg);animation:fiSpin 5s linear infinite}
.fi-cta::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:32px;background:radial-gradient(700px 320px at 50% -10%,rgba(255,150,69,.26),transparent 62%),#0e0f13}
@keyframes fiSpin{to{--fi-a:360deg}}
.fi-cta h3 em{font-style:normal;background:linear-gradient(100deg,#ffb16c,#ff9645);-webkit-background-clip:text;background-clip:text;color:transparent}
.fi-cta h3{font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:clamp(30px,4vw,54px);line-height:1.05;letter-spacing:-.03em}
.fi-cta p{margin:16px auto 0;max-width:56ch;color:#aab3c2;font-size:17px;line-height:1.65}
.fi-cta .fi-ctas{justify-content:center}
.fi-more{margin-top:56px}
.fi-more-row{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:4px 0 12px}
.fi-mini{min-width:0;border-radius:22px;padding:18px;text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s}
.fi-mini:hover{transform:translateY(-5px);border-color:rgba(255,150,69,.6);background:rgba(255,150,69,.07)}
.fi-mini .em{font-size:26px}
.fi-mini b{display:block;margin-top:10px;font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:17px}
.fi-mini span{display:block;margin-top:2px;font-size:13px;color:#ffb16c;font-weight:600}
.fi-mini .go{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#9aa3b2;transition:color .2s}
.fi-mini:hover .go{color:#fff}
.fi-mini .go svg{width:14px;height:14px}
.fi-foot{padding:0 clamp(20px,5vw,64px) 120px}

/* ---------- dock flotante ---------- */
.fi-dock{position:absolute;left:50%;bottom:18px;z-index:9;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 20px;border-radius:999px;white-space:nowrap;
  background:rgba(14,15,20,.96);border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 60px -12px rgba(0,0,0,.85);
  transform:translate(-50%,160%);transition:transform .55s cubic-bezier(.2,.9,.2,1)}
.fi-dock.on{transform:translate(-50%,0)}
.fi-dock .dn{display:flex;flex-direction:column;line-height:1.15}
.fi-dock .dn b{font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:15px}
.fi-dock .dn span{font-size:12px;color:#ffb16c;font-weight:600}
.fi-dock .wa{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#22c55e;color:#fff;transition:background .2s,transform .2s}
.fi-dock .wa:hover{background:#16a34a;transform:scale(1.06)}
.fi-dock .wa svg{width:22px;height:22px}

/* ---------- visor de capturas ---------- */
.fi-lb{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:clamp(16px,4vw,56px);background:rgba(4,5,7,.93);opacity:0;pointer-events:none;transition:opacity .3s}
.fi-lb.on{opacity:1;pointer-events:auto}
.fi-lb img{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 40px 100px -20px rgba(0,0,0,.9);transform:scale(.95);transition:transform .4s cubic-bezier(.2,.9,.2,1);background:#fff}
.fi-lb.on img{transform:none}
.fi-lb .fi-ib{position:absolute;top:18px;right:18px}

/* ---------- vista previa del editor (admin/ficha.php) ----------
   se repinta con cada cambio: sin animaciones de entrada que parpadeen */
.fi-preview .fi-rv{opacity:1;transform:none;transition:none}
.fi-preview .fi-name{animation:fiSheen 7s ease-in-out infinite alternate}
.fi-preview .fi-device{animation:none}
.fi-preview .fi-float{opacity:1;animation:fiFloat 6s ease-in-out infinite}
.fi-preview .fi-step::after{transform:scaleX(1)}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .fi-hero-in{grid-template-columns:1fr;min-height:0}
  .fi-stage{min-height:0;padding:34px 4% 40px}
  .fi-float.f1{left:0}.fi-float.f2{right:0}
  .fi-flips,.fi-flips.n2,.fi-flips.n4{grid-template-columns:1fr}
  .fi-flips.tit .fi-face{min-height:0}
  .fi-face{min-height:0}
  .fi-mods{grid-template-columns:minmax(0,1fr);gap:18px}
  .fi-tabs{position:relative;top:auto;flex-direction:row;overflow-x:auto;gap:8px;margin:0 calc(-1 * clamp(20px,5vw,64px));padding:2px clamp(20px,5vw,64px) 6px;scrollbar-width:none}
  .fi-tabs::-webkit-scrollbar{display:none}
  .fi-tab{flex:none;padding:9px 14px 9px 9px}
  .fi-tab .ic{width:32px;height:32px}
  .fi-tab .bar{display:none}
  .fi-pane{min-height:0}
  /* minmax(0,…): un título largo en la barra de la captura no ensancha la ficha en pantallas angostas */
  .fi-pane-grid,.fi-pane-grid.solo{grid-template-columns:minmax(0,1fr)}
  .fi-movil{grid-template-columns:1fr}
  .fi-clip{grid-template-columns:1fr}
  .fi-phones{height:460px}
  .fi-vids{grid-template-columns:1fr}
  .fi-demo{grid-template-columns:1fr}
  .fi-plans{grid-template-columns:1fr;max-width:520px}
  .fi-steps{grid-template-columns:repeat(2,1fr)}
  .fi-steps.n3{grid-template-columns:1fr;max-width:420px}
  .fi-step::after{display:none}
  .fi-more-row{display:flex;overflow-x:auto;scroll-snap-type:x proximity;margin:18px calc(-1 * clamp(20px,5vw,64px)) 0;padding:4px clamp(20px,5vw,64px) 12px;scrollbar-width:none}
  .fi-more-row::-webkit-scrollbar{display:none}
  .fi-mini{flex:none;width:200px;scroll-snap-align:start}
}
@media (max-width:640px){
  .fi-top{padding:10px 12px}
  .fi-ib{width:40px;height:40px}
  .fi-checks.two{grid-template-columns:1fr}
  .fi-phones{height:400px}
  .fi-ph{width:46%}
  .fi-steps{grid-template-columns:1fr 1fr;gap:22px 12px}
  .fi-dock{left:10px;right:10px;padding:8px 8px 8px 16px;transform:translateY(160%)}
  .fi-dock.on{transform:none}
  .fi-dock .dn{flex:1;min-width:0}
  .fi-dock .dn b,.fi-dock .dn span{overflow:hidden;text-overflow:ellipsis}
  .fi-ctas .fi-btn{flex:1 1 auto}
  .fi-faq .ans{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  .fi-modal *,.fi-modal *::before,.fi-modal *::after{animation:none!important;transition:none!important}
  .fi-rv{opacity:1;transform:none}
  .fi-float{opacity:1}
}

/* =====================================================================
   TARJETAS DE PRODUCTO ("Mirá lo que armamos…") — mismo lenguaje que la
   ficha: tocar una abre su ficha (que se expande desde la tarjeta).
   ===================================================================== */
@property --pc-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.pc{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;border-radius:32px;padding:clamp(22px,2.3vw,34px);cursor:pointer;overflow:hidden;color:#fff;
  background:radial-gradient(520px 260px at 100% 0%,rgba(255,150,69,.13),transparent 62%),linear-gradient(165deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.09);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .5s}
/* Cantidad impar de sistemas: la última tarjeta no queda sola a la izquierda, se centra. */
@media (min-width:768px){#cards>.pc:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 1rem);justify-self:center}}
.pc:hover,.pc:focus-visible{border-color:rgba(255,150,69,.0);box-shadow:0 46px 90px -44px rgba(255,150,69,.6), 0 30px 60px -34px rgba(0,0,0,.85);outline:none}
.pc-ring{position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--pc-a),rgba(255,150,69,0) 0deg,rgba(255,150,69,0) 200deg,#ff9645 290deg,#ffe0c4 322deg,rgba(255,150,69,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .45s;animation:pcSpin 4.5s linear infinite;animation-play-state:paused}
.pc:hover .pc-ring,.pc:focus-visible .pc-ring{opacity:1;animation-play-state:running}
@keyframes pcSpin{to{--pc-a:360deg}}
.pc-spot{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(460px circle at var(--mx,70%) var(--my,0%),rgba(255,150,69,.17),transparent 62%)}
.pc:hover .pc-spot{opacity:1}
.pc-grid{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 85% 0%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 55% at 85% 0%,#000,transparent 75%)}
.pc-num{position:absolute;top:16px;right:24px;font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:clamp(44px,4.2vw,62px);line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);transition:-webkit-text-stroke-color .45s, transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.pc:hover .pc-num{-webkit-text-stroke-color:rgba(255,150,69,.75);transform:translateY(-4px)}
.pc-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-right:76px}
.pc-ico{flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:24px;line-height:1;
  background:rgba(255,150,69,.12);box-shadow:inset 0 0 0 1px rgba(255,150,69,.3);transition:transform .5s cubic-bezier(.3,1.4,.4,1),background .3s}
.pc:hover .pc-ico{transform:rotate(-9deg) scale(1.08);background:rgba(255,150,69,.24)}
.pc-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffb16c}
.pc-badge{border-radius:999px;padding:4px 10px;font-size:10.5px;font-weight:800;letter-spacing:.06em}
.pc-badge.free{color:#4fe3a8;background:rgba(25,185,122,.13);box-shadow:inset 0 0 0 1px rgba(25,185,122,.38)}
.pc-badge.new{color:#fff;background:#ff9645}
.pc-name{margin-top:18px;font-family:Poppins,Inter,sans-serif;font-weight:800;font-size:clamp(30px,2.9vw,46px);line-height:.98;letter-spacing:-.035em;overflow-wrap:break-word;
  background:linear-gradient(100deg,#fff 0%,#fff 36%,#ffd9b8 47%,#ff9645 56%,#fff 70%);background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position 1.2s cubic-bezier(.2,.8,.2,1)}
.pc:hover .pc-name{background-position:0 0}
.pc-blurb{margin-top:12px;color:#aab3c2;font-size:15px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-feats{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.pc-feats li{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 12px 6px 6px;font-size:12.5px;font-weight:600;color:#dfe3ea;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);transition:border-color .3s,background .3s}
.pc:hover .pc-feats li{border-color:rgba(255,150,69,.28);background:rgba(255,150,69,.06)}
.pc-feats li i{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:rgba(255,150,69,.18);color:#ff9645}
.pc-feats li i svg{width:11px;height:11px}
.pc-stage{position:relative;margin-top:24px;flex:1;display:flex;flex-direction:column;justify-content:flex-end;perspective:1400px}
.pc-stage::after{content:"";position:absolute;left:12%;right:12%;bottom:-16px;height:44px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,150,69,.45),transparent 70%);opacity:.35;transition:opacity .5s}
.pc:hover .pc-stage::after{opacity:1}
.pc-win{position:relative;z-index:1;border-radius:18px;overflow:hidden;background:#fff;transform-origin:50% 100%;transform:rotateX(9deg) translateY(4px) scale(.985);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);transition:transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.pc:hover .pc-win{transform:rotateX(0) translateY(-6px) scale(1);box-shadow:0 44px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,150,69,.4)}
.pc-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:#15171d}
.pc-bar i{width:9px;height:9px;border-radius:50%;background:#3a3e48;transition:background .35s}
.pc:hover .pc-bar i:nth-child(1){background:#ff6b5f}
.pc:hover .pc-bar i:nth-child(2){background:#ffbd2e;transition-delay:.06s}
.pc:hover .pc-bar i:nth-child(3){background:#28c840;transition-delay:.12s}
.pc-bar span{margin-left:8px;font-size:11px;font-weight:600;color:#9aa3b2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-screen{position:relative;height:clamp(210px,19vw,270px);overflow:hidden;background:#fff}
.pc-screen > img,.pc-screen > picture > img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.pc:hover .pc-screen > img,.pc:hover .pc-screen > picture > img{transform:scale(1.04)}
.pc-acts{position:relative;z-index:2;margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.pc-acts a{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;color:#e3e7ee;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);transition:border-color .25s,background .25s,color .25s}
.pc-acts a:hover{border-color:#ff9645;background:rgba(255,150,69,.12);color:#fff}
.pc-acts a.demo{background:rgba(25,185,122,.14);border-color:rgba(25,185,122,.45);color:#4fe3a8}
.pc-acts a.demo:hover{background:rgba(25,185,122,.24);border-color:#19b97a;color:#fff}
.pc-foot{margin-top:22px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.pc-plat{display:flex;flex-wrap:wrap;gap:6px}
.pc-plat span{border-radius:999px;padding:4px 10px;font-size:11px;font-weight:600;color:#c9cfd9;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.pc-price{margin-left:auto;font-size:13px;color:#98a1b1;white-space:nowrap}
.pc-price b{font-family:Poppins,Inter,sans-serif;font-size:18px;font-weight:800;color:#fff}
.pc-cta{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:7px 7px 7px 16px;font-size:14px;font-weight:700;color:#fff;white-space:nowrap;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);transition:background .35s,border-color .35s}
.pc-cta i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#ff9645;color:#fff;transition:transform .5s cubic-bezier(.3,1.4,.4,1),background .35s,color .35s}
.pc-cta i svg{width:15px;height:15px}
.pc:hover .pc-cta{background:#ff9645;border-color:#ff9645}
.pc:hover .pc-cta i{background:#fff;color:#e2730f;transform:rotate(-45deg)}
@media (max-width:640px){
  .pc{border-radius:26px}
  .pc-top{padding-right:56px}
  .pc-win{transform:none}
  .pc-price{margin-left:0}
  .pc-cta{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  .pc,.pc *{transition:none!important;animation:none!important}
}
/* ===== Celulares: el selector "antes / después" ocupa el ancho y sus textos pueden partirse en dos renglones ===== */
@media (max-width:640px){
  .fi-switch{display:flex;width:100%}
  .fi-sw{flex:1 1 0;min-width:0;white-space:normal;padding:10px 12px;font-size:13px;line-height:1.2;text-align:center}
  .fi-cta .fi-link{font-size:14px;text-align:left}
}
@media (max-width:400px){
  .fi-top-id b{font-size:15px}
  .fi-top-id span:not(.em){display:none}
  .fi-top-btns{gap:6px}
  .fi-dock{gap:8px;padding-left:14px}
  .fi-dock .dn b{font-size:13.5px}
}