/* ═══════════════════════════════════════════════════════════
   Demo «proyecto» — De la idea al carrito (+ modo contratista)
   Todo con alcance #demo-proyecto; prefijos pj- (app y panel) y
   pjo- (portal de contratistas). Keyframes con prefijo pj-.
   Composición: maqueta (celular o navegador) + panel oscuro
   «Cómo lo calculó la IA». Responsive con @container demo:
     < 560 px   apilado (maqueta arriba, panel abajo)
     560–1099   lado a lado, celular a 288 px
     ≥ 1100     lado a lado, celular a 304 px, centrado
   ═══════════════════════════════════════════════════════════ */

#demo-proyecto .pj {
    --pj-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    --pj-phone-w: 288px;
    --pj-dev-h: calc(var(--pj-phone-w) * 868 / 414);
    --pj-panel-h: 38.5rem;
    --pj-gap: 1rem;
    --pj-mint: #34D399;
    --pj-muted: #A3B8AC;
    --pj-soft: rgb(246 244 238 / 0.82);
    --pj-line: rgb(255 255 255 / 0.1);
    --pj-red: #F87171;
    position: relative;
}

/* ── Escenario: maqueta + panel ───────────────────────────── */
#demo-proyecto .pj-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--pj-dev-h) var(--pj-panel-h);
    grid-template-areas: "dev" "panel";
    gap: var(--pj-gap);
}
#demo-proyecto .pj-dev {
    grid-area: dev;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    transition: opacity 0.38s var(--pj-ease), transform 0.6s var(--pj-ease);
}
#demo-proyecto .pj-slot { display: flex; align-items: center; justify-content: center; }
#demo-proyecto .pj-slot--phone { width: var(--pj-phone-w); }
#demo-proyecto .pj-slot--browser { width: 100%; height: 100%; }
#demo-proyecto .pj[data-mode="casa"] .pj-slot--browser,
#demo-proyecto .pj[data-mode="obra"] .pj-slot--phone { display: none; }
#demo-proyecto .pj-panel {
    grid-area: panel;
    transition: opacity 0.38s var(--pj-ease), transform 0.6s var(--pj-ease);
}
#demo-proyecto .pj.pj-swap .pj-dev,
#demo-proyecto .pj.pj-swap .pj-panel { opacity: 0; transform: scale(0.985); }

@container demo (min-width: 560px) {
    #demo-proyecto .pj { --pj-gap: 1.25rem; --pj-panel-h: var(--pj-dev-h); }
    #demo-proyecto .pj-stage {
        grid-template-columns: var(--pj-phone-w) minmax(0, 1fr);
        grid-template-rows: var(--pj-dev-h);
        grid-template-areas: "dev panel";
    }
    #demo-proyecto .pj[data-mode="obra"] .pj-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container demo (min-width: 760px) {
    #demo-proyecto .pj { --pj-gap: 1.75rem; }
    #demo-proyecto .pj[data-mode="obra"] .pj-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 1.5rem; }
}
@container demo (min-width: 1100px) {
    #demo-proyecto .pj { --pj-phone-w: 304px; --pj-gap: 3rem; }
    #demo-proyecto .pj-stage { grid-template-columns: var(--pj-phone-w) minmax(0, 46rem); justify-content: center; }
    #demo-proyecto .pj[data-mode="obra"] .pj-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); gap: 2rem; }
}

/* ── App simulada (pantalla 390 × 844) ────────────────────── */
#demo-proyecto .pj-app {
    position: absolute;
    inset: 0;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
    background: var(--ui-bg-2);
    color: var(--ui-ink);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
#demo-proyecto .pj-app svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#demo-proyecto .pj-app svg.f { fill: currentColor; stroke: none; }
#demo-proyecto .pj-app svg.bat { fill: none; stroke: none; }
#demo-proyecto .pj-app .pressed { scale: 0.94; }
#demo-proyecto .pj-app .pj-press-t { transition: scale 0.18s var(--pj-ease), background-color 0.3s, color 0.3s, box-shadow 0.3s, border-color 0.3s; }
#demo-proyecto .pj-app .dv-status { position: absolute; top: 0; left: 0; right: 0; z-index: 30; padding: 16px 30px 0 40px; font-size: 16px; }
#demo-proyecto .pj-app .dv-status-icons svg { width: auto; height: 12px; }
#demo-proyecto .pj-app .dv-status-icons svg.bat { height: 13px; }

#demo-proyecto .pj-appbar {
    position: absolute;
    z-index: 25;
    top: 54px;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--ui-bg-2);
}
#demo-proyecto .pj-appbar .esc-logo { font-size: 20px; gap: 10px; }
#demo-proyecto .pj-app .esc-logo-mark svg { width: 18px; height: 18px; }
#demo-proyecto .pj-cart {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--ui-bg);
    color: var(--ui-ink);
    box-shadow: 0 1px 2px rgb(14 26 20 / 0.08), 0 0 0 1px rgb(14 26 20 / 0.06);
}
#demo-proyecto .pj-cart svg { width: 22px; height: 22px; }
#demo-proyecto .pj-cart .badge {
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    min-width: 25px;
    height: 25px;
    padding: 0 6px;
    border-radius: 9999px;
    background: var(--esc-500);
    color: var(--ui-ink);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 0 0 3px var(--ui-bg-2);
    transform: scale(0);
    transition: transform 0.55s var(--pj-ease);
}
#demo-proyecto .pj-cart.has .badge { transform: scale(1); }

#demo-proyecto .pj-screen {
    position: absolute;
    z-index: 1;
    top: 114px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 20px;
    transition: transform 0.7s var(--pj-ease), opacity 0.55s var(--pj-ease);
}
#demo-proyecto .pj-screen.off { transform: translateX(104%); opacity: 0; }
#demo-proyecto .pj-screen.gone { transform: translateX(-32%); opacity: 0; }

#demo-proyecto .pj-pop { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--pj-ease), transform 0.6s var(--pj-ease); }
#demo-proyecto .pj-pop.in { opacity: 1; transform: none; }

/* Indicador de toque (dedo del usuario) */
#demo-proyecto .pj-tap {
    position: absolute;
    z-index: 40;
    left: 50%;
    top: 50%;
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    border-radius: 9999px;
    background: rgb(14 26 20 / 0.16);
    border: 3px solid rgb(255 255 255 / 0.96);
    box-shadow: 0 8px 22px rgb(6 35 26 / 0.35), 0 0 0 1px rgb(14 26 20 / 0.12);
    opacity: 0;
    scale: 1.45;
    pointer-events: none;
    transition: opacity 0.28s, scale 0.3s var(--pj-ease), background-color 0.2s, left 0.55s var(--pj-ease), top 0.55s var(--pj-ease);
}
#demo-proyecto .pj-tap.show { opacity: 1; scale: 1; }
#demo-proyecto .pj-tap.press { scale: 0.78; background: rgb(242 153 74 / 0.42); }
#demo-proyecto .pj-tap.jump,
#demo-proyecto .pj-tap.drag { transition: opacity 0.28s, scale 0.3s var(--pj-ease), background-color 0.2s; }

/* Pantalla 1 · inicio */
#demo-proyecto .pj-hello { margin-top: 12px; font-size: 18px; font-weight: 500; color: var(--ui-muted); }
#demo-proyecto .pj-h1 { margin-top: 4px; font-size: 31px; line-height: 1.1; font-weight: 650; letter-spacing: -0.04em; color: var(--ui-ink); text-wrap: balance; }
#demo-proyecto .pj-ai-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 7px 14px 7px 10px;
    border-radius: 9999px;
    border: 1px solid var(--ai-line);
    background: var(--ai-tint);
    color: var(--ai-ink);
    font-size: 16px;
    font-weight: 600;
}
#demo-proyecto .pj-ai-note svg { width: 18px; height: 18px; }
#demo-proyecto .pj-glabel { margin-top: 22px; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-muted); }
#demo-proyecto .pj-proj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
#demo-proyecto .pj-proj {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 114px;
    padding: 15px 16px;
    border-radius: 22px;
    background: var(--ui-bg);
    box-shadow: 0 1px 2px rgb(14 26 20 / 0.05), 0 0 0 1px rgb(14 26 20 / 0.05);
    transition: box-shadow 0.45s var(--pj-ease), transform 0.45s var(--pj-ease), background-color 0.45s;
}
#demo-proyecto .pj-proj i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ui-bg-2); color: #33433B; transition: background-color 0.45s, color 0.45s; }
#demo-proyecto .pj-proj i svg { width: 22px; height: 22px; }
#demo-proyecto .pj-proj b { font-size: 17px; line-height: 1.2; font-weight: 600; color: var(--ui-ink); }
#demo-proyecto .pj-proj.hint { background: #FFFAF5; transform: translateY(-3px); box-shadow: 0 0 0 2.5px var(--esc-500), 0 14px 30px -12px rgb(242 153 74 / 0.6); }
#demo-proyecto .pj-proj.hint i { background: var(--esc-500); color: var(--ui-ink); }

