/* El pasillo de «Empezar subiendo un documento» (nubo-web#45). Usa los tokens de styles.css:
   --ink, --muted, --canvas, --surface, --purple, --blue, --green, --orange, --pink, --line.
   En el centro, el documento adaptándose (la escena); al lado, la tarjeta que pregunta lo justo. */
.px{position:fixed;inset:0;z-index:200;background:var(--canvas,#FBF9FC);color:var(--ink,#1C141D);overflow-y:auto;font-family:Lexend,Arial,sans-serif;font-size:16px;line-height:1.55}
.px[hidden]{display:none}
.px *{box-sizing:border-box}
.px h2{font-family:Sora,Lexend,sans-serif;font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0;text-wrap:balance}
.px p{margin:0}
.px button{font:inherit;color:inherit}
.px :focus-visible{outline:3px solid #0072DB;outline-offset:2px;border-radius:6px}
.px-cab{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:14px;padding:12px max(16px,calc((100vw - 1180px)/2));background:rgba(255,255,255,.96);border-bottom:1px solid var(--line,#DED6E1)}
.px-cab .brand{font-size:21px}
.px-cab .brand svg{width:28px}
.px-der{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px;white-space:nowrap;min-width:0}
.px-guardado{color:#087A60;min-width:0;overflow:hidden;text-overflow:ellipsis}
.px-cerrar{border:0;background:none;color:var(--muted,#665F67);cursor:pointer;padding:6px 8px;border-radius:8px;flex:none}
.px-cerrar:hover{background:var(--surface,#F4F0F4)}
.px-cuerpo{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:24px 0 56px;display:grid;gap:22px;align-items:start}
@media(min-width:960px){.px-cuerpo{grid-template-columns:minmax(0,1fr) 420px;gap:36px;padding-top:34px}}
.px-cuerpo.px-solo{display:block;max-width:640px}

/* ── la escena: el documento adaptándose ── */
.px-escena{display:grid;gap:18px;min-width:0}
.px-esc-cab{display:flex;align-items:flex-start;gap:14px;justify-content:space-between}
.px-esc-doc{min-width:0;display:grid;gap:2px}
.px-esc-doc small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#665F67);font-weight:600}
.px-esc-doc b{font-family:Sora,sans-serif;font-size:clamp(18px,2.2vw,24px);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-esc-doc span{font-size:14px;color:#4F4850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-pill{flex:none;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;background:var(--surface,#F4F0F4);color:#4F4850;display:inline-flex;align-items:center;gap:7px}
.px-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.px-pill.marcha{background:#FCF5FD;color:#9600A8}
.px-pill.marcha::before{animation:px-late 1.2s ease-in-out infinite}
.px-pill.ok{background:#DBFFF0;color:#00624A}
.px-pill.listo{background:#EFF6FF;color:#0055A6}
.px-pill.espera{background:#FFF3E6;color:#7A4B00}
.px-pill.mal{background:#FFF1F4;color:#AB0056}
@keyframes px-late{50%{opacity:.25}}
.px-hojas{position:relative;height:clamp(260px,46vh,470px);border-radius:16px;background:linear-gradient(180deg,#F4F0F4,#EFE8F1);overflow:hidden;display:grid;place-items:center}
.px-hoja{position:absolute;background:#fff;border-radius:4px;box-shadow:0 14px 34px -16px rgba(28,20,29,.45);max-height:88%;width:auto;max-width:62%}
.px-hoja.h0{z-index:3;transform:rotate(-1.5deg)}
.px-hoja.h1{z-index:2;transform:translateX(30%) rotate(5deg) scale(.82);opacity:.9}
.px-hoja.h2{z-index:1;transform:translateX(-30%) rotate(-7deg) scale(.78);opacity:.8}
.px-hoja-vacia{width:min(260px,58%);aspect-ratio:1/1.32;padding:26px 22px;display:grid;gap:10px;align-content:start}
.px-hoja-vacia span{font-family:Sora,sans-serif;font-weight:700;font-size:13px;color:#9600A8;background:#FCF5FD;border-radius:6px;padding:3px 8px;justify-self:start}
.px-hoja-vacia i{height:7px;border-radius:4px;background:#E7E1E8}
.px-hoja-vacia i:nth-child(3n){width:70%}
.px-luz{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0}
.px-hojas.escaneando .px-luz{opacity:1;background:linear-gradient(180deg,transparent 0%,rgba(196,38,217,0) 40%,rgba(196,38,217,.18) 49%,rgba(1,119,227,.28) 50%,rgba(196,38,217,.18) 51%,transparent 60%);background-size:100% 220%;animation:px-lee 2.6s ease-in-out infinite}
@keyframes px-lee{0%{background-position:0 100%}100%{background-position:0 -20%}}
.px-esc-msg{font-size:17px;color:#2E2730;max-width:62ch}
.px-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.px-chips li{background:#fff;border:1px solid var(--line,#DED6E1);border-radius:999px;padding:5px 12px;font-size:14px;color:#4F4850}
.px-acts{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:280px;overflow:auto}
.px-acts li{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff;border:1px solid var(--line,#DED6E1);border-radius:10px;padding:8px 12px;font-size:14px}
.px-acts li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-acts em{font-style:normal;font-size:12px;font-weight:600;color:var(--muted,#665F67);white-space:nowrap}
.px-acts em.marcha{color:#9600A8}
.px-acts em.ok{color:#00624A}
.px-acts em.mal{color:#AB0056}
.px-acts .px-mas{justify-content:center;color:var(--muted,#665F67);background:transparent;border-style:dashed}
.px-ruta{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;font-size:13px;color:var(--muted,#665F67)}
.px-ruta li{display:grid;gap:6px}
.px-ruta i{height:5px;border-radius:3px;background:var(--line,#DED6E1)}
.px-ruta li.hecho i{background:#008363}
.px-ruta li.ahora{color:var(--ink,#1C141D);font-weight:600}
.px-ruta li.ahora i{background:linear-gradient(90deg,var(--purple,#C426D9),var(--blue,#0177E3))}
/* las versiones */
.px-vers{display:flex;gap:8px;flex-wrap:wrap}
.px-vers button{border:1px solid var(--line,#DED6E1);background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;display:grid;gap:1px;text-align:left;min-width:120px}
.px-vers button b{font-family:Sora,sans-serif;font-size:14px}
.px-vers button small{font-size:12px;color:var(--muted,#665F67)}
.px-vers button[aria-pressed=true]{border-color:var(--purple,#C426D9);background:#FCF5FD;box-shadow:inset 0 0 0 1px var(--purple,#C426D9)}
.px-vers button.prep b::after{content:"";display:inline-block;width:9px;height:9px;margin-left:6px;border-radius:50%;border:2px solid #FBDCFF;border-top-color:var(--purple,#C426D9);animation:px-gira .9s linear infinite;vertical-align:-1px}
.px-mesa{background:var(--surface,#F4F0F4);border-radius:14px;padding:12px;min-height:360px;display:grid}
.px-mesa iframe{width:100%;height:min(70vh,760px);border:0;border-radius:6px;background:#fff}
.px-espera{display:grid;place-items:center;text-align:center;color:var(--muted,#665F67);gap:10px;padding:40px 10px}
.px-espera .esq{display:grid;gap:10px;width:min(320px,80%)}
.px-espera .esq i{height:9px;border-radius:5px;background:linear-gradient(90deg,#F4F0F4,#E1DCE1,#F4F0F4);background-size:200% 100%;animation:px-brillo 1.4s linear infinite}
@keyframes px-brillo{to{background-position:-200% 0}}
@keyframes px-gira{to{transform:rotate(360deg)}}

/* ── la tarjeta de al lado ── */
.px-lado{min-width:0}
@media(min-width:960px){.px-lado{position:sticky;top:84px}}
.px-tarjeta{background:#fff;border:1px solid var(--line,#DED6E1);border-radius:18px;padding:22px;display:grid;gap:14px;box-shadow:0 24px 50px -36px rgba(196,38,217,.55)}
.px-tarjeta h2{font-size:22px}
.px-paso{display:grid;gap:18px}
.px-paso h2{font-size:clamp(28px,4vw,38px)}
.px-migas{display:grid;gap:8px}
.px-migas p{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#665F67);font-weight:600}
.px-migas p b{color:#9600A8}
.px-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.px-seg i{height:4px;border-radius:3px;background:var(--line,#DED6E1)}
.px-seg i.si{background:var(--purple,#C426D9)}
.px-sub{color:var(--muted,#665F67);font-size:15px}
.px-campo{display:grid;gap:6px}
.px-campo label,.px-campo .px-et{font-size:14px;font-weight:600;color:#4F4850}
.px-campo input[type=text],.px-campo input[type=email],.px-campo input[type=password],.px-campo select{font:inherit;font-size:16px;padding:11px 13px;border:1px solid var(--line,#DED6E1);border-radius:10px;background:#fff;color:var(--ink,#1C141D);width:100%}
.px-campo input:focus,.px-campo select:focus{outline:3px solid #F7BCFF;border-color:var(--purple,#C426D9)}
.px-sinmarco{border:0;padding:0;margin:0}
.px-pista{font-size:13px;color:#008363}
.px-pista.gris{color:var(--muted,#665F67)}
.px-error{font-size:14px;color:#E10073;font-weight:500}
.px-error:empty{display:none}
.px-error a{text-decoration:underline;text-underline-offset:3px}
.px-dos{display:grid;gap:12px}
@media(min-width:480px){.px-dos{grid-template-columns:1fr 1fr}}
.px-clave{position:relative}
.px-clave input{padding-right:84px!important}
.px-clave button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:var(--surface,#F4F0F4);border-radius:8px;padding:5px 10px;font-size:13px;cursor:pointer}
.px-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#4F4850;cursor:pointer}
.px-check input{width:20px;height:20px;accent-color:var(--purple,#C426D9);margin-top:2px;flex:none}
.px-check a{color:#9600A8;text-decoration:underline;text-underline-offset:3px}
.px-btn{border:0;border-radius:10px;min-height:50px;padding:12px 20px;font-weight:600;font-size:16px;cursor:pointer;background:var(--purple,#C426D9);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;text-decoration:none}
.px-btn:hover{background:#A81EBB}
.px-btn[disabled]{opacity:.6;cursor:progress}
.px-btn.sec{background:#fff;color:var(--ink,#1C141D);border:1px solid var(--line,#DED6E1)}
.px-btn.sec:hover{background:var(--surface,#F4F0F4)}
.px-enlace{background:none;border:0;padding:0;color:#9600A8;cursor:pointer;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.px-nota{font-size:14px;color:var(--muted,#665F67)}
.px-cinta{display:inline-flex;gap:8px;align-items:center;background:#FFF3E6;color:#7A4B00;border:1px solid #FFE3C3;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600;justify-self:start}
.px-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border:1px solid var(--line,#DED6E1);border-radius:10px;background:#fff;font-size:15px}
.px-check.px-fila{justify-content:flex-start;align-items:center}
.px-check.px-fila input{margin-top:0}
.px-cont{display:flex;align-items:center;gap:4px}
.px-cont button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line,#DED6E1);background:var(--surface,#F4F0F4);cursor:pointer;font-size:18px;line-height:1}
.px-cont output{min-width:28px;text-align:center;font-family:Sora,sans-serif;font-weight:600;font-variant-numeric:tabular-nums}
.px-difs,.px-etapas2{display:grid;gap:8px}
.px-etapas2{grid-template-columns:1fr 1fr}
.px-aviso{border-radius:12px;padding:12px 14px;font-size:14px;display:grid;gap:8px}
.px-aviso.am{background:#FFF3E6;border:1px solid #FFE3C3;color:#4B2C00}
.px-aviso.suave{background:#EFF6FF;border:1px solid #D9EAFF;color:#002E5C}
.px-aviso .px-acc{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.px-reparto{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.px-reparto li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:14px}
.px-reparto .nv{font-family:Sora,sans-serif;font-weight:600;font-size:12px;background:#FCF5FD;color:#770086;border-radius:6px;padding:2px 7px;white-space:nowrap;align-self:start}
/* FRINA: el mismo dibujo que en la app (barra, enunciado, cinco cajas, «No lo sé») */
.px-ftop{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--muted,#665F67)}
.px-ftop b{color:var(--ink,#1C141D);font-weight:600}
.px-barra{height:6px;border-radius:4px;background:var(--surface,#F4F0F4);overflow:hidden}
.px-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--purple,#C426D9),var(--blue,#0177E3));border-radius:4px;transition:width .3s}
.px-preg{font-size:17px;font-weight:500;line-height:1.4;min-height:3.2em}
.px-cajas{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.px-cajas button{border:1.5px solid var(--line,#DED6E1);background:var(--surface,#F4F0F4);border-radius:10px;min-height:54px;padding:6px 3px;cursor:pointer;font-family:Sora,sans-serif;font-weight:600;font-size:17px}
.px-cajas.palabras button{font-family:Lexend,sans-serif;font-size:12px;font-weight:600;line-height:1.2}
.px-cajas button:hover{border-color:var(--purple,#C426D9);background:#FCF5FD}
.px-cajas button.elegida{background:var(--purple,#C426D9);border-color:var(--purple,#C426D9);color:#fff}
.px-ext{display:flex;justify-content:space-between;font-size:13px;color:var(--muted,#665F67);margin-top:-6px}
.px-fpie{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.px-nolose{border:1px solid var(--line,#DED6E1);background:#fff;border-radius:999px;padding:6px 14px;font-size:14px;cursor:pointer}
/* subir (entrando directamente en /empezar) */
.px-zona{display:grid;place-items:center;text-align:center;gap:8px;padding:40px 18px;border:2px dashed var(--purple,#C426D9);border-radius:12px;background:#FCF5FD;cursor:pointer}
.px-zona.encima{background:#FBDCFF}
.px-zona .px-flecha{width:46px;height:46px;border-radius:12px;background:var(--purple,#C426D9);color:#fff;display:grid;place-items:center;font-size:24px}
.px-zona strong{font-size:18px}
.px-zona small{color:var(--muted,#665F67)}

/* ── rediseño de la tarde del 19/10 (Pau): el documento y sus actividades en el centro ── */
.px-mesa2{display:grid;gap:14px;min-width:0}
@media(min-width:1100px){.px-mesa2.con-lista{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}.px-mesa2.con-lista .px-hojas{height:clamp(260px,52vh,460px)}}
.px-acts-caja{background:#fff;border:1px solid var(--line,#DED6E1);border-radius:16px;padding:12px;display:grid;gap:8px;min-width:0}
.px-acts-tit{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#665F67);font-weight:600;display:flex;justify-content:space-between;padding:0 4px}
.px-acts-tit b{color:var(--ink,#1C141D);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.px-acts{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:min(52vh,460px);overflow:auto}
.px-acts li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;border:0;background:transparent;border-radius:10px;padding:7px 8px;font-size:14px;transition:background .3s}
.px-acts li>i{width:18px;height:18px;border-radius:50%;border:2px solid var(--line,#DED6E1);display:grid;place-items:center;flex:none}
.px-acts li.marcha{background:#FCF5FD}
.px-acts li.marcha>i{border-color:#FBDCFF;border-top-color:var(--purple,#C426D9);animation:px-gira .9s linear infinite}
.px-acts li.ok>i{border-color:#008363;background:#008363}
.px-acts li.ok>i::after{content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.px-acts li.mal>i{border-color:#E10073;background:#FFF1F4}
.px-acts li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:grid}
.px-acts li span small{font-size:11px;color:var(--muted,#665F67);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.px-acts li em{font-style:normal;font-size:12px;font-weight:600;color:var(--muted,#665F67);white-space:nowrap}
.px-acts li.marcha em{color:#9600A8}
.px-acts li.ok em{color:#00624A}
.px-acts li.mal em{color:#AB0056}
.px-acts-buscando{display:grid;gap:8px;padding:6px 4px 10px}
.px-acts-buscando i{height:30px;border-radius:9px;background:linear-gradient(90deg,#F4F0F4,#E9E3EA,#F4F0F4);background-size:200% 100%;animation:px-brillo 1.4s linear infinite}
.px-acts-buscando span{font-size:14px;color:var(--muted,#665F67)}
.px-log{list-style:none;margin:0;padding:10px 14px;display:grid;gap:3px;background:#1C141D;color:#CFC6D1;border-radius:12px;font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;min-width:0}
.px-log li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7}
.px-log li.nuevo{color:#7BF2C8;opacity:1;animation:px-entra .35s ease-out}
@keyframes px-entra{from{transform:translateY(4px);opacity:0}}
.px-vers2{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.px-ver{border:1px solid var(--line,#DED6E1);background:#fff;border-radius:12px;padding:10px 12px;display:grid;gap:2px}
.px-ver b{font-family:Sora,sans-serif;font-size:14px}
.px-ver small{font-size:12px;color:var(--muted,#665F67);min-height:1.2em}
.px-ver span{font-size:12px;font-weight:600;color:var(--muted,#665F67);display:inline-flex;gap:5px;align-items:center}
.px-ver.lista span{color:#00624A}
.px-ver svg,.px-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.px-ruta{grid-template-columns:repeat(5,1fr)}
.px-plan{display:grid;gap:10px}
.px-plan .px-ver span{color:#7A4B00}
.px-plan .px-btn{justify-self:start;width:auto}
/* ¿para quién? */
.px-para{display:grid;gap:10px}
.px-para button{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;text-align:left;border:1.5px solid var(--line,#DED6E1);background:#fff;border-radius:14px;padding:14px 16px;cursor:pointer;transition:border-color .2s,background .2s}
.px-para button:hover{border-color:var(--purple,#C426D9);background:#FCF5FD}
.px-para b{display:block;font-family:Sora,sans-serif;font-size:17px}
.px-para small{display:block;font-size:14px;color:var(--muted,#665F67);line-height:1.35;margin-top:2px}
.px-ico{width:44px;height:44px;border-radius:12px;background:#FCF5FD;color:#9600A8;display:grid;place-items:center}
.px-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.px-volver{justify-self:center;font-size:14px}
.px-chips2{display:flex;flex-wrap:wrap;gap:8px}
.px-chips2 label{border:1.5px solid var(--line,#DED6E1);border-radius:999px;padding:7px 14px;font-size:15px;cursor:pointer;background:#fff;user-select:none}
.px-chips2 label.si{background:var(--purple,#C426D9);border-color:var(--purple,#C426D9);color:#fff}
.px-chips2 input{position:absolute;opacity:0;pointer-events:none}
.px-chips2 label:has(input:focus-visible){outline:3px solid #0072DB;outline-offset:2px}
.px-sino{display:flex;gap:8px}
.px-sino label{flex:1;display:flex;gap:8px;align-items:center;justify-content:center;border:1.5px solid var(--line,#DED6E1);border-radius:10px;padding:10px;cursor:pointer;font-size:15px}
.px-sino label:has(input:checked){border-color:var(--purple,#C426D9);background:#FCF5FD;font-weight:600}
.px-sino input{accent-color:var(--purple,#C426D9)}
.px-lengua{gap:8px;flex-wrap:wrap}
.px-lengua select{flex:1 1 140px;font:inherit;font-size:15px;padding:7px 9px;border:1px solid var(--line,#DED6E1);border-radius:8px;background:#fff;min-width:0}
.px-otra{font:inherit;font-size:15px;padding:7px 9px;border:1px solid var(--line,#DED6E1);border-radius:8px;flex:1 1 100px;min-width:0;width:100%}
.px-anadir{justify-self:start;font-size:14px}
.px-cinta.ok{background:#DBFFF0;color:#00624A;border-color:#B5F5DC}
.px-resumen{list-style:none;margin:0;padding:12px 14px;background:var(--surface,#F4F0F4);border-radius:12px;display:grid;gap:4px;font-size:14px;color:#4F4850}
.px-resumen li:first-child{font-weight:600;color:var(--ink,#1C141D)}
.px-acc2{display:grid;gap:10px;justify-items:center}
/* la ventanita de «para verla, crea tu cuenta» */
.px-velo{position:fixed;inset:0;z-index:10;background:rgba(28,20,29,.42);backdrop-filter:blur(3px);animation:px-aparece .25s ease-out}
.px-ventana{position:fixed;z-index:11;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;background:#fff;border-radius:20px;padding:26px 24px 22px;display:grid;gap:14px;box-shadow:0 40px 80px -30px rgba(28,20,29,.6);animation:px-sube .3s ease-out}
.px-ventana h2{font-size:24px}
.px-vform{display:grid;gap:14px}
.px-v-x{position:absolute;right:12px;top:10px;border:0;background:none;font-size:26px;line-height:1;color:var(--muted,#665F67);cursor:pointer;width:36px;height:36px;border-radius:10px}
.px-v-x:hover{background:var(--surface,#F4F0F4)}
/* los pasos de la ventanita: cuenta → centro → entrar en Nubo (Pau, 20/10: todo dentro de ella) */
.px-vpasos{list-style:none;margin:0 36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:12px;color:var(--muted,#665F67)}
.px-vpasos li{display:grid;gap:6px;font-weight:600}
.px-vpasos i{height:4px;border-radius:3px;background:var(--line,#DED6E1)}
.px-vpasos li.hecho{color:#00624A}
.px-vpasos li.hecho i{background:#008363}
.px-vpasos li.ahora{color:var(--ink,#1C141D)}
.px-vpasos li.ahora i{background:linear-gradient(90deg,var(--purple,#C426D9),var(--blue,#0177E3))}
.px-abriendo{display:flex;align-items:center;gap:10px;font-weight:600;color:#9600A8;padding:6px 0}
.px-abriendo i{width:18px;height:18px;border-radius:50%;border:2px solid #FBDCFF;border-top-color:var(--purple,#C426D9);animation:px-gira .9s linear infinite}
@keyframes px-aparece{from{opacity:0}}
@keyframes px-sube{from{opacity:0;transform:translate(-50%,-46%)}}
@media(max-width:959px){.px-acts{max-height:260px}.px-ruta{font-size:11px}
  /* en el móvil, la pregunta justo debajo de sus páginas: no hay que bajar para contestar */
  .px-escena,.px-mesa2{display:contents}
  .px-esc-cab{order:1}.px-hojas{order:2}.px-lado{order:3}.px-log{order:4}.px-acts-caja{order:5}.px-esc-msg{order:6}.px-chips,.px-vers2,.px-escena>.px-btn{order:7}.px-ruta{order:8}
}
/* en el móvil: la escena arriba, más baja; la tarjeta debajo */
@media(max-width:959px){
  .px-hojas{height:clamp(200px,32vh,300px)}
  .px-esc-msg{font-size:15px}
  .px-acts{max-height:180px}
  .px-mesa iframe{height:60vh}
  .px-ruta{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.px *,.px *::before,.px *::after{animation:none!important;transition:none!important}}