/* <MRmiguel/> · experiencia de entrada: "¿qué necesitas?" → la página real se arma frente al cliente → el sitio en vivo.
   Primero celular; en escritorio, la narrativa a la izquierda y el celular a la derecha. */
.xp{position:fixed;inset:0;z-index:200;background:var(--bg);color:var(--tx);overflow:hidden;
  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;
  display:grid;grid-template-rows:auto 1fr;height:100dvh;font-family:var(--mono)}
.xp[hidden]{display:none}
.xp:focus{outline:none}
html.xp-open,html.xp-open body{overflow:hidden}
.xp-glow{position:absolute;inset:-20%;pointer-events:none;background:radial-gradient(circle at 70% 35%,var(--glow,rgba(255,255,255,.08)),transparent 45%)}

/* barra superior */
.xp-top{position:relative;z-index:3;display:flex;align-items:center;gap:10px;padding:14px 16px}
.xp-top .brand{font-size:18px}
.xp-top .sp{flex:1}
.xp-x{white-space:nowrap;min-height:40px;padding:0 12px;background:transparent;color:var(--sub);border:1px solid var(--line);font:400 13px var(--mono);cursor:pointer}
.xp-x:hover{color:var(--tx);border-color:var(--tx)}

/* selector */
.xp-pick{grid-row:2;position:relative;z-index:2;align-self:center;width:min(640px,100% - 32px);margin-inline:auto}
.xp-prompt{font-size:14px;color:var(--gray);margin-bottom:10px}
.xp-prompt b{color:var(--tx);font-weight:400}
.xp-q{font-size:clamp(34px,9vw,60px);font-weight:800;letter-spacing:-.04em;line-height:1.02;margin:0 0 22px;min-height:1.05em}
.xp-q .cur{display:inline-block;width:.5em;height:.9em;background:var(--tx);vertical-align:-.08em;margin-left:4px;animation:xpblink 1s steps(1) infinite}
@keyframes xpblink{50%{opacity:0}}
.xp-opts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.xp-opt{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;text-align:left;min-height:68px;padding:12px 16px;
  background:rgba(20,20,20,.85);color:var(--tx);border:1px solid var(--line);font:400 14px var(--mono);cursor:pointer;position:relative;overflow:hidden;opacity:0}