/* Caja de texto */
#demo-proyecto .pj-composer {
    position: absolute;
    z-index: 5;
    left: 16px;
    right: 16px;
    bottom: 30px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 6px 6px 6px 18px;
    border-radius: 28px;
    background: var(--ui-bg);
    box-shadow: 0 12px 30px -14px rgb(6 35 26 / 0.28), 0 0 0 1px rgb(14 26 20 / 0.08);
    transition: box-shadow 0.3s;
}
#demo-proyecto .pj-composer.focus { box-shadow: 0 12px 30px -14px rgb(6 35 26 / 0.28), 0 0 0 2px var(--esc-500); }
#demo-proyecto .pj-field { flex: 1; display: flex; align-items: center; min-height: 44px; padding: 9px 0; font-size: 18px; line-height: 1.3; color: var(--ui-ink); }
#demo-proyecto .pj-ph { color: var(--ui-muted); }
#demo-proyecto .pj-field.has .pj-ph { display: none; }
#demo-proyecto .pj-mic,
#demo-proyecto .pj-send { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9999px; }
#demo-proyecto .pj-mic { color: var(--ui-muted); }
#demo-proyecto .pj-send { background: var(--ui-line); color: #fff; }
#demo-proyecto .pj-composer.ready .pj-send { background: var(--esc-500); color: var(--ui-ink); box-shadow: 0 6px 16px -6px rgb(242 153 74 / 0.8); }
#demo-proyecto .pj-send svg,
#demo-proyecto .pj-mic svg { width: 22px; height: 22px; stroke-width: 2.4; }

/* Pantalla 2 · preguntas */
#demo-proyecto .pj-chat-head { display: flex; align-items: center; gap: 10px; height: 40px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
#demo-proyecto .pj-chat-head svg { width: 22px; height: 22px; color: var(--ui-muted); }
#demo-proyecto .pj-ia { padding: 4px 9px; border-radius: 8px; border: 1px solid var(--ai-line); background: var(--ai-tint); color: var(--ai-ink); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; line-height: 1; }
#demo-proyecto .pj-thread { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
#demo-proyecto .pj-msg { max-width: 86%; padding: 12px 16px; border-radius: 20px; font-size: 17.5px; line-height: 1.38; }
#demo-proyecto .pj-msg.me { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--esc-500); color: var(--ui-ink); font-weight: 500; }
#demo-proyecto .pj-msg.bot { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--ui-bg); color: var(--ui-ink); box-shadow: 0 1px 2px rgb(14 26 20 / 0.05), 0 0 0 1px rgb(14 26 20 / 0.05); }
#demo-proyecto .pj-msg.typing { display: none; padding: 16px 18px; color: var(--ui-muted); }
#demo-proyecto .pj-msg.typing.in { display: flex; }
#demo-proyecto .pj-msg b { font-weight: 650; }
#demo-proyecto .pj-q { align-self: stretch; padding: 14px 16px 16px; border-radius: 20px; background: var(--ui-bg); box-shadow: 0 1px 2px rgb(14 26 20 / 0.05), 0 0 0 1px rgb(14 26 20 / 0.05); }
#demo-proyecto .pj-q p { margin-bottom: 12px; font-size: 17.5px; font-weight: 650; }
#demo-proyecto .pj-opts { display: flex; flex-wrap: wrap; gap: 7px; }
#demo-proyecto .pj-opt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 14px;
    border-radius: 9999px;
    border: 1.5px solid var(--ui-line);
    background: var(--ui-bg-2);
    font-size: 16px;
    font-weight: 600;
    color: #33433B;
}
#demo-proyecto .pj-opt i { width: 16px; height: 16px; border-radius: 9999px; box-shadow: inset 0 0 0 1px rgb(14 26 20 / 0.18); }
#demo-proyecto .pj-opt.sel { border-color: var(--esc-500); background: var(--esc-500); color: var(--ui-ink); box-shadow: 0 8px 20px -8px rgb(242 153 74 / 0.75); }

/* Pantalla 3 · lista de materiales */
#demo-proyecto .pj-lhead { display: flex; align-items: center; gap: 8px; height: 40px; }
#demo-proyecto .pj-lhead svg { width: 22px; height: 22px; color: var(--ui-muted); }
#demo-proyecto .pj-lhead b { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
#demo-proyecto .pj-lhead span { margin-left: auto; font-size: 16px; font-weight: 600; color: var(--ui-muted); }
#demo-proyecto .pj-tags { display: flex; gap: 6px; height: 30px; margin-top: 6px; }
#demo-proyecto .pj-tag { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 9px; background: #ECE9E1; color: var(--ui-ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
#demo-proyecto .pj-tag.ai { background: var(--ai-tint); color: var(--ai-ink); box-shadow: inset 0 0 0 1px var(--ai-line); }
#demo-proyecto .pj-list { margin-top: 12px; padding: 2px 14px; border-radius: 20px; background: var(--ui-bg); box-shadow: 0 1px 2px rgb(14 26 20 / 0.05), 0 0 0 1px rgb(14 26 20 / 0.05); }
#demo-proyecto .pj-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 58px;
    max-height: 58px;
    margin: 0 -14px;
    padding: 0 14px;
    overflow: hidden;
    border-bottom: 1px solid #EFECE4;
    transition: max-height 0.55s var(--pj-ease), opacity 0.45s, background-color 0.35s, box-shadow 0.35s, border-color 0.35s;
}
#demo-proyecto .pj-row:last-child { border-bottom-color: transparent; }
#demo-proyecto .pj-row > .pj-thumb,
#demo-proyecto .pj-row > .pj-row-t,
#demo-proyecto .pj-row > .pj-row-p { opacity: 0; transform: translateX(10px); transition: opacity 0.45s var(--pj-ease), transform 0.55s var(--pj-ease); }
#demo-proyecto .pj-row.in > .pj-thumb,
#demo-proyecto .pj-row.in > .pj-row-t,
#demo-proyecto .pj-row.in > .pj-row-p { opacity: 1; transform: none; }
#demo-proyecto .pj-skl { position: absolute; left: 14px; right: 14px; top: 9px; bottom: 9px; display: flex; align-items: center; gap: 12px; transition: opacity 0.3s; }
#demo-proyecto .pj-row.in .pj-skl { opacity: 0; }
#demo-proyecto .pj-skl i,
#demo-proyecto .pj-skl em { display: block; border-radius: 10px; }
#demo-proyecto .pj-skl i { flex: none; width: 40px; height: 40px; }
#demo-proyecto .pj-skl em { flex: 1; height: 14px; margin-right: 70px; }
#demo-proyecto .pj-thumb { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c); color: var(--k); }
#demo-proyecto .pj-thumb svg { width: 22px; height: 22px; }
#demo-proyecto .pj-row-t { flex: 1; min-width: 0; }
#demo-proyecto .pj-row-t b { display: block; overflow: hidden; font-size: 16.5px; line-height: 1.25; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
#demo-proyecto .pj-row-t small { display: block; overflow: hidden; font-size: 15px; line-height: 1.3; color: var(--ui-muted); white-space: nowrap; text-overflow: ellipsis; }
#demo-proyecto .pj-row-p { flex: none; font-size: 16.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
#demo-proyecto .pj-row.flash { background: var(--esc-tint); }
#demo-proyecto .pj-row.flag { background: var(--esc-tint); box-shadow: inset 3px 0 0 var(--esc-500); }
#demo-proyecto .pj-row.strike .pj-row-t b,
#demo-proyecto .pj-row.strike .pj-row-p { text-decoration: line-through; text-decoration-color: var(--esc-600); text-decoration-thickness: 2px; }
#demo-proyecto .pj-row.strike > .pj-thumb,
#demo-proyecto .pj-row.strike > .pj-row-t,
#demo-proyecto .pj-row.strike > .pj-row-p { opacity: 0.45; }
#demo-proyecto .pj-row.gone { max-height: 0; opacity: 0; border-bottom-color: transparent; }

