/* ============================================================
   Flujo de reservas — demo interactivo (loop 3D).
   Seccion AUTOCONTENIDA y oscura. Todo scopeado bajo `.flujo`
   para verse identica en index.html (oscuro) y empresas.html (claro)
   sin tocar el :root de ninguna pagina.
   ============================================================ */
.flujo{
  --bg:#070a09; --bg-2:#0a0f0e; --surface:#0e1513; --surface-2:#131d19;
  --line:rgba(255,255,255,.08); --line-lime:rgba(182,225,74,.20);
  --text:#eaf1ec; --muted:#93a49b; --muted-2:#63736b;
  --lime:#b6e14a; --lime-2:#c9ee63; --lime-deep:#7fb02f; --teal:#31b08e;
  --on-lime:#0a1403; --r:16px; --ease:cubic-bezier(.16,1,.3,1); --step-ms:4200ms;

  position:relative;padding:96px 0 104px;color:var(--text);
  font-family:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;text-align:left;
  background:
    radial-gradient(1100px 620px at 80% -10%, rgba(182,225,74,.07), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(49,176,142,.06), transparent 55%),
    var(--bg);
}
.flujo *{box-sizing:border-box}
.flujo img{max-width:100%;display:block}
.flujo__wrap{max-width:1340px;margin:0 auto;padding:0 24px}

.flujo__head{text-align:center;max-width:780px;margin:0 auto 46px}
.flujo__eyebrow{
  font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--lime-deep);margin:0 0 16px;
}
.flujo__title{
  margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.05;color:var(--text);
  font-size:clamp(30px,4.6vw,52px);
}
.flujo__title em{
  font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;
  color:var(--lime-2);letter-spacing:-.01em;
}
.flujo__sub{margin:18px auto 0;color:var(--muted);font-size:clamp(16px,1.6vw,19px);max-width:620px}

/* ---- Player ---- */
.flujo__player{
  display:grid;grid-template-columns:2.15fr .8fr;gap:22px;align-items:center;margin-top:8px;
  perspective:1500px;perspective-origin:60% 50%;transform-style:preserve-3d;
}
.flujo__player>.flujo__stage{transform:translateZ(0);transform-style:preserve-3d}
.flujo__player>.flujo__rail{transform:translateZ(-45px);opacity:.92;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
@media(max-width:900px){
  .flujo__player{grid-template-columns:1fr;gap:20px;perspective:none}
  .flujo__player>.flujo__stage,.flujo__player>.flujo__rail{transform:none;opacity:1}
}

/* stage: marco navegador */
.flujo__stage{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:0 50px 110px -50px rgba(0,0,0,.92),0 0 0 1px rgba(255,255,255,.02) inset;
  overflow:hidden;
}
.flujo__chrome{
  display:flex;align-items:center;gap:14px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);
}
.flujo__dots{display:flex;gap:7px}
.flujo__dots i{width:11px;height:11px;border-radius:50%;background:#2a3531;display:block}
.flujo__dots i:nth-child(1){background:#ff5f57}
.flujo__dots i:nth-child(2){background:#febc2e}
.flujo__dots i:nth-child(3){background:#28c840}
.flujo__omni{
  flex:1;font-family:"Geist Mono",ui-monospace,monospace;font-size:12.5px;color:var(--muted);
  background:var(--bg-2);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .5s var(--ease);
}
.flujo__omni b{color:var(--lime-deep);font-weight:500}

.flujo__screens{position:relative;aspect-ratio:16/10;background:#0b0f0e;
  perspective:1500px;perspective-origin:50% 42%;transform-style:preserve-3d;overflow:hidden}
.flujo__screens img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  background:#0b0f0e;opacity:0;pointer-events:none;z-index:0;
}
.flujo__screens img.under{opacity:1;z-index:1;transform:none;
  filter:brightness(.55);transition:filter .9s var(--ease)}
.flujo__screens img.on{opacity:1;z-index:3;animation:flujoEmerge 1s var(--ease) both}
@keyframes flujoEmerge{
  0%{opacity:0;transform:translateZ(-320px) scale(.88);filter:brightness(.5)}
  55%{opacity:1}
  100%{opacity:1;transform:translateZ(0) scale(1);filter:brightness(1)}
}
.flujo__chip{
  position:absolute;left:20px;top:18px;z-index:5;
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Geist Mono",ui-monospace,monospace;font-size:14px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text);
  background:rgba(7,10,9,.7);backdrop-filter:blur(10px);
  border:1px solid var(--line-lime);border-radius:999px;padding:10px 18px;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.7);transition:opacity .5s var(--ease);
}
.flujo__chip .pin{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}

/* ---- Rail ---- */
.flujo__rail{display:flex;flex-direction:column;gap:10px;justify-content:center}
.flujo__step{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:16px 16px 16px 15px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);cursor:pointer;text-align:left;color:var(--text);
  transition:border-color .4s var(--ease),background .4s var(--ease);overflow:hidden;
  font:inherit;
}
.flujo__step:hover{border-color:var(--line-lime)}
.flujo__step.on{border-color:var(--line-lime);background:var(--surface-2)}
.flujo__n{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:"Geist Mono",ui-monospace,monospace;font-size:13px;font-weight:600;
  color:var(--muted);background:var(--bg-2);border:1px solid var(--line);
  transition:all .4s var(--ease);
}
.flujo__step.on .flujo__n{color:var(--on-lime);background:var(--lime);border-color:var(--lime)}
.flujo__body{display:block;min-width:0}
.flujo__t{display:block;font-weight:600;font-size:16px;letter-spacing:-.01em;line-height:1.25}
.flujo__d{display:block;color:var(--muted);font-size:13.5px;line-height:1.5;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),margin .4s var(--ease)}
.flujo__step.on .flujo__d{max-height:100px;opacity:1;margin-top:6px}
.flujo__bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--lime);opacity:0}
.flujo__step.on .flujo__bar{opacity:1}
.flujo__step.on.run .flujo__bar{width:100%;transition:width var(--step-ms) linear}

/* ---- Controls ---- */
.flujo__ctrls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.flujo__cap{font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--muted-2);letter-spacing:.04em}
.flujo__toggle{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--text);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  transition:border-color .3s var(--ease),transform .2s var(--ease);
}
.flujo__toggle:hover{border-color:var(--line-lime);transform:translateY(-1px)}
.flujo__toggle svg{width:14px;height:14px;fill:var(--lime)}

@media(prefers-reduced-motion:reduce){
  .flujo__screens img.on{animation:none;opacity:1;transform:none;filter:none}
  .flujo__screens img.under{filter:none}
  .flujo__player>.flujo__stage,.flujo__player>.flujo__rail{transform:none}
  .flujo__step.on.run .flujo__bar{transition:none;width:100%}
}