.xp-opt::before{content:"";position:absolute;inset:0;background:var(--tx);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.xp-opt > *{position:relative}
.xp-opt .k{color:var(--gray);font-size:13px}
.xp-opt .t{font-weight:800;font-size:18px;letter-spacing:-.02em;display:block}
.xp-opt .d{color:var(--sub);font-size:13px}
.xp-opt .go{font-weight:800;transition:transform .25s}
.xp-opt.ghost{background:transparent;border-style:dashed}
.xp-opt:hover::before,.xp-opt:focus-visible::before,.xp-opt.on::before{transform:scaleX(1)}
.xp-opt:hover,.xp-opt:focus-visible,.xp-opt.on{color:var(--bg);border-color:var(--tx)}
.xp-opt:hover .k,.xp-opt:hover .d,.xp-opt:focus-visible .k,.xp-opt:focus-visible .d,.xp-opt.on .k,.xp-opt.on .d{color:#333}
.xp-opt:hover .go,.xp-opt.on .go{transform:translateX(4px)}
.xp-skip{margin-top:18px;display:flex;align-items:center;gap:12px;color:var(--gray);font-size:13px}
.xp-skip button{background:none;border:0;color:var(--sub);font:400 13px var(--mono);cursor:pointer;padding:10px 0;text-decoration:underline;text-underline-offset:4px}
.xp-skip button:hover{color:var(--tx)}
.xp-timer{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden}
.xp-timer i{position:absolute;inset:0;background:var(--gray);transform-origin:left;transform:scaleX(1)}
.xp-log{margin-top:14px;min-height:60px;font-size:13px;color:var(--sub)}
.xp-log div::before{content:"> ";color:var(--gray)}

/* construcción a pantalla completa */
.xp-top{z-index:8}
.xp.building .xp-top .brand{visibility:hidden}
.xp.building .xp-x{background:rgba(10,10,10,.72);color:#FAFAFA;border-color:rgba(255,255,255,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.xp.done .xp-top{display:none}
.fs{position:absolute;inset:0;z-index:5;overflow:hidden}
.fs[hidden]{display:none}
.fs-paint,.fs-paint i,.fs-wf,.fs-real,.fs-live,.fs-stamp,.xp-bits{position:absolute;inset:0}
.fs-paint{z-index:1}
.fs-wf{z-index:2;pointer-events:none}
.fs-wf i{position:absolute;border:1.5px dashed rgba(255,255,255,.55);border-radius:6px;transform-origin:left center}
.fs-wf i.t{border:0;background:rgba(255,255,255,.22);border-radius:4px}
.fs-wf i.b{border-style:solid;border-color:rgba(255,255,255,.3)}
.fs-wf i.i{background:rgba(255,255,255,.04)}
.fs-wf i.i::before,.fs-wf i.i::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;
  background:linear-gradient(to top right,transparent calc(50% - 1px),rgba(255,255,255,.35) 50%,transparent calc(50% + 1px))}
.fs-wf i.i::after{transform:scaleX(-1)}
.fs-wf i.c{border-radius:50%}
.fs-wf i.p{border-radius:99px}
.fs-real{z-index:3;background:#fff}
.fs-shot{position:absolute;left:0;top:0;width:100%;height:auto;display:block}
.fs-live{pointer-events:none}
.fs-live.on{pointer-events:auto}
.fs-live iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;background:transparent}
.fs-scan{position:absolute;left:-5%;right:-5%;top:0;height:3px;z-index:4;margin-top:-2px;background:var(--scan,#fff);box-shadow:0 0 28px 8px var(--scan,#fff);opacity:0;pointer-events:none;will-change:transform}
.fs-scan::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:160px;background:linear-gradient(transparent,var(--scan,#fff));opacity:.28}
.fs-url{position:absolute;z-index:6;top:64px;left:50%;translate:-50% 0;display:flex;align-items:center;gap:8px;padding:9px 16px;
  background:rgba(10,10,10,.82);color:#FAFAFA;border:1px solid rgba(255,255,255,.25);font:600 14px var(--mono);white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
.fs-url .lk{display:flex;color:#7CE0A3}
.fs-stamp{z-index:7;display:grid;place-items:center;pointer-events:none}
.fs-stamp span{background:#0A0A0A;color:#FAFAFA;font:800 clamp(28px,6vw,54px) var(--mono);letter-spacing:-.03em;padding:.3em .6em;border:3px solid #FAFAFA;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.xp-bits{z-index:8;pointer-events:none}
.xp-bits i{position:absolute;left:0;top:0;width:8px;height:8px;background:var(--tx)}

/* narrativa abajo: título del paso + progreso */
.fs-hud{position:absolute;z-index:6;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));translate:-50% 0;width:min(620px,100% - 24px);
  display:grid;gap:10px;padding:14px 16px;background:rgba(10,10,10,.82);border:1px solid rgba(255,255,255,.18);color:#FAFAFA;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none}
.fs-n{margin:0;font-size:12px;color:#9a9a9a;letter-spacing:.02em}
.fs-cap{margin:0;min-height:1.15em;font-weight:800;font-size:clamp(20px,5.2vw,32px);letter-spacing:-.035em;line-height:1.1;text-wrap:balance}
.fs-cap .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.fs-cap .w > span{display:inline-block}
.fs-sub{margin:0;color:#c4c4c4;font-size:clamp(13px,3.4vw,15px);line-height:1.4}
.fs-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.fs-step{display:block}
.fs-step > span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.fs-step.on{color:#FAFAFA}
.fs-step i{display:block;height:3px;background:rgba(255,255,255,.18);position:relative;overflow:hidden}
.fs-step i b{position:absolute;inset:0;background:#FAFAFA;transform-origin:left;transform:scaleX(0)}

/* al terminar: el sitio real queda solo; un botón flotante para cotizar o volver */
.fs-dock{position:absolute;z-index:9;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));translate:-50% 0;display:flex;align-items:center;gap:8px;padding:8px;
  background:#0A0A0A;color:#FAFAFA;border:1px solid rgba(255,255,255,.3);box-shadow:0 16px 48px rgba(0,0,0,.5);font:400 16px var(--mono);max-width:calc(100% - 24px);
  transition:left .45s cubic-bezier(.7,0,.2,1),translate .45s cubic-bezier(.7,0,.2,1)}
.fs-dock[hidden]{display:none !important}
.fs-mr{min-width:56px;height:50px;padding:0 13px;background:#FAFAFA;color:#0A0A0A;border:0;font:800 17px var(--mono);cursor:pointer;white-space:nowrap}
.fs-mr .g{font-weight:300}
.fs-msg{color:#9a9a9a;padding:0 8px;white-space:nowrap;font-size:15px}
.fs-btn{height:50px;padding:0 16px;background:transparent;color:#FAFAFA;border:1px solid rgba(255,255,255,.3);font:600 16px var(--mono);cursor:pointer;white-space:nowrap}
.fs-btn:hover{border-color:#FAFAFA}
.fs-cta{background:#FAFAFA;color:#0A0A0A;border-color:#FAFAFA;font-weight:800}
.fs-close{width:50px;padding:0;font-size:18px}
.fs-dock.mini{left:12px;translate:0 0}
.fs-dock.mini > :not(.fs-mr){display:none}

/* menú "Otros proyectos": se abre sobre el botón (solo o al tocarlo) */
.fs-more .ar{display:inline-block;font-size:12px;margin-left:4px;transition:transform .3s}
.fs-more[aria-expanded="true"]{background:#FAFAFA;color:#0A0A0A;border-color:#FAFAFA}
.fs-more[aria-expanded="true"] .ar{transform:rotate(180deg)}
.fs-menu{position:absolute;left:-1px;right:-1px;bottom:calc(100% + 10px);display:grid;gap:8px;padding:15px;background:#0A0A0A;border:1px solid rgba(255,255,255,.3);box-shadow:0 16px 48px rgba(0,0,0,.5)}
.fs-menu[hidden]{display:none}
.fs-menu-h{margin:0 0 2px;color:#9a9a9a;font-size:15px}
.fs-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;width:100%;min-height:66px;padding:10px 15px;text-align:left;cursor:pointer;
  background:transparent;color:#FAFAFA;border:1px solid rgba(255,255,255,.22);font:400 14px var(--mono);position:relative;overflow:hidden}
.fs-item::before{content:"";position:absolute;inset:0;background:#FAFAFA;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.7,0,.2,1)}
.fs-item > *{position:relative}
.fs-item .t{display:block;font-weight:800;font-size:19px;letter-spacing:-.02em;margin-bottom:2px}
.fs-item .d{color:#9a9a9a}
.fs-item .go{font-size:16px}
.fs-item:hover::before,.fs-item:focus-visible::before{transform:scaleX(1)}
.fs-item:hover,.fs-item:focus-visible{color:#0A0A0A}
.fs-item:hover .d,.fs-item:focus-visible .d{color:#444}
.fs-all{background:none;border:0;padding:8px 0 2px;color:#c4c4c4;font:400 15px var(--mono);text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.fs-all:hover{color:#FAFAFA}
/* llamar la atención (hasta que lo toquen):
   - desde que aparece, "Otros proyectos" hace un doble destello invertido y la flecha salta, cada 2.6 s
   - cuando el menú se abre solo, su borde brilla y un reflejo recorre cada proyecto */
.fs-dock.attn .fs-more{animation:fsflash 2.6s ease-in-out infinite}
.fs-dock.attn .fs-more .ar{animation:fsnudge 2.6s ease-in-out infinite}
.fs-dock.attn .fs-more[aria-expanded="true"]{animation:fsring 2.6s ease-in-out infinite}
.fs-dock.attn .fs-more[aria-expanded="true"] .ar{animation:none}
@keyframes fsflash{0%,55%,70%,90%,100%{background-color:transparent;color:#FAFAFA;box-shadow:0 0 0 0 rgba(255,255,255,0)}62%,78%{background-color:#FAFAFA;color:#0A0A0A;box-shadow:0 0 0 6px rgba(255,255,255,.25)}}
@keyframes fsnudge{0%,55%,72%,100%{transform:translateY(0)}64%{transform:translateY(-5px)}80%{transform:translateY(-3px)}}
@keyframes fsring{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 0 6px rgba(255,255,255,.28)}}
.fs-dock.pulse .fs-menu{animation:fsglow 2.6s ease-in-out infinite}
@keyframes fsglow{0%,100%{box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 0 0 rgba(255,255,255,0);border-color:rgba(255,255,255,.3)}50%{box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 0 6px rgba(255,255,255,.22);border-color:#FAFAFA}}
.fs-item::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);transform:translateX(-110%)}
.fs-dock.pulse .fs-item::after{animation:fsshine 2.6s ease-in-out infinite}
.fs-dock.pulse .fs-item + .fs-item::after{animation-delay:.25s}
@keyframes fsshine{0%,40%{transform:translateX(-110%)}75%,100%{transform:translateX(110%)}}

/* en celular: barra a lo ancho en dos filas (cotizar arriba; marca, proyectos y cerrar abajo) */
@media (max-width:560px){
  .fs-dock{left:10px;right:10px;translate:0 0;max-width:none;display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:8px;bottom:calc(10px + env(safe-area-inset-bottom))}
  .fs-cta{grid-column:1 / -1;grid-row:1;height:54px;font-size:17px}
  .fs-msg{display:none}
  .fs-more{width:100%}
  .fs-dock.mini{right:auto;display:flex}
  .fs-menu{padding:14px}
  .fs-item{min-height:68px}
}

/* botón de la cabecera para volver a ver la experiencia */
.nav .nav-xp{color:var(--tx)}
.nav .nav-xp::before{content:"▶ ";font-size:11px}

@media (max-width:560px){
  .xp-top .brand .l{display:none}


}
@media (min-width:768px){
  .fs-url{top:20px}
  .fs-hud{left:32px;translate:0 0;bottom:28px;width:min(560px,100% - 64px)}
  .fs-dock{bottom:24px}
  .fs-dock.mini{left:24px}
}
@media (prefers-reduced-motion:reduce){
  .xp-opt::before,.xp-opt .go,.fs-dock,.fs-item::before{transition:none}
  .fs-dock .fs-menu,.fs-dock .fs-more,.fs-dock .fs-more .ar,.fs-dock .fs-item::after{animation:none !important}
  .xp-q .cur{animation:none}
}