#demo-proyecto .pj-convo { position: absolute; left: 20px; right: 20px; bottom: 170px; display: flex; flex-direction: column; gap: 8px; }
#demo-proyecto .pj-convo .pj-msg { padding: 10px 14px; font-size: 16.5px; }
#demo-proyecto .pj-xsell { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-top: 8px; padding: 0 12px; border-radius: 9999px; background: var(--esc-tint); color: var(--esc-700); font-size: 15px; font-weight: 650; }

#demo-proyecto .pj-quick {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 166px;
    display: flex;
    gap: 8px;
    padding: 0 16px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
    transition: opacity 0.4s, transform 0.5s var(--pj-ease);
}
#demo-proyecto .pj-quick.hide { opacity: 0; transform: translateY(10px); }
#demo-proyecto .pj-qr {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border-radius: 9999px;
    border: 1.5px solid var(--ui-line);
    background: var(--ui-bg);
    color: #33433B;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}
#demo-proyecto .pj-qr svg { width: 18px; height: 18px; }
#demo-proyecto .pj-qr.hot { border-color: #F5C9A2; background: #FEF6EF; color: var(--esc-700); }
#demo-proyecto .pj-qr.set { border-color: rgb(16 185 129 / 0.4); background: var(--ok-tint); color: var(--ok-ink); }
#demo-proyecto .pj-composer.sm { bottom: 106px; }
#demo-proyecto .pj-composer.sm .pj-field { min-height: 40px; padding: 7px 0; font-size: 17px; }
#demo-proyecto .pj-composer.sm .pj-send { width: 40px; height: 40px; }

#demo-proyecto .pj-totalbar {
    position: absolute;
    z-index: 6;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 96px;
    padding: 12px 16px 28px 20px;
    border-radius: 26px 26px 0 0;
    background: var(--ui-bg);
    box-shadow: 0 -10px 30px -16px rgb(6 35 26 / 0.25), 0 -1px 0 rgb(14 26 20 / 0.06);
}
#demo-proyecto .pj-tl small { display: block; font-size: 15px; line-height: 1.2; font-weight: 500; color: var(--ui-muted); }
#demo-proyecto .pj-tl b { display: block; font-size: 25px; line-height: 1.15; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
#demo-proyecto .pj-add {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 18px;
    border-radius: 9999px;
    background: var(--esc-500);
    color: var(--ui-ink);
    font-size: 16.5px;
    font-weight: 650;
    box-shadow: 0 10px 22px -10px rgb(242 153 74 / 0.9);
}
#demo-proyecto .pj-add svg { width: 20px; height: 20px; stroke-width: 2.4; }

/* Hoja inferior: presupuesto */
#demo-proyecto .pj-scrim { position: absolute; z-index: 9; left: 0; right: 0; top: -114px; bottom: 0; background: rgb(6 35 26 / 0.42); opacity: 0; pointer-events: none; transition: opacity 0.5s; }
#demo-proyecto .pj-scrim.on { opacity: 1; }
#demo-proyecto .pj-sheet {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
    height: 612px;
    padding: 12px 20px 30px;
    border-radius: 30px 30px 0 0;
    background: var(--ui-bg);
    box-shadow: 0 -20px 50px -20px rgb(6 35 26 / 0.45);
    transform: translateY(102%);
    transition: transform 0.65s var(--pj-ease);
}
#demo-proyecto .pj-sheet.open { transform: none; }
#demo-proyecto .pj-handle { display: block; width: 44px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--ui-line); }
#demo-proyecto .pj-sheet-t { display: block; font-size: 21px; line-height: 1.2; font-weight: 650; letter-spacing: -0.03em; }
#demo-proyecto .pj-bud { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; }
#demo-proyecto .pj-bud small { font-size: 16px; font-weight: 500; color: var(--ui-muted); }
#demo-proyecto .pj-bud b { font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
#demo-proyecto .pj-bud b.muted { font-size: 24px; font-weight: 600; color: var(--ui-muted); }
#demo-proyecto .pj-slider { position: relative; height: 40px; margin-top: 12px; }
#demo-proyecto .pj-slider .trk { position: absolute; left: 0; right: 0; top: 17px; height: 6px; border-radius: 3px; background: var(--ui-line); }
#demo-proyecto .pj-slider .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 3px; background: linear-gradient(90deg, #F8C79A, var(--esc-500)); }
#demo-proyecto .pj-slider .mark { position: absolute; top: -8px; width: 3px; height: 22px; margin-left: -1.5px; border-radius: 2px; background: var(--ui-ink); }
#demo-proyecto .pj-slider .thumb { position: absolute; top: 6px; left: 100%; width: 28px; height: 28px; margin-left: -14px; border-radius: 9999px; background: var(--ui-bg); box-shadow: 0 0 0 3px var(--esc-500), 0 4px 12px rgb(6 35 26 / 0.3); }
#demo-proyecto .pj-slider-l { position: relative; height: 20px; font-size: 15px; font-weight: 500; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
#demo-proyecto .pj-slider-l span { position: absolute; top: 0; white-space: nowrap; }
#demo-proyecto .pj-slider-l .mk { transform: translateX(-50%); font-weight: 650; color: var(--ui-ink); transition: color 0.3s; }
#demo-proyecto .pj-slider-l .mk.over { color: var(--bad-500); }
#demo-proyecto .pj-opts-t { display: flex; align-items: center; gap: 8px; height: 22px; margin-top: 22px; font-size: 16px; font-weight: 650; color: var(--ai-ink); }
#demo-proyecto .pj-opts-t svg { width: 18px; height: 18px; }
#demo-proyecto .pj-opts-t .dm-typing i { width: 7px; height: 7px; }
#demo-proyecto .pj-options { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
#demo-proyecto .pj-optc { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 72px; padding: 12px 16px; border-radius: 18px; border: 1.5px solid var(--ui-line); background: var(--ui-bg); }
#demo-proyecto .pj-optc b { display: block; font-size: 17.5px; font-weight: 650; }
#demo-proyecto .pj-optc small { display: block; margin-top: 1px; font-size: 15px; color: var(--ui-muted); }
#demo-proyecto .pj-optc .pr { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#demo-proyecto .pj-optc .pr.over,
#demo-proyecto .pj-optc .pr.over small { color: var(--bad-500); }
#demo-proyecto .pj-optc.sel { border-color: var(--esc-500); background: #FEF6EF; box-shadow: 0 0 0 4px rgb(242 153 74 / 0.18); }
#demo-proyecto .pj-badge { position: absolute; top: -13px; left: 14px; display: flex; align-items: center; height: 25px; padding: 0 10px; border-radius: 9999px; background: var(--ok-ink); color: #fff; font-size: 15px; font-weight: 650; }
#demo-proyecto .pj-save { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--ok-tint); color: var(--ok-ink); font-size: 15px; font-weight: 650; }
#demo-proyecto .pj-apply { display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 18px; border-radius: 9999px; background: var(--forest-950, #06231A); color: #fff; font-size: 17px; font-weight: 650; }

