/* Demo interactivo embebido dentro de cada página de caso (trabajo/*/):
   mismo componente y motor (assets/js/case-demo.js) que usan los modales de
   la home, pero con los tokens de color/tipografía de styles.css en vez de
   los de home.css, porque estas páginas no cargan home.css. */
.case-demo{margin-top:18px}
.case-demo-intro{font-size:13px;color:var(--ink2);margin:0 0 14px}
.demo-device{border:1px solid var(--bdr);border-radius:14px;overflow:hidden;background:var(--w);box-shadow:0 18px 40px rgba(27,23,18,.08)}
.demo-bar{background:var(--s);padding:9px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--bdr)}
.demo-dot{width:7px;height:7px;border-radius:50%;background:var(--bdr)}
.demo-url{margin-left:6px;font:500 9px var(--f-mono);color:var(--ink3)}
.demo-screen{padding:24px;min-height:180px;opacity:1;transition:opacity .18s ease}
.demo-screen.fade{opacity:0}
.demo-progress{display:flex;gap:5px;margin-bottom:16px}
.demo-progress span{height:3px;flex:1;background:var(--bdr);border-radius:100px;overflow:hidden}
.demo-progress span i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s ease}
.demo-progress span.active i,.demo-progress span.done i{width:100%}
.demo-step-label{font:600 10px var(--f-mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.demo-screen-title{font-family:var(--f-display);font-size:21px;font-weight:500;margin:0 0 6px;color:var(--ink)}
.demo-screen-desc{font-size:13px;color:var(--ink2);margin:0 0 18px;line-height:1.55}
.demo-continue{appearance:none;border:0;background:var(--ink);color:#fff;font:600 12px var(--f-sans);padding:11px 20px;border-radius:100px;cursor:pointer;transition:.2s}
.demo-continue:hover{background:var(--accent)}
.demo-choice-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.demo-choice{appearance:none;text-align:left;border:1px solid var(--bdr);background:var(--w);padding:16px;border-radius:13px;cursor:pointer;transition:.2s;font:600 13px var(--f-sans);color:var(--ink)}
.demo-choice:hover{border-color:var(--accent);transform:translateY(-2px)}
.demo-choice:disabled{cursor:default;transform:none}
.demo-choice.is-selected{border-color:var(--accent);background:var(--s)}
.demo-choice small{display:block;font-weight:400;color:var(--ink3);font-size:10px;margin-top:5px}
.demo-screen .success-card{margin:0;padding:20px;border:1px solid var(--bdr);background:var(--s);border-radius:15px}
.demo-screen .success-card strong{display:block;font-size:15px;margin-bottom:7px;color:var(--ink)}
.demo-screen .success-card p{margin:0;color:var(--ink2);font-size:12.5px;line-height:1.5}
.case-demo .back-link{border:0;background:none;padding:0;margin-top:14px;font-size:11px;color:var(--accent);cursor:pointer;display:block}
@media(max-width:600px){.demo-choice-list{grid-template-columns:1fr}}
/* Mínimo 12px en la maqueta de la demostración */
.demo-url{font-size:12px}
.demo-choice small{font-size:12px}