/* Pantalla 4 · carrito */
#demo-proyecto .pj-okb { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding: 14px 16px; border-radius: 20px; background: var(--ok-tint); box-shadow: 0 0 0 1px rgb(16 185 129 / 0.35); }
#demo-proyecto .pj-okb .ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 9999px; background: var(--ok-500); color: #fff; }
#demo-proyecto .pj-okb .ic svg { width: 24px; height: 24px; stroke-width: 3; }
#demo-proyecto .pj-okb b { display: block; font-size: 18px; font-weight: 650; }
#demo-proyecto .pj-okb small { display: block; font-size: 15px; color: var(--ok-ink); }
#demo-proyecto .pj-ctot { margin-top: 12px; padding: 14px 18px; border-radius: 20px; background: var(--ui-bg); box-shadow: 0 1px 2px rgb(14 26 20 / 0.05), 0 0 0 1px rgb(14 26 20 / 0.05); }
#demo-proyecto .pj-ctot .r1 { display: flex; align-items: baseline; justify-content: space-between; }
#demo-proyecto .pj-ctot small { font-size: 15px; font-weight: 500; color: var(--ui-muted); }
#demo-proyecto .pj-ctot b { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
#demo-proyecto .pj-ctot .ok { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 15px; font-weight: 650; color: var(--ok-ink); white-space: nowrap; }
#demo-proyecto .pj-ctot .ok svg { width: 16px; height: 16px; stroke-width: 3; }
#demo-proyecto .pj-sec { margin-top: 16px; font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-muted); }
#demo-proyecto .pj-dlv { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 14px; border-radius: 18px; border: 1.5px solid var(--ui-line); background: var(--ui-bg); }
#demo-proyecto .pj-dlv .radio { flex: none; width: 22px; height: 22px; border-radius: 9999px; border: 2px solid #CFCABD; }
#demo-proyecto .pj-dlv.sel { border-color: var(--esc-500); background: #FEF6EF; }
#demo-proyecto .pj-dlv.sel .radio { border: 7px solid var(--esc-500); }
#demo-proyecto .pj-dlv .t { flex: 1; min-width: 0; }
#demo-proyecto .pj-dlv b,
#demo-proyecto .pj-inc b { display: block; font-size: 16.5px; font-weight: 650; }
#demo-proyecto .pj-dlv small,
#demo-proyecto .pj-inc small { display: block; font-size: 15px; color: var(--ui-muted); }
#demo-proyecto .pj-dlv .pr { font-size: 15.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
#demo-proyecto .pj-dlv .pr.free { color: var(--ok-ink); }
#demo-proyecto .pj-inc { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 14px; border-radius: 18px; background: var(--ui-bg); box-shadow: 0 1px 2px rgb(14 26 20 / 0.05), 0 0 0 1px rgb(14 26 20 / 0.05); }
#demo-proyecto .pj-inc .ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ai-tint); color: var(--ai-ink); }
#demo-proyecto .pj-inc .ic svg { width: 22px; height: 22px; }
#demo-proyecto .pj-confirm { position: absolute; left: 20px; right: 20px; bottom: 30px; display: flex; align-items: center; justify-content: center; height: 54px; border-radius: 9999px; background: var(--esc-500); color: var(--ui-ink); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 12px 24px -12px rgb(242 153 74 / 0.9); }

/* ── Panel «Cómo lo calculó la IA» (vidrio sobre oscuro) ──── */
#demo-proyecto .pj-panel {
    container: pjp / inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 1.65rem;
    border: 1px solid var(--pj-line);
    background: rgb(255 255 255 / 0.045);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 40px 80px -40px rgb(2 15 11 / 0.6);
    color: var(--on-dark, #F6F4EE);
}
#demo-proyecto .pj-panel-head {
    flex: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ic title" "ic state";
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
#demo-proyecto .pj-ai-ic {
    grid-area: ic;
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.8rem;
    border: 1px solid rgb(212 242 90 / 0.3);
    background: rgb(212 242 90 / 0.1);
    color: var(--lime, #D4F25A);
}
#demo-proyecto .pj-ai-ic svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
#demo-proyecto .pj-panel-title { grid-area: title; margin: 0; font-size: 1rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.03em; color: var(--paper, #F6F4EE); }
#demo-proyecto .pj-state {
    grid-area: state;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    height: 1.6rem;
    padding: 0 0.65rem;
    overflow: hidden;
    border-radius: 9999px;
    border: 1px solid var(--pj-line);
    background: rgb(255 255 255 / 0.05);
    color: var(--pj-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: color 0.4s, border-color 0.4s;
}
#demo-proyecto .pj-state i { flex: none; width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: var(--pj-muted); }
#demo-proyecto .pj-state.run { color: var(--lime, #D4F25A); border-color: rgb(212 242 90 / 0.35); }
#demo-proyecto .pj-state.run i { background: var(--lime, #D4F25A); animation: pj-pulse 1.1s ease-in-out infinite; }
#demo-proyecto .pj-state.done { color: var(--pj-mint); border-color: rgb(52 211 153 / 0.35); }
#demo-proyecto .pj-state.done i { background: var(--pj-mint); }

#demo-proyecto .pj-panel-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#demo-proyecto .pj-view {
    position: absolute;
    inset: 0;
    padding: 1rem 1rem 1.1rem;
    opacity: 0;
    transform: translateX(1.5rem);
    pointer-events: none;
    transition: opacity 0.5s var(--pj-ease), transform 0.65s var(--pj-ease);
}
#demo-proyecto .pj-view.in { opacity: 1; transform: none; }
#demo-proyecto .pj-view.out { transform: translateX(-1.5rem); }
#demo-proyecto .pj-vk { margin: 0; font-size: 0.68rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pj-muted); }
#demo-proyecto .pj-vk b { font-weight: 600; color: var(--lime, #D4F25A); font-variant-numeric: tabular-nums; }

/* Cita (lo que dijo el cliente) */
#demo-proyecto .pj-quote { margin: 0.7rem 0 0; font-size: 1.15rem; line-height: 1.35; font-weight: 500; letter-spacing: -0.03em; color: var(--paper, #F6F4EE); }
#demo-proyecto .pj-quote mark { margin: 0 1px; padding: 0 3px; border-radius: 6px; background: transparent; color: inherit; transition: background-color 0.4s, color 0.4s, box-shadow 0.4s; }
#demo-proyecto .pj-quote mark.on { background: rgb(212 242 90 / 0.14); color: var(--lime, #D4F25A); box-shadow: inset 0 -2px 0 var(--lime, #D4F25A); }
#demo-proyecto .pj-quote .rq { opacity: 0; transition: opacity 0.3s; }
#demo-proyecto .pj-quote .rq.in { opacity: 1; }
#demo-proyecto .pj-quote .live.dm-caret::after { width: 2px; background: var(--lime, #D4F25A); }

/* Campos entendidos */
#demo-proyecto .pj-fields { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.85rem 0 0; }
#demo-proyecto .pj-f {
    display: grid;
    grid-template-columns: 5.2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    min-height: 2.6rem;
    padding: 0.35rem 0.8rem;
    border-radius: 0.9rem;
    border: 1px solid rgb(255 255 255 / 0.08);
    background: rgb(255 255 255 / 0.04);
    transition: opacity 0.5s var(--pj-ease), transform 0.6s var(--pj-ease), background-color 0.5s, border-color 0.5s;
}
#demo-proyecto .pj-f dt { font-size: 0.66rem; line-height: 1; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pj-muted); }
#demo-proyecto .pj-f dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; margin: 0; font-size: 0.88rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--paper, #F6F4EE); }
#demo-proyecto .pj-f dd em { color: var(--lime, #D4F25A); }
#demo-proyecto .pj-assume { padding: 0.2rem 0.45rem; border-radius: 0.4rem; background: rgb(242 153 74 / 0.14); color: var(--orange, #F2994A); font-size: 0.66rem; line-height: 1.1; font-weight: 600; letter-spacing: 0.04em; }
#demo-proyecto .pj-f .pend { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 500; color: var(--pj-muted); }
#demo-proyecto .pj-f .pend::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--orange, #F2994A); box-shadow: 0 0 0 4px rgb(242 153 74 / 0.16); }
#demo-proyecto .pj-f .val { display: none; }
#demo-proyecto .pj-f.set .pend { display: none; }
#demo-proyecto .pj-f.set .val { display: inline-block; animation: pj-in-left 0.55s var(--pj-ease) both; }
#demo-proyecto .pj-f.set { border-color: rgb(212 242 90 / 0.35); background: rgb(212 242 90 / 0.06); }
#demo-proyecto .pj-vnote { display: flex; align-items: center; gap: 0.6rem; margin: 0.85rem 0 0; font-size: 0.86rem; line-height: 1.35; color: var(--pj-soft); }
#demo-proyecto .pj-vnote svg,
#demo-proyecto .pj-buy svg,
#demo-proyecto .pj-adj li svg,
#demo-proyecto .pjo-note svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#demo-proyecto .pj-vnote svg { width: 1.15rem; height: 1.15rem; color: var(--pj-mint); }

/* Cuentas (filas de cálculo) */
#demo-proyecto .pj-calc { margin-top: 0.55rem; }
#demo-proyecto .pj-cr {
    display: grid;
    grid-template-columns: 5.6rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.36rem 0;
    border-bottom: 1px dashed rgb(255 255 255 / 0.1);
    font-variant-numeric: tabular-nums;
}
#demo-proyecto .pj-cr .l { overflow: hidden; font-size: 0.8rem; font-weight: 500; color: var(--pj-muted); white-space: nowrap; text-overflow: ellipsis; }
#demo-proyecto .pj-cr .f { overflow: hidden; font-size: 0.8rem; font-weight: 500; color: var(--pj-mint); white-space: nowrap; text-overflow: ellipsis; }
#demo-proyecto .pj-cr .r { font-size: 0.84rem; font-weight: 600; color: var(--paper, #F6F4EE); text-align: right; white-space: nowrap; }
#demo-proyecto .pj-cr.sum { border-top: 1px solid rgb(255 255 255 / 0.24); border-bottom-style: solid; }
#demo-proyecto .pj-cr.sum .l { font-weight: 600; color: var(--paper, #F6F4EE); }
#demo-proyecto .pj-cr.sum .r { color: var(--lime, #D4F25A); }
#demo-proyecto .pj-buy {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.7rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.9rem;
    border: 1px solid rgb(212 242 90 / 0.28);
    background: rgb(212 242 90 / 0.07);
    font-size: 0.88rem;
    line-height: 1.3;
    color: var(--paper, #F6F4EE);
}
#demo-proyecto .pj-buy svg { width: 1.15rem; height: 1.15rem; color: var(--lime, #D4F25A); stroke-width: 2.4; }
#demo-proyecto .pj-buy b { color: var(--lime, #D4F25A); font-weight: 600; }
#demo-proyecto .pj-buy span { color: var(--pj-muted); }
#demo-proyecto .pj-why { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.7rem 0 0; padding: 0; list-style: none; }
#demo-proyecto .pj-why li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.82rem; line-height: 1.35; color: var(--pj-soft); }
#demo-proyecto .pj-why li b { font-weight: 600; color: var(--paper, #F6F4EE); }
#demo-proyecto .pj-why li .ar { color: var(--pj-mint); }

/* Recibos y ajustes */
#demo-proyecto .pj-rcpt { margin-top: 0.75rem; padding: 0.1rem 0.9rem; border-radius: 1rem; border: 1px solid rgb(255 255 255 / 0.08); background: rgb(255 255 255 / 0.035); }
#demo-proyecto .pj-rr { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px dashed rgb(255 255 255 / 0.1); font-size: 0.86rem; color: var(--pj-soft); }
#demo-proyecto .pj-rr:last-child { border-bottom: 0; }
#demo-proyecto .pj-rr b { font-size: 0.92rem; line-height: 1; font-weight: 600; color: var(--paper, #F6F4EE); white-space: nowrap; font-variant-numeric: tabular-nums; }
#demo-proyecto .pj-rr.bad span,
#demo-proyecto .pj-rr.bad b { color: var(--pj-red); }
#demo-proyecto .pj-rr.neg b { color: var(--pj-mint); }
#demo-proyecto .pj-rr.total { border-top: 1px solid rgb(255 255 255 / 0.26); }
#demo-proyecto .pj-rr.total span { font-weight: 600; color: var(--paper, #F6F4EE); }
#demo-proyecto .pj-rr.total b { font-size: 1.15rem; color: var(--lime, #D4F25A); }
/* «Recalcula»: el recibo crece fila a fila (sin caja vacía mientras el cliente escribe) */
#demo-proyecto .pj-view[data-v="recalc"] .pj-rr.pj-pop { max-height: 4rem; overflow: hidden; transition: opacity 0.5s var(--pj-ease), transform 0.6s var(--pj-ease), max-height 0.5s var(--pj-ease), padding 0.5s var(--pj-ease); }
#demo-proyecto .pj-view[data-v="recalc"] .pj-rr.pj-pop:not(.in) { max-height: 0; padding-block: 0; border-bottom-width: 0; }
#demo-proyecto .pj-view[data-v="recalc"] .pj-rcpt { transition: opacity 0.4s; }
#demo-proyecto .pj-view[data-v="recalc"] .pj-rcpt:not(:has(.in)) { opacity: 0; }
#demo-proyecto .pj-sub { margin: 0.85rem 0 0; font-size: 0.66rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pj-muted); }
#demo-proyecto .pj-adj { margin: 0.2rem 0 0; padding: 0; list-style: none; }
#demo-proyecto .pj-adj li { position: relative; margin-top: 0.4rem; padding-left: 1.55rem; font-size: 0.86rem; line-height: 1.35; color: var(--paper, #F6F4EE); }
#demo-proyecto .pj-adj li svg { position: absolute; left: 0; top: 0.12rem; width: 1rem; height: 1rem; color: var(--pj-mint); stroke-width: 2.6; }
#demo-proyecto .pj-adj code { display: block; margin-top: 0.1rem; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; color: var(--pj-mint); font-variant-numeric: tabular-nums; }
#demo-proyecto .pj-alt { display: none; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.75rem; }
#demo-proyecto .pj-alt > div { padding: 0.6rem 0.8rem; border-radius: 0.9rem; border: 1px solid rgb(255 255 255 / 0.08); background: rgb(255 255 255 / 0.04); font-size: 0.78rem; line-height: 1.35; color: var(--pj-soft); }
#demo-proyecto .pj-alt b { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.15rem; font-size: 0.82rem; font-weight: 600; color: var(--paper, #F6F4EE); }
#demo-proyecto .pj-alt b span { font-weight: 600; font-variant-numeric: tabular-nums; }
#demo-proyecto .pj-big {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.7rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgb(212 242 90 / 0.35);
    background: linear-gradient(90deg, rgb(212 242 90 / 0.14), rgb(212 242 90 / 0.03));
}
#demo-proyecto .pj-big small { min-width: 0; font-size: 0.78rem; line-height: 1.3; color: var(--pj-soft); }
#demo-proyecto .pj-big small b { font-weight: 600; color: var(--paper, #F6F4EE); font-variant-numeric: tabular-nums; }
#demo-proyecto .pj-big strong { font-size: 1.12rem; line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--lime, #D4F25A); white-space: nowrap; font-variant-numeric: tabular-nums; }

#demo-proyecto .pj-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.75rem; }
#demo-proyecto .pj-kpis > div { display: flex; flex-direction: column; padding: 0.65rem 0.85rem; border-radius: 1rem; border: 1px solid rgb(212 242 90 / 0.25); background: rgb(212 242 90 / 0.06); }
#demo-proyecto .pj-kpis small { display: block; font-size: 0.76rem; line-height: 1.25; color: var(--pj-soft); }
#demo-proyecto .pj-kpis b { display: block; margin-top: auto; padding-top: 0.3rem; font-size: 1.2rem; line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--lime, #D4F25A); font-variant-numeric: tabular-nums; }
#demo-proyecto .pj-xs { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; padding: 0.7rem 0.9rem; border-radius: 1rem; border: 1px solid rgb(242 153 74 / 0.3); background: rgb(242 153 74 / 0.08); }
#demo-proyecto .pj-xs .ic { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 0.7rem; background: rgb(242 153 74 / 0.18); color: var(--orange, #F2994A); }
#demo-proyecto .pj-xs .ic svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
#demo-proyecto .pj-xs b { display: block; font-size: 0.66rem; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange, #F2994A); }
#demo-proyecto .pj-xs span { display: block; margin-top: 0.3rem; font-size: 0.84rem; line-height: 1.35; color: var(--paper, #F6F4EE); }

/* Después de la venta */
#demo-proyecto .pj-guide { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
#demo-proyecto .pj-guide li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.86rem; line-height: 1.3; color: var(--paper, #F6F4EE); }
#demo-proyecto .pj-guide li i { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 0.55rem; border: 1px solid rgb(52 211 153 / 0.4); background: rgb(16 185 129 / 0.14); color: var(--pj-mint); font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
#demo-proyecto .pj-guide li small { font-size: 0.8rem; color: var(--pj-muted); }
#demo-proyecto .pj-notif { display: flex; gap: 0.75rem; margin-top: 0.8rem; padding: 0.75rem 0.9rem; border-radius: 1.2rem; border: 1px solid rgb(255 255 255 / 0.12); background: rgb(255 255 255 / 0.07); }
#demo-proyecto .pj-notif .esc-logo-mark { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 0.65rem; }
#demo-proyecto .pj-notif .esc-logo-mark svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
#demo-proyecto .pj-notif small { display: block; font-size: 0.64rem; line-height: 1.1; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pj-muted); }
#demo-proyecto .pj-notif b { display: block; margin-top: 0.3rem; font-size: 0.9rem; font-weight: 600; color: var(--paper, #F6F4EE); }
#demo-proyecto .pj-notif span { display: block; margin-top: 0.1rem; font-size: 0.8rem; line-height: 1.35; color: var(--pj-soft); }
#demo-proyecto .pj-gain {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.8rem;
    padding: 0.7rem 0.9rem 0.8rem;
    border-radius: 1rem;
    border: 1px solid rgb(242 153 74 / 0.3);
    background: linear-gradient(90deg, rgb(242 153 74 / 0.12), rgb(242 153 74 / 0.04));
}
#demo-proyecto .pj-gain p { margin: 0 0 0.15rem; font-size: 0.66rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange, #F2994A); }
#demo-proyecto .pj-gain div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; padding-left: 1rem; position: relative; }
#demo-proyecto .pj-gain div::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: var(--orange, #F2994A); box-shadow: 0 0 0 3px rgb(242 153 74 / 0.18); }
#demo-proyecto .pj-gain b { font-size: 0.86rem; line-height: 1.3; font-weight: 600; color: var(--paper, #F6F4EE); }
#demo-proyecto .pj-gain span { font-size: 0.8rem; line-height: 1.3; color: var(--pj-muted); }

/* Panel en modo contratista */
#demo-proyecto .pjo-wait { margin: 0.75rem 0 0; font-size: 0.95rem; color: var(--paper, #F6F4EE); }
#demo-proyecto .pjo-look { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
#demo-proyecto .pjo-look li { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.7rem 0.9rem; border-radius: 0.9rem; border: 1px dashed rgb(212 242 90 / 0.32); background: rgb(255 255 255 / 0.035); }
#demo-proyecto .pjo-look b { flex: none; width: 4.2rem; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.02em; color: var(--lime, #D4F25A); }
#demo-proyecto .pjo-look span { font-size: 0.86rem; color: var(--pj-soft); }
#demo-proyecto .pjo-note { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.8rem 0 0; padding: 0.7rem 0.85rem; border-radius: 1rem; border: 1px solid rgb(242 153 74 / 0.4); background: rgb(242 153 74 / 0.1); font-size: 0.84rem; line-height: 1.38; color: #F9D3B0; }
#demo-proyecto .pjo-note svg { width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; color: var(--orange, #F2994A); stroke-width: 2.2; }
#demo-proyecto .pjo-note b { font-weight: 600; color: var(--paper, #F6F4EE); }
#demo-proyecto .pj-view[data-v="o-calc"] .pj-cr { padding: 0.42rem 0; }
#demo-proyecto .pj-view[data-v="o-read"] .pj-fields { gap: 0.5rem; }

/* Panel: tamaños según su propio ancho */
@container pjp (min-width: 26rem) {
    #demo-proyecto .pj-panel-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic title state"; padding: 1rem 1.25rem; }
    #demo-proyecto .pj-state { justify-self: end; height: 1.85rem; padding: 0 0.8rem; font-size: 0.75rem; }
    #demo-proyecto .pj-panel-title { font-size: 1.08rem; }
    #demo-proyecto .pj-view { padding: 1.15rem 1.35rem 1.25rem; }
    #demo-proyecto .pj-quote { font-size: 1.3rem; }
    #demo-proyecto .pj-f { grid-template-columns: 6rem minmax(0, 1fr); min-height: 2.85rem; padding: 0.4rem 1rem; }
    #demo-proyecto .pj-f dd { font-size: 0.95rem; }
    #demo-proyecto .pj-cr { grid-template-columns: 6.6rem minmax(0, 1fr) auto; }
    #demo-proyecto .pj-cr .l,
    #demo-proyecto .pj-cr .f { font-size: 0.86rem; }
    #demo-proyecto .pj-cr .r { font-size: 0.9rem; }
    #demo-proyecto .pj-why li,
    #demo-proyecto .pj-adj li,
    #demo-proyecto .pj-guide li { font-size: 0.9rem; }
    #demo-proyecto .pj-rr { font-size: 0.9rem; }
    #demo-proyecto .pj-rr b { font-size: 0.98rem; }
    #demo-proyecto .pj-big strong { font-size: 1.35rem; }
    /* Modo contratista: el panel es más angosto pero igual de alto → más aire */
    #demo-proyecto .pjo-wait { margin-top: 1rem; font-size: 1.05rem; }
    #demo-proyecto .pjo-look { gap: 0.65rem; margin-top: 1rem; }
    #demo-proyecto .pjo-look li { padding: 0.95rem 1.1rem; }
    #demo-proyecto .pjo-look b { width: 4.8rem; font-size: 1.05rem; }
    #demo-proyecto .pjo-look span { font-size: 0.95rem; }
    #demo-proyecto .pj-view[data-v="o-read"] .pj-fields { gap: 0.65rem; margin-top: 1.1rem; }
    #demo-proyecto .pj-view[data-v="o-read"] .pj-f { min-height: 3.35rem; }
    #demo-proyecto .pj-view[data-v="o-read"] .pj-f dd { font-size: 1rem; }
    #demo-proyecto .pj-view[data-v="o-calc"] .pj-calc { margin-top: 0.8rem; }
    #demo-proyecto .pj-view[data-v="o-calc"] .pj-cr { padding: 0.62rem 0; }
    #demo-proyecto .pj-view[data-v="o-calc"] .pj-cr .l,
    #demo-proyecto .pj-view[data-v="o-calc"] .pj-cr .f { font-size: 0.9rem; }
    #demo-proyecto .pj-view[data-v="o-calc"] .pj-cr .r { font-size: 0.95rem; }
    #demo-proyecto .pj-view[data-v="o-check"] .pj-adj li { margin-top: 0.6rem; font-size: 0.95rem; }
    #demo-proyecto .pjo-note { margin-top: 1.1rem; padding: 0.85rem 1rem; font-size: 0.92rem; }
    #demo-proyecto .pjo-gain { margin-top: 1rem; padding: 0.85rem 1rem 0.95rem; gap: 0.4rem; }
    #demo-proyecto .pjo-gain b { font-size: 0.95rem; }
    #demo-proyecto .pjo-gain span { font-size: 0.88rem; }
}
@container pjp (min-width: 34rem) {
    #demo-proyecto .pj-panel-head { padding: 1.1rem 1.6rem; }
    #demo-proyecto .pj-ai-ic { width: 2.6rem; height: 2.6rem; }
    #demo-proyecto .pj-panel-title { font-size: 1.2rem; }
    #demo-proyecto .pj-view { padding: 1.4rem 1.75rem 1.5rem; }
    #demo-proyecto .pj-vk { font-size: 0.7rem; }
    #demo-proyecto .pj-quote { margin-top: 0.85rem; font-size: 1.6rem; line-height: 1.3; }
    #demo-proyecto .pj-quote.sm { font-size: 1.35rem; }
    #demo-proyecto .pj-fields { gap: 0.55rem; margin-top: 1.1rem; }
    #demo-proyecto .pj-f { grid-template-columns: 7.5rem minmax(0, 1fr); min-height: 3.15rem; padding: 0.45rem 1.15rem; border-radius: 1.05rem; }
    #demo-proyecto .pj-f dt { font-size: 0.7rem; }
    #demo-proyecto .pj-f dd { font-size: 1.05rem; }
    #demo-proyecto .pj-assume { font-size: 0.7rem; }
    #demo-proyecto .pj-vnote { margin-top: 1.1rem; font-size: 0.98rem; }
    #demo-proyecto .pj-calc { margin-top: 0.7rem; }
    #demo-proyecto .pj-cr { grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.48rem 0; }
    #demo-proyecto .pj-cr .l,
    #demo-proyecto .pj-cr .f { font-size: 0.95rem; }
    #demo-proyecto .pj-cr .r { font-size: 1rem; }
    #demo-proyecto .pj-buy { margin-top: 0.9rem; padding: 0.75rem 1.05rem; font-size: 0.98rem; }
    #demo-proyecto .pj-why { gap: 0.45rem; margin-top: 0.9rem; }
    #demo-proyecto .pj-why li { font-size: 0.95rem; }
    #demo-proyecto .pj-rcpt { margin-top: 0.95rem; padding: 0.15rem 1.15rem; border-radius: 1.2rem; }
    #demo-proyecto .pj-rr { padding: 0.6rem 0; font-size: 0.98rem; }
    #demo-proyecto .pj-rr b { font-size: 1.08rem; }
    #demo-proyecto .pj-rr.total b { font-size: 1.4rem; }
    #demo-proyecto .pj-sub { margin-top: 1.1rem; font-size: 0.7rem; }
    #demo-proyecto .pj-adj li { margin-top: 0.5rem; padding-left: 1.75rem; font-size: 0.98rem; }
    #demo-proyecto .pj-adj li svg { width: 1.1rem; height: 1.1rem; }
    #demo-proyecto .pj-adj code { font-size: 0.9rem; }
    #demo-proyecto .pj-alt { display: grid; }
    #demo-proyecto .pj-big { padding: 0.85rem 1.3rem; }
    #demo-proyecto .pj-big small { font-size: 0.9rem; }
    #demo-proyecto .pj-big strong { font-size: 1.65rem; }
    #demo-proyecto .pj-kpis { gap: 0.75rem; margin-top: 0.95rem; }
    #demo-proyecto .pj-kpis > div { padding: 0.85rem 1.1rem; }
    #demo-proyecto .pj-kpis small { font-size: 0.86rem; }
    #demo-proyecto .pj-kpis b { font-size: 1.6rem; }
    #demo-proyecto .pj-xs { margin-top: 0.95rem; padding: 0.85rem 1.1rem; }
    #demo-proyecto .pj-xs span { font-size: 0.96rem; }
    #demo-proyecto .pj-guide { gap: 0.55rem; margin-top: 0.65rem; }
    #demo-proyecto .pj-guide li { font-size: 0.98rem; }
    #demo-proyecto .pj-guide li i { width: 1.9rem; height: 1.9rem; }
    #demo-proyecto .pj-notif { margin-top: 1rem; padding: 0.9rem 1.1rem; }
    #demo-proyecto .pj-notif b { font-size: 1rem; }
    #demo-proyecto .pj-notif span { font-size: 0.9rem; }
    #demo-proyecto .pj-gain { margin-top: 1rem; padding: 0.85rem 1.1rem 0.95rem; }
    #demo-proyecto .pj-gain b { font-size: 0.96rem; }
    #demo-proyecto .pj-gain span { font-size: 0.9rem; }
}

/* ── Portal de contratistas (navegador, fluido) ───────────── */
#demo-proyecto .pj-slot--browser .dv-browser { display: flex; flex-direction: column; width: 100%; height: 100%; }
#demo-proyecto .pj-slot--browser .dv-browser-bar { flex: none; }
#demo-proyecto .pj-slot--browser .dv-browser-url span { overflow: hidden; text-overflow: ellipsis; }
#demo-proyecto .pj-slot--browser .dv-browser-body { flex: 1; min-height: 0; overflow: hidden; }
#demo-proyecto .pjo-app {
    container: pjo / inline-size;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--ui-bg-2);
    color: var(--ui-ink);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
#demo-proyecto .pjo-app svg { display: block; }
#demo-proyecto .pjo-ico { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#demo-proyecto .pjo-nav { flex: none; display: flex; align-items: center; gap: 1.25rem; height: 50px; padding: 0 14px; border-bottom: 1px solid var(--ui-line); background: var(--ui-bg); }
#demo-proyecto .pjo-nav .esc-logo { font-size: 15px; gap: 8px; white-space: nowrap; }
#demo-proyecto .pjo-nav .esc-logo-mark { width: 26px; height: 26px; border-radius: 8px; }
#demo-proyecto .pjo-nav .esc-logo-mark svg { width: 15px; height: 15px; fill: currentColor; }
#demo-proyecto .pjo-pro { margin-left: 2px; padding: 3px 6px; border-radius: 6px; background: var(--ui-ink); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
#demo-proyecto .pjo-tabs { display: none; gap: 18px; height: 100%; font-size: 13px; font-weight: 500; color: var(--ui-muted); }
#demo-proyecto .pjo-tabs span { display: flex; align-items: center; }
#demo-proyecto .pjo-tabs .on { color: var(--ui-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--esc-500); }
#demo-proyecto .pjo-acct { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; font-weight: 500; color: #33433B; }
#demo-proyecto .pjo-acct span { display: none; }
#demo-proyecto .pjo-acct i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9999px; background: var(--esc-500); color: var(--ui-ink); font-size: 12px; font-weight: 700; }
#demo-proyecto .pjo-view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#demo-proyecto .pjo-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 100% 100%;
    gap: 12px;
    padding: 12px;
    transition: transform 0.8s var(--pj-ease);
}
#demo-proyecto .pjo-app.at-mat .pjo-grid { transform: translateY(calc(-100% + 12px)); }
#demo-proyecto .pjo-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 16px; background: var(--ui-bg); box-shadow: 0 1px 2px rgb(14 26 20 / 0.05), 0 0 0 1px rgb(14 26 20 / 0.06); }
#demo-proyecto .pjo-ch { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-bottom: 1px solid #EFECE4; }
#demo-proyecto .pjo-ch b { overflow: hidden; font-size: 14px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
#demo-proyecto .pjo-ch small { flex: none; margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ui-muted); }
#demo-proyecto .pjo-cb { position: relative; flex: 1; min-height: 0; }

/* Plano: zona para soltar, archivo y dibujo */
#demo-proyecto .pjo-drop {
    position: absolute;
    inset: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    border-radius: 14px;
    border: 2px dashed #D6D2C6;
    background: #FAF9F5;
    color: var(--ui-muted);
    text-align: center;
    transition: border-color 0.4s, background-color 0.4s, opacity 0.5s;
}
#demo-proyecto .pjo-drop svg { width: 40px; height: 40px; color: #8A958F; }
#demo-proyecto .pjo-drop b { font-size: 15px; font-weight: 600; color: var(--ui-ink); }
#demo-proyecto .pjo-drop span { font-size: 12.5px; }
#demo-proyecto .pjo-drop.hot { border-color: var(--esc-500); background: var(--esc-tint); }
#demo-proyecto .pjo-drop.done { opacity: 0; }
#demo-proyecto .pjo-ghost {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: -40%;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 160px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--ui-bg);
    box-shadow: 0 24px 50px -16px rgb(6 35 26 / 0.45), 0 0 0 1px rgb(14 26 20 / 0.08);
    opacity: 0;
    transform: translateX(-50%) rotate(-6deg);
    transition: top 0.9s var(--pj-ease), opacity 0.35s, transform 0.9s var(--pj-ease);
}
#demo-proyecto .pjo-ghost.in { top: 40%; opacity: 1; transform: translateX(-50%); }
#demo-proyecto .pjo-ghost.drop { opacity: 0; transform: translateX(-50%) scale(0.85); }
#demo-proyecto .pjo-ghost b { font-size: 13.5px; font-weight: 600; }
#demo-proyecto .pjo-pdf { flex: none; display: grid; place-items: end center; width: 30px; height: 36px; padding-bottom: 5px; border-radius: 6px; background: var(--bad-500); color: #fff; font-size: 10.5px; line-height: 1; font-weight: 700; letter-spacing: 0.04em; }
#demo-proyecto .pjo-file {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 12px;
    border-radius: 12px;
    background: #FAF9F5;
    box-shadow: 0 0 0 1px var(--ui-line);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s, transform 0.55s var(--pj-ease);
}
#demo-proyecto .pjo-file.in { opacity: 1; transform: none; }
#demo-proyecto .pjo-file .pjo-pdf { width: 26px; height: 32px; font-size: 10px; }
#demo-proyecto .pjo-file .t { flex: 1; min-width: 0; }
#demo-proyecto .pjo-file .t b { display: block; font-size: 13.5px; font-weight: 600; }
#demo-proyecto .pjo-file .t small { display: block; font-size: 12px; color: var(--ui-muted); }
#demo-proyecto .pjo-file .bar { height: 5px; margin-top: 4px; overflow: hidden; border-radius: 3px; background: var(--ui-line); }
#demo-proyecto .pjo-file .bar i { display: block; width: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--ai-ink), var(--ok-500)); }
#demo-proyecto .pjo-file .pct { width: 42px; font-size: 12.5px; font-weight: 600; color: var(--ai-ink); text-align: right; font-variant-numeric: tabular-nums; }
#demo-proyecto .pjo-plan {
    position: absolute;
    top: 78px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background-color: #FBFAF6;
    background-image: linear-gradient(#ECE8DE 1px, transparent 1px), linear-gradient(90deg, #ECE8DE 1px, transparent 1px);
    background-size: 22px 22px;
    box-shadow: 0 0 0 1px var(--ui-line);
    opacity: 0;
    transition: opacity 0.6s;
}
#demo-proyecto .pjo-plan.in { opacity: 1; }
#demo-proyecto .pjo-plan-svg { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#demo-proyecto .pjo-plan svg { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
#demo-proyecto .pjo-plan .ex { fill: none; stroke: #33433B; stroke-width: 9; stroke-linecap: square; }
#demo-proyecto .pjo-plan .txt { fill: var(--ui-muted); font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: 0.03em; }
#demo-proyecto .pjo-plan .nw { fill: none; stroke: var(--esc-500); stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--pj-ease); }
#demo-proyecto .pjo-plan .nw.in { stroke-dashoffset: 0; }
#demo-proyecto .pjo-plan .door { fill: none; stroke: var(--ai-ink); stroke-width: 2.5; opacity: 0; transition: opacity 0.5s; }
#demo-proyecto .pjo-plan .door.in { opacity: 1; }
#demo-proyecto .pjo-plan .dim { opacity: 0; transition: opacity 0.5s; }
#demo-proyecto .pjo-plan .dim.in { opacity: 1; }
#demo-proyecto .pjo-plan .dim line { stroke: var(--ai-ink); stroke-width: 1.5; }
#demo-proyecto .pjo-plan .dim text { fill: var(--ai-ink); font-family: var(--font-sans); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
#demo-proyecto .pjo-plan .tag { opacity: 0; transition: opacity 0.4s; }
#demo-proyecto .pjo-plan .tag.in { opacity: 1; }
#demo-proyecto .pjo-plan .tag rect { fill: var(--ai-ink); }
#demo-proyecto .pjo-plan .tag text { fill: #fff; font-family: var(--font-sans); font-size: 18px; font-weight: 700; }
#demo-proyecto .pjo-tb { flex: none; display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 6px 10px 8px; border-top: 1px solid var(--ui-line); background: rgb(255 255 255 / 0.7); font-size: 10.5px; line-height: 1.3; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #45524B; }
#demo-proyecto .pjo-scan { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; opacity: 0; }
#demo-proyecto .pjo-scan i {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(180deg, transparent 72%, rgb(16 185 129 / 0.18) 92%, rgb(16 185 129 / 0.45));
    border-bottom: 2px solid var(--ok-500);
    transform: translateY(-100%);
}
#demo-proyecto .pjo-scan.run { opacity: 1; transition: opacity 0.3s; }
#demo-proyecto .pjo-scan.run i { transform: translateY(0); transition: transform 1.6s linear; }
#demo-proyecto .pjo-scan.end { opacity: 0; transition: opacity 0.4s; }
#demo-proyecto .pjo-scan.end i { transform: translateY(0); }

/* Lista de materiales de obra */
#demo-proyecto .pjo-mat .empty { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-direction: column; gap: 10px; }
#demo-proyecto .pjo-mat .empty i { display: block; height: 48px; border-radius: 12px; transition: opacity 0.4s; }
#demo-proyecto .pjo-mat.has .empty i { opacity: 0; }
#demo-proyecto .pjo-rows { position: relative; padding: 2px 14px 0; }
#demo-proyecto .pjo-row { display: flex; align-items: center; gap: 10px; height: 54px; border-bottom: 1px solid #EFECE4; opacity: 0; transform: translateX(12px); transition: opacity 0.45s var(--pj-ease), transform 0.55s var(--pj-ease); }
#demo-proyecto .pjo-row.in { opacity: 1; transform: none; }
#demo-proyecto .pjo-row .th { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--c); color: var(--k); }
#demo-proyecto .pjo-row .th svg { width: 19px; height: 19px; }
#demo-proyecto .pjo-row .t { flex: 1; min-width: 0; }
#demo-proyecto .pjo-row .t b { display: block; overflow: hidden; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
#demo-proyecto .pjo-row .t small { display: block; overflow: hidden; font-size: 11.5px; color: var(--ui-muted); white-space: nowrap; text-overflow: ellipsis; }
#demo-proyecto .pjo-row .qn { flex: none; text-align: right; }
#demo-proyecto .pjo-row .qn b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
#demo-proyecto .pjo-row .qn small { display: block; font-size: 11.5px; color: var(--ui-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
#demo-proyecto .pjo-row.muted .t b,
#demo-proyecto .pjo-row.muted .qn b { font-weight: 500; color: var(--ui-muted); }
#demo-proyecto .pjo-tot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 10px 14px 0; opacity: 0; transition: opacity 0.5s; }
#demo-proyecto .pjo-tot.in { opacity: 1; }
#demo-proyecto .pjo-tot small { font-size: 12px; font-weight: 500; color: var(--ui-muted); }
#demo-proyecto .pjo-tot b { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
#demo-proyecto .pjo-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 14px 0;
    padding: 9px 11px;
    border-radius: 12px;
    background: var(--esc-tint);
    box-shadow: 0 0 0 1px rgb(242 153 74 / 0.45);
    color: var(--esc-700);
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 500;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s, transform 0.6s var(--pj-ease), box-shadow 0.4s;
}
#demo-proyecto .pjo-warn.in { opacity: 1; transform: none; }
#demo-proyecto .pjo-warn.hl { box-shadow: 0 0 0 2.5px var(--esc-500), 0 10px 24px -12px rgb(242 153 74 / 0.8); }
#demo-proyecto .pjo-warn svg { flex: none; width: 17px; height: 17px; margin-top: 1px; }
#demo-proyecto .pjo-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 10px 14px 0; opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.6s var(--pj-ease); }
#demo-proyecto .pjo-cta.in { opacity: 1; transform: none; }
#demo-proyecto .pjo-cta span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 8px; border-radius: 9999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
#demo-proyecto .pjo-cta .a { background: var(--ui-bg); box-shadow: 0 0 0 1.5px var(--ui-line); color: var(--ui-ink); }
#demo-proyecto .pjo-cta .b { background: var(--esc-500); color: var(--ui-ink); box-shadow: 0 10px 22px -10px rgb(242 153 74 / 0.9); }
#demo-proyecto .pjo-cta svg { width: 16px; height: 16px; }

@container pjo (max-width: 419.98px) {
    #demo-proyecto .pjo-cta span { height: 34px; }
    #demo-proyecto .pjo-mat .pjo-ch small { display: none; }
}
@container pjo (min-width: 420px) {
    #demo-proyecto .pjo-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
}
@container pjo (min-width: 520px) {
    #demo-proyecto .pjo-tabs { display: flex; }
    #demo-proyecto .pjo-nav { padding: 0 18px; gap: 1.6rem; }
}
@container pjo (min-width: 640px) {
    #demo-proyecto .pjo-acct span { display: inline; }
}
@container pjo (min-width: 700px) {
    #demo-proyecto .pjo-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: 100%; padding: 14px; gap: 14px; }
    #demo-proyecto .pjo-app.at-mat .pjo-grid { transform: none; }
}

/* ── Avance rápido / movimiento reducido ──────────────────── */
#demo-proyecto .pj.pj-instant *,
#demo-proyecto .pj.pj-instant *::before,
#demo-proyecto .pj.pj-instant *::after { transition: none !important; }
#demo-proyecto .pj.pj-instant .pj-f.set .val { animation: none; }
@media (prefers-reduced-motion: reduce) {
    #demo-proyecto .pj *,
    #demo-proyecto .pj *::before,
    #demo-proyecto .pj *::after { transition: none !important; }
    #demo-proyecto .pj-state.run i,
    #demo-proyecto .pj-f.set .val { animation: none; }
    #demo-proyecto .pjo-scan { display: none; }
}

@keyframes pj-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgb(212 242 90 / 0.6); }
    50% { opacity: 0.55; box-shadow: 0 0 0 5px rgb(212 242 90 / 0); }
}
@keyframes pj-in-left {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: none; }
}