/* Demo interactiva: estilos limitados a esta sección. */
.caps-demo { margin-top: clamp(56px,7vw,96px); }
.caps-demo .caps { width:100%; }
.caps-demo .caps__lista { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 28px; margin-top:32px; }
.caps-demo .cap { align-content:start; }
.froz-demo { --demo-border:#D1DCE6; position:relative; isolation:isolate; color:var(--brand-primary); background:#fff; border:1px solid var(--demo-border); border-radius:18px; box-shadow:0 18px 60px #102B4610; scroll-margin-top:90px; overflow:hidden; }
.demo-heading { padding:26px 28px 18px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.demo-heading h4 { font:800 clamp(1.35rem,2vw,1.85rem)/1.2 var(--font-display); letter-spacing:-.035em; margin:4px 0 8px; }
.demo-heading p { color:var(--text-secondary); font-size:.875rem; max-width:66ch; }
.demo-eyebrow { display:block; font-size:.67rem; letter-spacing:.13em; font-weight:800; color:#405D77; }
.demo-heading-badge { border:1px solid #BACEDD; background:#F0F6FA; padding:9px 12px; border-radius:6px; font-size:.72rem; white-space:nowrap; }
.froz-demo button,.froz-demo input,.froz-demo select,.froz-demo textarea { font:inherit; }
.froz-demo button { cursor:pointer; border:1px solid var(--demo-border); border-radius:6px; background:#fff; color:var(--brand-primary); padding:9px 13px; font-size:.8rem; font-weight:650; line-height:1.3; min-height:38px; }
.froz-demo button:hover:not(:disabled) { background:#EEF3FE; border-color:#9CB4E4; }
.froz-demo button[aria-pressed="true"] { background:#2457E6; color:#fff; border-color:#2457E6; }
/* Un botón presionado se sigue leyendo con el puntero encima (2026-10-23): el hover de arriba (0,3,1) le ganaba al fondo azul (0,2,1) y dejaba letra blanca sobre celeste. */
.froz-demo button[aria-pressed="true"]:hover:not(:disabled) { background:#1D48C4; border-color:#1D48C4; color:#fff; }
.froz-demo button:disabled { opacity:.45; cursor:default; }
.froz-demo :is(button,input,select,textarea):focus-visible { outline:3px solid #2457E6; outline-offset:3px; }
.froz-demo [hidden] { display:none!important; }
.demo-topbar { padding:0 28px 20px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.demo-modes { display:flex; gap:8px; }
.demo-modes button { display:flex; flex-direction:column; align-items:flex-start; padding:10px 16px; }
.demo-modes span { font-weight:400; opacity:.85; font-size:.7rem; margin-top:2px; }
.demo-guide { margin:0 24px 18px; display:flex; justify-content:space-between; gap:16px; padding:15px 18px; border:1px solid #C2D1F4; border-left:4px solid #2457E6; background:#F2F6FF; border-radius:8px; }
.demo-guide strong { display:block; margin:3px 0 5px; font-size:.95rem; }
.demo-guide p { font-size:.8rem; max-width:72ch; }
.demo-guide nav { display:flex; flex-wrap:wrap; align-content:center; gap:6px; flex-shrink:0; max-width:290px; }
.demo-guide-target { outline:3px solid #705DC6!important; outline-offset:3px; }
.demo-controls { border:0; padding:0; min-width:0; margin:0; }
.demo-stagebar { background:#102B46; padding:12px 20px; display:flex; gap:8px; }
.demo-stagebar button { border-color:#55718B; background:transparent; color:#E6EDF4; }
.demo-stagebar button span { opacity:.65; margin-right:6px; font-size:.68rem; }
.demo-stagebar button[aria-pressed="true"],.froz-demo .demo-stagebar button[aria-pressed="true"]:hover:not(:disabled) { background:#fff; color:#102B46; border-color:#fff; }
/* Sobre la barra oscura, el hover claro general dejaba la letra clara sobre celeste (2026-10-23). */
.froz-demo .demo-stagebar button:not([aria-pressed="true"]):not(.demo-report-button):hover:not(:disabled) { background:#1E3F61; border-color:#9CB4E4; color:#fff; }
.demo-stagebar .demo-report-button { margin-left:auto; background:#3DC8D9; color:#102B46; border-color:#3DC8D9; }
.demo-toolbar { display:flex; flex-wrap:wrap; gap:5px; padding:12px 20px; border-bottom:1px solid var(--demo-border); background:#F7FAFC; }
.demo-toolbar button { padding:8px 12px; }
.demo-toolbar-space { flex:1; }
.demo-workspace { display:grid; grid-template-columns:minmax(0,1fr) 265px; }
.demo-stage { position:relative; height:560px; min-width:0; background:#EAF0F5; overflow:hidden; }
.demo-canvas { position:absolute; inset:0; }
.demo-canvas canvas { display:block; width:100%; height:100%; touch-action:none; }
/* El anillo de foco del visor va por dentro: .demo-stage recorta lo que sale del lienzo, y el marco de la
   guía ocupa los 4 px del borde (2026-10-23). */
.froz-demo .demo-canvas canvas:focus-visible { outline:3px solid #2457E6; outline-offset:-8px; }
.demo-stage-caption { position:absolute; top:18px; left:20px; right:20px; display:flex; justify-content:space-between; gap:12px; font:700 .65rem/1.4 var(--font-text); letter-spacing:.12em; pointer-events:none; color:#435D74; }
.demo-tool-help { position:absolute; bottom:14px; left:16px; right:16px; text-align:center; font-size:.75rem; line-height:1.45; padding:9px 14px; background:#ffffffeb; border:1px solid #D1DCE6; border-radius:7px; pointer-events:none; }
.demo-loading { position:absolute; inset:0; background:#102B46; }
.demo-loading img { width:100%; height:100%; object-fit:contain; opacity:.7; }
.demo-loading>div { position:absolute; bottom:40px; left:8%; width:84%; padding:14px 18px; border-radius:8px; background:#fff; }
.demo-loading strong { display:block; font-size:.85rem; }
.demo-loading progress { width:100%; height:6px; accent-color:#2457E6; }
.demo-properties { border-left:1px solid var(--demo-border); background:#fff; padding:20px 16px; max-height:560px; overflow:auto; font-size:.78rem; }
.demo-properties h4 { font:800 .76rem/1.4 var(--font-display); margin:0 0 12px; }
.demo-object { padding:0 0 12px; margin-bottom:12px; border-bottom:1px solid #E3EAF1; }
.demo-object>div { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.demo-object button { border:0; background:#F1F5F9; padding:7px 10px; display:flex; align-items:center; gap:6px; }
.demo-swatch { width:8px; height:8px; border-radius:50%; display:inline-block; background:#705DC6; }
.demo-swatch--bed { background:#2457E6; }
.demo-object button[aria-pressed=true] .demo-swatch { background:#fff; }
.demo-toggle { display:flex; gap:4px; align-items:center; white-space:nowrap; font-size:.7rem; }
.froz-demo input[type=checkbox] { width:16px; height:16px; accent-color:#2457E6; }
.demo-opacity { margin-top:9px; display:flex; align-items:center; gap:9px; color:#4A6176; font-size:.67rem; }
.demo-opacity input { width:100%; min-width:0; accent-color:#2457E6; }
.demo-ink,.demo-nudge { padding:14px 0; border-bottom:1px solid #E3EAF1; }
.demo-ink label { display:flex; justify-content:space-between; align-items:center; margin:7px 0; gap:6px; }
.demo-ink input[type=color] { width:75px; height:32px; border:1px solid #B6C7D8; background:#fff; }
.demo-ink select { padding:5px; border:1px solid #B6C7D8; border-radius:4px; }
.demo-ink small { color:#51677B; font-size:.66rem; display:block; }
.demo-nudge p { font-size:.7rem; margin-bottom:8px; }
.demo-nudge>div { display:flex; align-items:center; gap:6px; margin:5px 0; }
.demo-nudge>div span { flex:1; }
.demo-nudge button { min-width:38px; }
.demo-annotations { padding:18px 0; }
.demo-annotations h4 { display:flex; justify-content:space-between; }
.demo-annotations h4 span { background:#EAF0F6; padding:1px 6px; border-radius:8px; }
.demo-entry,.froz-demo button.demo-entry { display:flex; width:100%; align-items:center; gap:7px; padding:9px 7px; text-align:left; border:0; border-bottom:1px solid #E3EAF1; border-radius:0; }
.demo-entry>i { flex:none; width:10px; height:10px; border-radius:50%; }
.demo-entry>span:first-of-type { flex:1; min-width:0; }
.demo-entry strong { display:block; font-size:.73rem; overflow-wrap:anywhere; }
.demo-entry small { display:block; font-size:.64rem; color:#53687B; margin-top:4px; line-height:1.4; font-weight:400; }
.demo-entry button { border:0; font-size:1rem; }
.demo-empty { color:#53687B; font-size:.74rem; line-height:1.6; }
.froz-demo .demo-reset { width:100%; font-size:.72rem; color:#53687B; }
.demo-bottom { padding:14px 22px; display:flex; justify-content:space-between; align-items:center; gap:15px; border-top:1px solid var(--demo-border); font-size:.73rem; }
.demo-bottom p { flex:1; }
.demo-bottom>span { color:#4B6277; font-size:.67rem; white-space:nowrap; }
.demo-disclaimer { background:#EDF3F8; padding:12px 16px; border-left:3px solid #705DC6; font-size:.8rem; line-height:1.5; }
.demo-noscript { padding:24px; }
.demo-noscript img { max-width:100%; }
.demo-dialog { border:1px solid #B7C9D9; border-radius:14px; width:min(580px,calc(100vw - 32px)); max-height:90dvh; padding:24px; color:#102B46; background:#fff; margin:auto; overflow:auto; }
.demo-dialog::backdrop { background:#071D35b3; }
.demo-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:20px; }
.demo-dialog-head h3 { font:800 1.2rem/1.3 var(--font-display); }
.demo-dialog-head button { font-size:1.2rem; }
.demo-dialog label { display:block; margin:14px 0; font-size:.8rem; font-weight:650; }
.demo-dialog label input:not([type=color]),.demo-dialog textarea { display:block; width:100%; padding:10px; margin-top:6px; border:1px solid #9EB3C8; border-radius:5px; }
.demo-dialog input[type=color] { display:block; width:80px; height:38px; margin-top:7px; }
.demo-dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; align-items:center; gap:9px; margin-top:22px; }
.demo-dialog-actions button:last-child { background:#2457E6; color:#fff; }
/* El botón principal de los diálogos («Guardar», «Reiniciar») se sigue leyendo con el puntero encima (2026-10-23). */
.froz-demo .demo-dialog-actions button:last-child:hover:not(:disabled) { background:#1D48C4; border-color:#1D48C4; color:#fff; }
.demo-dialog-actions p { flex:1; font-size:.8rem; }
.demo-report-dialog { width:min(1000px,calc(100vw - 24px)); }
.demo-report-dialog h3 { margin:18px 0 12px; }
.demo-report-dialog p,.demo-report-dialog li { font-size:.85rem; line-height:1.6; margin:8px 0; }
.demo-report-dialog figure { margin:20px 0; }
.demo-report-dialog figure img { display:block; width:100%; max-height:430px; object-fit:contain; border:1px solid #D1DCE6; background:#EAF0F5; }
.demo-report-dialog figcaption { margin-top:7px; font-size:.75rem; color:#53687B; }
.demo-table-scroll { overflow:auto; }
.demo-report-dialog table { border-collapse:collapse; width:100%; font-size:.73rem; }
.demo-report-dialog :is(td,th) { padding:10px; border:1px solid #D1DCE6; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.demo-report-dialog th { background:#EDF3F8; }
.demo-report-dialog ol { padding-left:24px; }
.froz-demo:fullscreen,.froz-demo.demo-expanded { background:#fff; border-radius:0; overflow:auto; width:100%; height:100dvh; }
.froz-demo.demo-expanded { position:fixed; inset:0; z-index:10000; }
.froz-demo:fullscreen .demo-stage,.froz-demo.demo-expanded .demo-stage { height:max(400px,calc(100dvh - 305px)); }
.froz-demo:fullscreen .demo-properties,.froz-demo.demo-expanded .demo-properties { max-height:calc(100dvh - 305px); }
@media(max-width:1050px) {
 .caps-demo .caps__lista { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .demo-workspace { grid-template-columns:minmax(0,1fr) 230px; }
 .demo-properties { padding:16px 12px; }
 .demo-guide { flex-direction:column; }
 .demo-guide nav { max-width:none; }
 .demo-heading { flex-wrap:wrap; }
 .demo-heading-badge { font-size:.66rem; padding:6px 9px; }
}
@media(max-width:700px) {
 .caps-demo .caps__lista { grid-template-columns:1fr; gap:0; }
 .demo-heading { padding:20px 16px 14px; }
 .demo-topbar { padding:0 16px 16px; gap:8px; flex-wrap:wrap; }
 .demo-modes { flex:1; }
 .demo-modes button { flex:1; padding:9px; font-size:.75rem; }
 .froz-demo .demo-expand { font-size:.72rem; }
 .demo-stagebar { padding:10px; flex-wrap:wrap; gap:6px; }
 .demo-stagebar button { flex:1; padding:9px 7px; font-size:.72rem; min-height:44px; }
 .demo-stagebar .demo-report-button { flex:0 0 100%; margin:0; }
 .demo-toolbar { padding:10px; gap:5px; }
 .demo-toolbar button { font-size:.73rem; min-height:44px; }
 .demo-toolbar-space { display:none; }
 .demo-workspace { grid-template-columns:1fr; }
 .demo-stage { height:420px; }
 .demo-properties { max-height:none; border-left:0; border-top:1px solid #D1DCE6; display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px; }
 .demo-properties>div { min-width:0; }
 .demo-objects,.demo-annotations,.demo-reset { grid-column:1/-1; }
 .demo-objects { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
 .demo-objects h4,.demo-objects>[data-cut-wrap] { grid-column:1/-1; margin-bottom:0; }
 .demo-object>div { align-items:flex-start; flex-direction:column; }
 .demo-object { margin:0; }
 .demo-annotations { padding:0; }
 .demo-annotations [data-annotation-list] { max-height:220px; overflow:auto; }
 .demo-ink,.demo-nudge { grid-column:1/-1; }
 .demo-bottom { flex-direction:column; align-items:flex-start; padding:13px 16px; gap:8px; }
 .demo-guide { margin:0 12px 14px; padding:12px; }
 .demo-stage-caption { left:14px; right:14px; font-size:.55rem; }
 .demo-tool-help { font-size:.68rem; bottom:10px; padding:8px; }
 .demo-dialog { padding:18px; }
 .froz-demo:fullscreen .demo-properties,.froz-demo.demo-expanded .demo-properties { max-height:none; }
}
@media(prefers-reduced-motion:reduce) { .froz-demo * { scroll-behavior:auto!important; transition:none!important; } }

/* Informe del software: hojas de consulta con marcas de agua permanentes. */
.demo-report-dialog { width:min(1140px,calc(100vw - 24px)); padding:0; background:#EAF0F5; }
.demo-report-dialog .report-chrome { position:sticky; top:0; z-index:5; padding:18px 24px 14px; background:#fff; border-bottom:1px solid #C9D5E1; }
.demo-report-dialog .demo-dialog-head { margin:0 0 12px; }
.demo-report-dialog .demo-dialog-head h3 { margin:4px 0 0; font-size:1.2rem; }
.report-view-controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.report-view-controls p { flex:1; margin:0 0 0 8px; color:#486179; font-size:.73rem; }
.demo-report-dialog [data-report-body],.demo-report-dialog [data-report-editor] { padding:22px; }
.report-sheet { position:relative; isolation:isolate; overflow:hidden; background:#fff; padding:30px 34px 22px; margin-bottom:24px; border:1px solid #CEDAE5; box-shadow:0 5px 16px #142F4310; }
.report-sheet::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='240'%3E%3Cg transform='rotate(-24 225 120)' fill='%23555489' fill-opacity='.14' font-family='Arial,sans-serif' font-weight='700' text-anchor='middle'%3E%3Ctext x='225' y='105' font-size='28'%3EFroz3D %C2%B7 DEMOSTRACI%C3%93N%3C/text%3E%3Ctext x='225' y='134' font-size='17'%3ESIN VALIDEZ CL%C3%8DNICA%3C/text%3E%3C/g%3E%3C/svg%3E"); background-repeat:repeat; }
.report-sheet-head { display:flex; justify-content:space-between; align-items:center; gap:18px; padding-bottom:17px; border-bottom:2px solid #102B46; }
.report-sheet-head>div:last-child { text-align:right; }
.report-sheet-head strong { font:800 1.9rem/1.1 var(--font-display); letter-spacing:-.05em; }
.report-sheet-head span { display:block; margin-top:5px; font-size:.66rem; color:#496178; }
.report-sheet-head b { display:inline-block; color:#615397; font-size:.68rem; border:1px solid #9C93BE; padding:5px 8px; letter-spacing:.07em; }
.report-title { margin:24px 0 16px; }
.report-title>span { font-size:.66rem; letter-spacing:.12em; font-weight:750; color:#506984; }
.demo-report-dialog .report-title h3 { font-size:clamp(1.25rem,2.2vw,1.9rem); line-height:1.25; letter-spacing:-.025em; margin:7px 0; }
.demo-report-dialog .report-title p { font-size:.73rem; color:#506579; }
.demo-report-dialog .report-notice { padding:12px 15px; background:#F2F0F8; border-left:3px solid #7567A5; font-size:.73rem; }
.report-section { margin-top:25px; min-width:0; }
.report-section h4 { display:flex; gap:10px; align-items:baseline; padding-bottom:9px; border-bottom:1px solid #D8E2EA; font-size:.98rem; font-weight:750; line-height:1.4; }
.report-section h4>span { color:#766B9E; font-size:.75rem; letter-spacing:.05em; }
.report-section h5 { margin:15px 0 4px; font-size:.8rem; font-weight:750; }
.report-values { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; margin-top:8px; }
.report-values>div { min-width:0; padding:9px 0; border-bottom:1px solid #EDF1F6; }
.report-values dt { font-size:.68rem; color:#536980; margin-bottom:4px; }
.report-values dd { font-size:.82rem; line-height:1.45; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.demo-report-dialog .report-prose { white-space:pre-wrap; overflow-wrap:anywhere; min-height:30px; }
.demo-report-dialog .report-capture { position:relative; margin:15px 0; }
.demo-report-dialog .report-capture img { max-height:370px; }
.demo-report-dialog .report-capture::after { content:"CASO SINTÉTICO · DEMOSTRACIÓN"; position:absolute; bottom:48px; right:12px; left:12px; text-align:center; font-size:.62rem; letter-spacing:.1em; font-weight:800; color:#405372; pointer-events:none; }
.demo-report-dialog td { white-space:pre-line; min-width:60px; }
.demo-report-dialog .demo-table-scroll { position:relative; margin:12px 0; border:1px solid #D1DCE6; border-radius:3px; }
.demo-report-dialog table { border-style:hidden; }
.demo-report-dialog .demo-table-scroll:focus-visible { outline:3px solid #2457E6; outline-offset:3px; }
.report-signatures { display:grid; grid-template-columns:1fr 1fr; gap:25px; margin-top:18px; }
.report-signatures>div { border:1px dashed #A9BBCD; padding:20px 14px 14px; overflow-wrap:anywhere; }
.report-signatures span { font-size:.58rem; color:#63558D; letter-spacing:.06em; display:block; }
.report-signatures strong { font-size:.84rem; display:block; margin-top:15px; border-top:1px solid #A5B5C6; padding-top:8px; }
.report-signatures small { font-size:.68rem; color:#536980; }
.report-sheet-foot { display:flex; gap:8px 15px; justify-content:space-between; flex-wrap:wrap; border-top:1px solid #C5D4E0; margin-top:25px; padding-top:14px; font-size:.6rem; color:#4B6179; overflow-wrap:anywhere; }
.report-sheet-foot strong { color:#63558D; font-size:.6rem; }
.report-sheet-foot>span:last-child { flex-basis:100%; }
.report-operations { margin-top:25px; }
.report-operations summary,.report-form-group summary { cursor:pointer; font-size:.82rem; font-weight:750; padding:10px 0; }
.report-form-group { border:1px solid #C6D4E0; border-radius:8px; background:#fff; padding:8px 20px 12px; margin:14px 0; }
.report-form-group[open] summary { border-bottom:1px solid #DDE6EF; }
.report-form-group>p { color:#50657B; }
.report-form-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 20px; }
.report-field-wide { grid-column:1/-1; }
.demo-report-dialog .report-form-grid label { min-width:0; font-size:.75rem; line-height:1.5; }
.demo-report-dialog select { display:block; width:100%; background:#fff; padding:10px; border:1px solid #9EB3C8; border-radius:5px; margin-top:6px; color:#102B46; min-height:42px; }
.demo-report-dialog input,.demo-report-dialog textarea { color:#102B46; background:#fff; min-width:0; }
.demo-report-dialog textarea { resize:vertical; }
.report-margin-fields { border:1px solid #C8D6E2; padding:4px 16px 14px; margin-top:18px; }
.report-margin-fields legend { font-size:.8rem; font-weight:750; padding:0 6px; overflow-wrap:anywhere; }
.demo-report-dialog .demo-dialog-actions>span { font-size:.75rem; flex:1; color:#496178; }
@media(max-width:700px) {
 .demo-report-dialog { max-height:96dvh; width:calc(100vw - 12px); }
 .demo-report-dialog .report-chrome { padding:14px; }
 .report-view-controls p { flex-basis:100%; margin:3px 0 0; font-size:.67rem; }
 .demo-report-dialog [data-report-body],.demo-report-dialog [data-report-editor] { padding:10px; }
 .report-sheet { padding:18px 14px; margin-bottom:14px; }
 .report-sheet-head { gap:8px; }
 .report-sheet-head strong { font-size:1.45rem; }
 .report-sheet-head b { font-size:.56rem; padding:4px; }
 .report-sheet-head span { font-size:.57rem; }
 .report-values { gap:0 12px; }
 .report-values dd { font-size:.76rem; }
 .report-section h4 { font-size:.88rem; }
 .report-signatures,.report-form-grid { grid-template-columns:1fr; gap:12px; }
 .report-form-grid { gap:0; }
 .report-form-group { padding:6px 12px 10px; }
 .report-sheet::after { background-size:340px 181px; }
 .report-section .demo-table-scroll { max-width:100%; }
}
/* También cubre el menú Imprimir y Guardar como PDF del navegador. */
@media print {
 .demo-report-dialog { display:none!important; }
 html.demo-report-open body { margin:0!important; background:white!important; color:black!important; }
 html.demo-report-open body>* { display:none!important; }
 html.demo-report-open body::after { content:"Froz3D · Informe de demostración. Disponible solo para visualización en pantalla. Sin uso clínico."; display:block!important; padding:30px; font:16px/1.5 sans-serif; }
}

/* Aviso de entrada (demo/aviso.js; pedido de Manuel, 2026-10-08). Un vidrio esmerilado tapa la parte interactiva, con la tarjeta del mensaje, hasta que la persona entra; entonces el vidrio se desliza fuera con la línea del escáner de la intro en su borde. */
/* El velo llega con hidden y solo aviso.js lo muestra. --demo-aviso es el centinela que aviso.js busca: con una hoja anterior en caché no arma nada. */
/* Se animan solo transform y opacity, una vez, y solo con data-demo-aviso-anima (aviso.js no lo pone con movimiento reducido ni en las pruebas). */
/* El velo y su marco no llevan opacity, filter ni transform: dejarían al vidrio sin nada que desenfocar. */
.froz-demo { --demo-aviso:1; }
/* overflow:clip recorta igual que hidden, pero deja que la tarjeta (sticky) siga a la ventana; donde no existe, queda hidden y la tarjeta va arriba del velo. En pantalla completa la sección debe seguir desplazándose. */
.froz-demo[data-demo-aviso="pendiente"],.froz-demo[data-demo-aviso="abriendo"] { overflow:clip; }
.froz-demo[data-demo-aviso]:fullscreen { overflow:auto; }
.froz-demo[data-demo-aviso].demo-expanded { overflow:auto; }
/* Con el aviso puesto, un salto a #demo-software deja la sección más cerca de la cabecera: en ventanas bajas se ve el título de la tarjeta y, donde cabe, su botón. No más cerca: arriba debe seguir viéndose el título «Capacidades del software». */
.froz-demo[data-demo-aviso="pendiente"] { scroll-margin-top:56px; }
.demo-aviso-marco { position:relative; }
.demo-aviso { position:absolute; inset:0; z-index:4; overflow:hidden; overflow:clip; padding:clamp(16px,3vw,32px) 16px 24px; }
/* Vidrio. Sin backdrop-filter queda casi opaco. Con él, el tinte es más denso arriba, sobre las barras de la demo (la de etapas es azul profundo y se leería como una banda gris), y más liviano sobre el visor, donde se adivinan los modelos. Una capa clara (::before) lo aclara mientras la demo no está lista (detrás se vería el azul de la capa de carga) y se retira cuando el modelo ya está. */
.demo-aviso-vidrio { position:absolute; inset:0; background:rgba(247,250,252,.93); }
.demo-aviso-vidrio::before { content:""; position:absolute; inset:0; background:#F7FAFC; opacity:0; }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .demo-aviso-vidrio { background:linear-gradient(180deg,rgba(247,250,252,.86) 0,rgba(247,250,252,.86) 190px,rgba(247,250,252,.5) 340px); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
 @media(max-width:700px) { .demo-aviso-vidrio { background:linear-gradient(180deg,rgba(247,250,252,.86) 0,rgba(247,250,252,.86) 330px,rgba(247,250,252,.5) 480px); } }
 .demo-aviso-vidrio::before { opacity:.8; }
 .froz-demo[data-state="ready"] .demo-aviso-vidrio::before { opacity:0; }
 .froz-demo[data-demo-aviso-anima] .demo-aviso-vidrio::before { transition:opacity .8s ease; }
}
/* Frente del barrido: la línea del escáner (la de .intro__barrido) y un brillo blanco detrás. Decorativos; solo se ven al entrar. */
.demo-aviso-linea { position:absolute; z-index:1; top:0; bottom:0; left:0; width:2px; border-radius:1px; background:var(--brand-margin); box-shadow:0 0 10px 1px rgba(61,200,217,.55); opacity:0; }
.demo-aviso-vidrio::after { content:""; position:absolute; top:0; bottom:0; left:0; width:min(140px,30%); background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,0)); opacity:0; }
/* Tarjeta: sigue a la ventana mientras el velo está a la vista (el bloque mide unos 1.200 px en celular), bajo la cabecera fija y solo donde cabe pegada ahí con unos 100 px de aire debajo. Con las dos opciones (2026-10-23, medido en la copia de trabajo) mide 295 px en la versión ancha (340 entre 701 y 767 px de ancho), 440 a 503 px en celulares altos y, en celulares de 700 px de alto o menos (donde se compacta), 346 px desde 360 px de ancho y 409 px a 320. De ahí los umbrales: 37em para todos (el caso más justo, 320 px de ancho) y 33em desde 360 px de ancho. En ventanas más bajas (un celular acostado, una pantalla con mucho zoom) se recorre con la página, para que sus opciones siempre se alcancen; un celular acostado nunca llega a 33em, así que la tarjeta no se pega y se suelta cuando el navegador recoge su barra. */
.demo-aviso-tarjeta { position:relative; max-width:720px; margin:0 auto; padding:32px 36px 28px; background:#fff; border:1px solid #BACEDD; border-radius:14px; box-shadow:0 18px 52px #102B462b; }
.demo-aviso-tarjeta::before { content:""; position:absolute; top:-1px; left:20px; right:20px; height:2px; border-radius:1px; background:var(--brand-margin); transform-origin:0 50%; }
@supports (overflow:clip) {
 @media(min-height:37em),(min-width:360px) and (min-height:33em) { .demo-aviso-tarjeta { position:sticky; top:calc(var(--header-h) + 16px); } }
}
.demo-aviso-titulo { margin:0 0 10px; font:800 clamp(1.3rem,1.05rem + 1.2vw,1.85rem)/1.2 var(--font-display); letter-spacing:-.03em; text-wrap:balance; }
.demo-aviso-texto { margin:0; color:var(--text-secondary); font-size:1rem; line-height:1.55; }
.demo-aviso-acciones { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:20px; }
/* El botón necesita más peso que «.froz-demo button» (0,1,1) y que su hover (0,3,1). */
.froz-demo .demo-aviso .demo-aviso-entrar { flex:none; min-height:48px; padding:12px 22px; border:1.5px solid transparent; border-radius:var(--radius-control); background:var(--action-primary); color:#fff; font:600 1rem/1.2 var(--font-display); transition:background-color .18s ease; }
.froz-demo .demo-aviso .demo-aviso-entrar:hover { background:var(--action-hover); border-color:transparent; }
.froz-demo .demo-aviso .demo-aviso-entrar:active { background:var(--action-active); }
/* Las dos opciones de la tarjeta (2026-10-23): «Con guía», la principal, y «Exploración libre». El selector largo les da peso (0,3,0) sobre «.froz-demo button» y su hover. Los textos llevan su color explícito, sin opacidad. */
.demo-aviso-opciones { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.froz-demo .demo-aviso .demo-aviso-opcion { display:flex; align-items:center; gap:14px; min-height:96px; padding:16px 18px; border:2px solid var(--action-primary); border-radius:var(--radius-card); text-align:left; font:inherit; line-height:1.35; transition:background-color .18s ease, border-color .18s ease; }
.froz-demo .demo-aviso .demo-aviso-opcion--guia { background:var(--action-primary); color:#fff; }
.froz-demo .demo-aviso .demo-aviso-opcion--guia:hover { background:var(--action-hover); border-color:var(--action-hover); }
.froz-demo .demo-aviso .demo-aviso-opcion--guia:active { background:var(--action-active); border-color:var(--action-active); }
.froz-demo .demo-aviso .demo-aviso-opcion--libre { background:#fff; color:var(--brand-primary); }
.froz-demo .demo-aviso .demo-aviso-opcion--libre:hover { background:var(--action-tint); border-color:var(--action-primary); }
.froz-demo .demo-aviso .demo-aviso-opcion--libre:active { background:#DCE6FC; }
.demo-aviso-icono { flex:none; width:32px; height:32px; }
.demo-aviso-opcion-textos { display:flex; flex-direction:column; gap:5px; min-width:0; }
.demo-aviso-opcion-titulo { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font:700 1.125rem/1.25 var(--font-display); }
.demo-aviso-opcion-linea { font-size:.875rem; font-weight:500; }
.demo-aviso-opcion--libre .demo-aviso-opcion-linea { color:var(--text-secondary); }
.demo-aviso-sello { display:inline-block; padding:3px 9px; border-radius:999px; background:#fff; color:var(--action-primary); font:700 .7rem/1.2 var(--font-text); letter-spacing:.02em; }
.demo-aviso-real { margin:18px 0 0; color:var(--text-secondary); font-size:.875rem; line-height:1.5; }
.demo-aviso-real a,.demo-aviso-sigue a { font-weight:650; }
/* La tarjeta espera su entrada (aviso.js) sin verse ni recibir clics. */
.demo-aviso[data-demo-aviso-entrada="espera"] .demo-aviso-tarjeta { opacity:0; transform:translateY(14px); pointer-events:none; }
/* Línea bajo la demo (va fuera de la sección): reserva su alto siempre y no se ve mientras el aviso está puesto. */
.demo-aviso-sigue { margin:14px 0 0; color:var(--text-secondary); font-size:.8125rem; line-height:1.5; }
.froz-demo[data-demo-aviso="pendiente"] + .demo-aviso-sigue,.froz-demo[data-demo-aviso="abriendo"] + .demo-aviso-sigue { visibility:hidden; }
@media(max-width:700px) {
 .demo-aviso { padding:16px 12px 20px; }
 .demo-aviso-tarjeta { padding:22px 18px 20px; }
 .froz-demo .demo-aviso .demo-aviso-entrar { width:100%; }
 .demo-aviso-real { flex-basis:100%; }
 .demo-aviso-opciones { grid-template-columns:1fr; gap:10px; margin-top:18px; }
 .froz-demo .demo-aviso .demo-aviso-opcion { min-height:64px; padding:12px 14px; gap:12px; }
 .demo-aviso-icono { width:28px; height:28px; }
 .demo-aviso-opcion-titulo { font-size:1.05rem; }
 .demo-aviso-linea { right:0; bottom:auto; width:auto; height:2px; }
 .demo-aviso-vidrio::after { right:0; bottom:auto; width:auto; height:120px; background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0)); }
 /* Blanco táctil de 44 px para el enlace de la invitación (tarjeta y línea). La caja sobresale 8 px de su renglón: el anillo de foco se dibuja 10 px adentro, a 2 px del texto, para no cruzar el renglón de arriba ni pegarse al botón. */
 .demo-aviso-real a,.demo-aviso-sigue a { display:inline-block; padding:12px; margin:-8px -12px; line-height:20px; }
 .demo-aviso-real a:focus-visible,.demo-aviso-sigue a:focus-visible { outline-offset:-10px; border-radius:13px; }
}
/* Celulares bajos: la misma tarjeta, más compacta, para que siga cabiendo pegada bajo la cabecera con aire debajo. */
@media(max-width:700px) and (max-height:700px) {
 .demo-aviso-tarjeta { padding:16px 16px 14px; }
 .demo-aviso-titulo { margin-bottom:6px; font-size:1.15rem; }
 .demo-aviso-texto { font-size:.875rem; line-height:1.45; }
 .demo-aviso-opciones { gap:8px; margin-top:12px; }
 .froz-demo .demo-aviso .demo-aviso-opcion { min-height:56px; padding:9px 12px; }
 .demo-aviso-opcion-titulo { font-size:1rem; }
 .demo-aviso-opcion-linea { font-size:.8rem; }
 .demo-aviso-real { margin-top:10px; font-size:.8rem; }
}
@media(prefers-reduced-motion:no-preference) {
 .froz-demo[data-demo-aviso-anima] .demo-aviso[data-demo-aviso-entrada="entra"] .demo-aviso-tarjeta { animation:demo-aviso-entra .5s cubic-bezier(.2,.7,.2,1) backwards; }
 .froz-demo[data-demo-aviso-anima] .demo-aviso[data-demo-aviso-entrada="entra"] .demo-aviso-tarjeta::before { animation:demo-aviso-traza .7s cubic-bezier(.2,.7,.2,1) .15s backwards; }
 .froz-demo[data-demo-aviso-anima][data-demo-aviso="abriendo"] .demo-aviso .demo-aviso-tarjeta { animation:demo-aviso-funde .18s ease-out forwards; }
 .froz-demo[data-demo-aviso-anima][data-demo-aviso="abriendo"] .demo-aviso-vidrio { animation:demo-aviso-barre .95s cubic-bezier(.65,0,.35,1) .08s forwards; }
 .froz-demo[data-demo-aviso-anima][data-demo-aviso="abriendo"] .demo-aviso-linea,.froz-demo[data-demo-aviso-anima][data-demo-aviso="abriendo"] .demo-aviso-vidrio::after { animation:demo-aviso-luz .95s linear .08s forwards; }
 .froz-demo[data-demo-aviso-anima][data-demo-aviso="aceptado"] + .demo-aviso-sigue { animation:demo-aviso-asoma .5s ease-out backwards; }
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference) {
 .froz-demo[data-demo-aviso-anima][data-demo-aviso="abriendo"] .demo-aviso-vidrio { animation-name:demo-aviso-baja; }
}
@keyframes demo-aviso-entra { from { opacity:0; transform:translateY(14px); } }
@keyframes demo-aviso-traza { from { transform:scaleX(0); } }
@keyframes demo-aviso-funde { to { opacity:0; transform:translateY(-6px); } }
@keyframes demo-aviso-barre { to { transform:translateX(100%); } }
@keyframes demo-aviso-baja { to { transform:translateY(100%); } }
@keyframes demo-aviso-luz { 0% { opacity:0; } 12% { opacity:1; } 78% { opacity:1; } 100% { opacity:0; } }
@keyframes demo-aviso-asoma { from { opacity:0; } }
/* Quien pidió menos transparencia: vidrio casi opaco, sin desenfoque. */
@media(prefers-reduced-transparency:reduce) {
 .demo-aviso-vidrio { background:rgba(247,250,252,.95); -webkit-backdrop-filter:none; backdrop-filter:none; }
 .demo-aviso-vidrio::before { display:none; }
}
/* Colores forzados: velo opaco del color del sistema y la tarjeta con borde; fuera lo decorativo. El borde transparente del botón se pinta solo. */
@media(forced-colors:active) {
 .demo-aviso-vidrio { background:Canvas; -webkit-backdrop-filter:none; backdrop-filter:none; }
 .demo-aviso-vidrio::before,.demo-aviso-vidrio::after,.demo-aviso-linea,.demo-aviso-tarjeta::before { display:none; }
 .demo-aviso-tarjeta { border:2px solid CanvasText; box-shadow:none; }
 .froz-demo .demo-aviso .demo-aviso-opcion { border:2px solid ButtonText; }
 .demo-aviso-sello { border:1px solid CanvasText; }
}
/* Al imprimir no hay aviso: se imprime la demo como antes, con la línea de invitación. */
@media print {
 .demo-aviso { display:none!important; }
 .demo-aviso-sigue { visibility:visible!important; }
}

/* Guía paso a paso (demo/guide.js; pedido de Manuel, 2026-10-23): dos modos grandes arriba; un globo con flecha junto al control que hay que usar (en celular, un muelle fijo abajo); un foco visual que oscurece el resto de la demo; una mano que muestra el gesto sobre el modelo; y un aviso chico en el visor que ofrece la guía en exploración libre. */
/* [data-demo-ui] abre su propio apilamiento: todo lo de la guía queda debajo del velo de la tarjeta de entrada (z 4). */
.froz-demo [data-demo-ui] { position:relative; z-index:0; }
/* Con el muelle a la vista, la demo pasa sobre el contenido que la sigue (bajo la cabecera, z 50). La demo ampliada conserva su z 10000. */
.froz-demo[data-guia-muelle]:not(.demo-expanded) { z-index:30; }
/* Modos: dos segmentos grandes con dibujo. Los bloques .demo-modes de arriba quedan para un app.js anterior en caché. */
.demo-modes--segmentado { gap:4px; padding:4px; border:1px solid #C2D1F4; border-radius:12px; background:#F2F6FF; }
.froz-demo .demo-modes--segmentado button { display:flex; flex-direction:row; align-items:center; gap:10px; min-height:48px; padding:7px 16px 7px 12px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--brand-primary); text-align:left; }
.froz-demo .demo-modes--segmentado button:hover:not(:disabled) { background:#fff; border-color:#9CB4E4; }
.froz-demo .demo-modes--segmentado button[aria-pressed="true"],.froz-demo .demo-modes--segmentado button[aria-pressed="true"]:hover:not(:disabled) { background:var(--action-primary); border-color:var(--action-primary); color:#fff; }
.demo-modes-icono { flex:none; width:22px; height:22px; }
.froz-demo .demo-modes--segmentado .demo-modes-textos { display:flex; flex-direction:column; margin:0; opacity:1; font-size:inherit; font-weight:inherit; }
.froz-demo .demo-modes--segmentado .demo-modes-textos strong { font:700 .9rem/1.2 var(--font-display); }
.froz-demo .demo-modes--segmentado .demo-modes-textos span { margin-top:1px; font-size:.72rem; font-weight:400; opacity:.88; }

/* Globo: flota dentro de [data-demo-ui]; guide.js le pone left y top. */
.froz-demo .demo-guia { display:block; position:absolute; z-index:8; top:0; left:0; width:min(340px, calc(100% - 24px)); margin:0; padding:16px 18px 14px; color:var(--brand-primary); background:#fff; border:1px solid #BACEDD; border-left-width:1px; border-radius:14px; box-shadow:0 18px 48px #102B4633; }
.froz-demo .demo-guia::before { content:""; position:absolute; top:-1px; left:18px; right:18px; height:2px; border-radius:1px; background:var(--brand-margin); }
.froz-demo .demo-guia:focus-visible { outline:3px solid #2457E6; outline-offset:3px; border-radius:14px; }
.froz-demo .demo-guia[data-oculta] { visibility:hidden; }
/* La flecha: un cuadrado girado en el borde que mira al objetivo. */
.froz-demo .demo-guia[data-lado]::after { content:""; position:absolute; width:14px; height:14px; background:#fff; transform:rotate(45deg); }
.froz-demo .demo-guia[data-lado="abajo"]::after { top:-8px; left:calc(var(--flecha-x, 50%) - 7px); border-left:1px solid #BACEDD; border-top:1px solid #BACEDD; }
.froz-demo .demo-guia[data-lado="arriba"]::after { bottom:-8px; left:calc(var(--flecha-x, 50%) - 7px); border-right:1px solid #BACEDD; border-bottom:1px solid #BACEDD; }
.froz-demo .demo-guia[data-lado="izquierda"]::after { right:-8px; top:calc(var(--flecha-y, 50%) - 7px); border-top:1px solid #BACEDD; border-right:1px solid #BACEDD; }
.froz-demo .demo-guia[data-lado="derecha"]::after { left:-8px; top:calc(var(--flecha-y, 50%) - 7px); border-bottom:1px solid #BACEDD; border-left:1px solid #BACEDD; }
.froz-demo .demo-guia[data-lado="interior"]::after,.froz-demo .demo-guia[data-lado="centro"]::after { display:none; }
.demo-guia-cabeza { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.demo-guia-cabeza-der { display:flex; align-items:center; gap:2px; }
.demo-guia-eyebrow { font:800 .68rem/1.3 var(--font-text); letter-spacing:.13em; color:#405D77; }
.froz-demo .demo-guia .demo-guia-salir,.froz-demo .demo-guia .demo-guia-achicar { min-height:32px; padding:4px 8px; border:0; border-radius:6px; background:transparent; color:var(--action-primary); font-size:.78rem; font-weight:650; text-decoration:underline; text-underline-offset:3px; }
.froz-demo .demo-guia .demo-guia-salir:hover:not(:disabled),.froz-demo .demo-guia .demo-guia-achicar:hover:not(:disabled) { background:#EEF3FE; }
.demo-guia-avance { display:flex; gap:4px; margin:0 0 12px; }
.demo-guia-avance i { flex:1; height:4px; border-radius:2px; background:#DCE4EC; }
.demo-guia-avance i[data-saltado] { background:#C5CFDA; }
.demo-guia-avance i[data-actual] { background:#9CB4E4; }
.demo-guia-avance i[data-hecho] { background:var(--action-primary); }
.froz-demo .demo-guia-titulo { margin:0 0 10px; font:800 1.15rem/1.25 var(--font-display); letter-spacing:-.02em; color:var(--brand-primary); }
/* Las acciones del paso: la actual, grande; las hechas, con su visto. */
.demo-guia-lista { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.demo-guia-lista li { display:flex; align-items:flex-start; gap:10px; font-size:.84rem; line-height:1.45; color:#4A6176; }
.demo-guia-marca { flex:none; display:grid; place-items:center; width:22px; height:22px; margin-top:-1px; border:1.5px solid #9CB4E4; border-radius:50%; font:700 .72rem/1 var(--font-text); color:#405D77; }
.demo-guia-lista li[data-estado="actual"] { font-size:1rem; font-weight:650; color:var(--brand-primary); }
.demo-guia-lista li[data-estado="actual"] .demo-guia-marca { width:24px; height:24px; border-color:var(--action-primary); background:var(--action-primary); color:#fff; }
.demo-guia-lista li[data-estado="hecho"] .demo-guia-marca { border-color:var(--action-primary); background:var(--action-tint); color:var(--action-primary); }
.demo-guia-consejo { margin:10px 0 0; font-size:.76rem; line-height:1.45; color:#53687B; }
.demo-guia-pista { margin:10px 0 0; padding:9px 12px; border-left:3px solid #705DC6; border-radius:6px; background:#F2F0F8; font-size:.8rem; line-height:1.45; color:var(--brand-primary); }
.demo-guia-pista[data-espera] { border-left-color:#2457E6; background:#EEF3FE; }
/* El éxito: visto, «¡Bien hecho!» y una línea; una barra muestra cuánto falta para seguir. */
.demo-guia-exito { position:relative; display:flex; align-items:center; gap:10px; margin:12px 0 0; padding:10px 12px 12px; overflow:hidden; border-radius:10px; background:#EEF3FE; }
.demo-guia-visto { flex:none; width:28px; height:28px; color:var(--action-primary); }
.demo-guia-exito strong { display:block; font:800 .98rem/1.2 var(--font-display); color:var(--brand-primary); }
.demo-guia-exito span { display:block; margin-top:2px; font-size:.8rem; line-height:1.4; color:#3E546A; }
.demo-guia-reloj { position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--action-primary); transform-origin:0 50%; transform:scaleX(0); }
.demo-guia-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; }
.demo-guia-nav-der { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.froz-demo .demo-guia-nav button { min-height:40px; }
.froz-demo .demo-guia-nav button[aria-disabled="true"] { opacity:.45; cursor:default; }
.froz-demo .demo-guia .demo-guia-principal,.froz-demo .demo-guia .demo-guia-principal:hover:not(:disabled) { background:var(--action-primary); border-color:var(--action-primary); color:#fff; }
.froz-demo .demo-guia .demo-guia-principal:hover:not(:disabled) { background:var(--action-hover); border-color:var(--action-hover); }
.froz-demo .demo-guia .demo-guia-hazlo { border-color:#705DC6; color:#4F3FA0; }
/* La tarjeta final. */
.demo-guia-final { display:grid; justify-items:start; gap:8px; }
.demo-guia-final .demo-guia-visto { width:36px; height:36px; }
.demo-guia-final-titulo { font:800 1.2rem/1.25 var(--font-display); letter-spacing:-.02em; }
.demo-guia-final p { margin:0; font-size:.86rem; line-height:1.5; color:var(--text-secondary); }
.demo-guia-final-acciones { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:6px; }
.demo-guia-final-acciones a { display:inline-flex; align-items:center; min-height:40px; font-size:.84rem; font-weight:650; }
.froz-demo .demo-guia[data-fase="final"] { width:min(400px, calc(100% - 24px)); }
/* Franja de la guía dentro de los diálogos de la marca y del informe. */
.demo-guia-franja { margin:0 0 14px; padding:9px 12px; border-left:3px solid #2457E6; border-radius:6px; background:#EEF3FE; font-size:.8rem; line-height:1.45; color:var(--brand-primary); }
.demo-report-dialog .report-chrome .demo-guia-franja { margin:12px 0 0; }

/* Foco visual: un marco sobre el objetivo y una sombra enorme que oscurece el resto (la sección la recorta). No recibe clics. */
.froz-demo .demo-guia-foco { position:absolute; z-index:6; top:0; left:0; width:0; height:0; border-radius:12px; pointer-events:none; box-shadow:0 0 0 2px #fff, 0 0 0 5px #705DC6, 0 0 0 9999px rgba(16,43,70,.26); transition:none; }
.froz-demo .demo-guia-foco[data-sin-atenuar] { box-shadow:0 0 0 2px #fff, 0 0 0 5px #705DC6; }
.froz-demo .demo-guia-foco::after { content:""; position:absolute; inset:-5px; border:3px solid #705DC6; border-radius:15px; opacity:0; }

/* La mano: su punto (0, 0) es la yema del índice, sobre el lugar del gesto. */
.froz-demo .demo-guia-mano { position:absolute; z-index:7; left:0; top:0; width:0; height:0; pointer-events:none; }
.demo-guia-mueve { position:absolute; left:0; top:0; }
/* max-width:none: la regla general «svg { max-width:100% }» los dejaría en 0 px (su caja no tiene ancho). */
.demo-guia-dedo { position:absolute; left:-13px; top:-3px; width:40px; height:50px; max-width:none; filter:drop-shadow(0 4px 6px rgba(16,43,70,.35)); }
.demo-guia-onda { position:absolute; left:-15px; top:-15px; width:30px; height:30px; border:2px solid #705DC6; border-radius:50%; opacity:0; }
.demo-guia-rastro { position:absolute; left:-60px; top:-30px; width:120px; height:60px; max-width:none; overflow:visible; fill:none; stroke:#705DC6; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:5 6; opacity:.85; }
/* Quieta (movimiento reducido, laboratorio): la mano al comienzo del gesto, con su recorrido dibujado. */
.demo-guia-mano[data-gesto="arrastre"] .demo-guia-mueve { transform:translate(-44px,6px); }
.demo-guia-mano[data-gesto="trazo"] .demo-guia-mueve { transform:translate(-34px,-10px); }
.demo-guia-mano[data-gesto="dos-toques"] .demo-guia-mueve { transform:translate(-30px,0); }

/* El aviso chico del modo libre, sobre el visor. */
.froz-demo .demo-guia-chip { position:absolute; z-index:3; top:44px; right:16px; display:flex; align-items:center; gap:2px; max-width:calc(100% - 32px); padding:2px 2px 2px 12px; background:#fff; border:1px solid #C2D1F4; border-radius:999px; box-shadow:0 8px 24px #102B461f; }
.froz-demo .demo-guia-chip svg { flex:none; width:18px; height:18px; color:var(--action-primary); }
.froz-demo .demo-guia-chip button { min-height:44px; border:0; background:transparent; }
.froz-demo .demo-guia-chip [data-guide-nav="start"] { padding:8px 6px 8px 8px; color:var(--action-primary); font-size:.8rem; font-weight:650; text-align:left; }
.froz-demo .demo-guia-chip [data-guide-nav="chip-off"] { min-width:44px; border-radius:50%; color:#53687B; font-size:1.1rem; }
.froz-demo .demo-guia-chip button:hover:not(:disabled) { background:#EEF3FE; }

/* Muelle: en celulares, tabletas en vertical y ventanas bajas, la guía va fija abajo de la pantalla. */
.froz-demo .demo-guia[data-modo="muelle"] { position:fixed; top:auto; left:8px; right:8px; bottom:max(8px, env(safe-area-inset-bottom)); width:auto; max-width:560px; margin:0 auto; max-height:min(50vh, 400px); overflow:auto; overscroll-behavior:contain; padding:12px 14px 12px; box-shadow:0 -6px 28px #102B4626, 0 18px 48px #102B4633; }
.froz-demo .demo-guia[data-modo="muelle"][data-fuera] { visibility:hidden; }
.froz-demo .demo-guia[data-modo="muelle"] .demo-guia-cabeza { margin-bottom:6px; }
.froz-demo .demo-guia[data-modo="muelle"] .demo-guia-avance { margin-bottom:8px; }
.froz-demo .demo-guia[data-modo="muelle"] .demo-guia-titulo { margin-bottom:8px; font-size:1.05rem; }
.froz-demo .demo-guia[data-modo="muelle"] .demo-guia-nav { margin-top:10px; }
.froz-demo .demo-guia[data-modo="muelle"] button,.froz-demo .demo-guia[data-modo="muelle"] .demo-guia-final-acciones a { min-height:44px; }
.froz-demo .demo-guia[data-compacta] .demo-guia-lista li:not([data-estado="actual"]),.froz-demo .demo-guia[data-compacta] .demo-guia-consejo { display:none; }
/* Acostado: una sola fila (la acción a la izquierda, los botones a la derecha) que pasa a dos solo si no
   cabe; sin título, barra de avance, consejo ni «Atrás». La cabecera se reparte en la fila. */
.froz-demo .demo-guia[data-acostado] { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; max-width:none; max-height:min(56vh, 220px); padding:6px 8px 6px 14px; }
.froz-demo .demo-guia[data-acostado] .demo-guia-titulo,.froz-demo .demo-guia[data-acostado] .demo-guia-avance,.froz-demo .demo-guia[data-acostado] .demo-guia-consejo,.froz-demo .demo-guia[data-acostado] [data-guide-nav="back"] { display:none; }
.froz-demo .demo-guia[data-acostado] .demo-guia-cabeza { display:contents; }
.froz-demo .demo-guia[data-acostado] .demo-guia-eyebrow { order:1; flex:none; }
.froz-demo .demo-guia[data-acostado] .demo-guia-lista,.froz-demo .demo-guia[data-acostado] .demo-guia-exito { order:2; flex:1 1 220px; margin:0; }
.froz-demo .demo-guia[data-acostado][data-fase="exito"] .demo-guia-lista { display:none; }
.froz-demo .demo-guia[data-acostado] .demo-guia-lista li[data-estado="actual"] { font-size:.92rem; }
.froz-demo .demo-guia[data-acostado] .demo-guia-exito { padding:6px 10px 8px; }
/* «Achicar» y «Salir» antes que la navegación: el mismo orden que en el código, así el teclado va de
   izquierda a derecha. */
.froz-demo .demo-guia[data-acostado] .demo-guia-cabeza-der { order:3; flex:none; }
.froz-demo .demo-guia[data-acostado] .demo-guia-nav { order:4; flex:none; margin:0; }
.froz-demo .demo-guia[data-acostado] .demo-guia-pista,.froz-demo .demo-guia[data-acostado] .demo-guia-final { order:5; flex:1 1 100%; margin:0; }
/* Achicada: solo la cabecera y el título del paso. */
.froz-demo .demo-guia[data-mini] > :not(.demo-guia-cabeza):not(.demo-guia-titulo) { display:none; }
.froz-demo .demo-guia[data-mini] .demo-guia-titulo { margin:0; font-size:.95rem; }
.froz-demo .demo-guia[data-mini] .demo-guia-cabeza { margin-bottom:2px; }

@media(prefers-reduced-motion:no-preference) {
 .froz-demo[data-guia-anima] .demo-guia-foco:not([data-sin-atenuar])::after { animation:demo-guia-pulso 1.6s ease-out 3; }
 .froz-demo[data-guia-anima] .demo-guia-reloj[data-corre] { animation:demo-guia-reloj var(--guia-avance, 2200ms) linear forwards; }
 .froz-demo[data-guia-anima] .demo-guia-mano[data-gesto="arrastre"] .demo-guia-mueve { animation:demo-guia-arrastre 2.4s ease-in-out infinite; }
 .froz-demo[data-guia-anima] .demo-guia-mano[data-gesto="trazo"] .demo-guia-mueve { animation:demo-guia-trazo 2.4s ease-in-out infinite; }
 .froz-demo[data-guia-anima] .demo-guia-mano[data-gesto="toque"] .demo-guia-mueve { animation:demo-guia-toque 2.4s ease-in-out infinite; }
 .froz-demo[data-guia-anima] .demo-guia-mano[data-gesto="dos-toques"] .demo-guia-mueve { animation:demo-guia-dos-toques 2.4s ease-in-out infinite; }
 .froz-demo[data-guia-anima] .demo-guia-mano[data-gesto="toque"] .demo-guia-onda { animation:demo-guia-onda 2.4s ease-out infinite .62s; }
 .froz-demo[data-guia-anima] .demo-guia-mano[data-gesto="dos-toques"] .demo-guia-onda { animation:demo-guia-onda 2.4s ease-out infinite .5s; }
 .froz-demo[data-guia-anima] .demo-guia-mano[data-gesto="dos-toques"] .demo-guia-onda--b { animation-delay:1.55s; }
 .froz-demo[data-guia-anima] .demo-guia-mano[data-gesto="trazo"] .demo-guia-rastro path,.froz-demo[data-guia-anima] .demo-guia-mano[data-gesto="arrastre"] .demo-guia-rastro path { animation:demo-guia-dibuja 2.4s ease-in-out infinite; }
}
@keyframes demo-guia-pulso { 0% { opacity:.9; transform:scale(1); } 100% { opacity:0; transform:scale(1.06); } }
@keyframes demo-guia-reloj { from { transform:scaleX(1); } to { transform:scaleX(0); } }
@keyframes demo-guia-arrastre { 0%,12% { transform:translate(-44px,6px) scale(1); } 18% { transform:translate(-44px,6px) scale(.9); } 62% { transform:translate(44px,-2px) scale(.9); } 70% { transform:translate(44px,-2px) scale(1); opacity:1; } 88% { opacity:0; } 89% { transform:translate(-44px,6px); opacity:0; } 100% { transform:translate(-44px,6px); opacity:1; } }
@keyframes demo-guia-trazo { 0%,10% { transform:translate(-34px,-10px) scale(1); } 16% { transform:translate(-34px,-10px) scale(.9); } 28% { transform:translate(-17px,10px) scale(.9); } 40% { transform:translate(0,-10px) scale(.9); } 52% { transform:translate(17px,10px) scale(.9); } 64% { transform:translate(34px,-10px) scale(.9); } 72% { transform:translate(34px,-10px) scale(1); opacity:1; } 88% { opacity:0; } 89% { transform:translate(-34px,-10px); opacity:0; } 100% { transform:translate(-34px,-10px); opacity:1; } }
@keyframes demo-guia-toque { 0%,14% { transform:translate(8px,-22px) scale(1); } 26% { transform:translate(0,0) scale(1); } 32% { transform:translate(0,0) scale(.88); } 42% { transform:translate(0,0) scale(1); } 70%,100% { transform:translate(8px,-22px) scale(1); } }
@keyframes demo-guia-dos-toques { 0%,8% { transform:translate(-30px,-18px); } 18% { transform:translate(-30px,0) scale(1); } 22% { transform:translate(-30px,0) scale(.88); } 30% { transform:translate(-30px,0) scale(1); } 56% { transform:translate(30px,0) scale(1); } 62% { transform:translate(30px,0) scale(.88); } 70% { transform:translate(30px,0) scale(1); } 90%,100% { transform:translate(-30px,-18px); } }
@keyframes demo-guia-onda { 0% { opacity:.9; transform:scale(.4); } 30% { opacity:0; transform:scale(1.6); } 100% { opacity:0; transform:scale(1.6); } }
@keyframes demo-guia-dibuja { 0%,14% { stroke-dashoffset:120; } 64%,100% { stroke-dashoffset:0; } }
/* Colores forzados: el foco es un contorno del sistema (la sombra desaparece) y el globo, una caja con borde. */
@media(forced-colors:active) {
 .froz-demo .demo-guia-foco,.froz-demo .demo-guia-foco[data-sin-atenuar] { box-shadow:none; outline:4px solid Highlight; outline-offset:2px; }
 .froz-demo .demo-guia-foco::after { display:none; }
 .froz-demo .demo-guia { border:2px solid CanvasText; }
 .froz-demo .demo-guia[data-lado]::after { border-color:CanvasText; }
 .froz-demo .demo-guia-chip { border:2px solid CanvasText; }
 .demo-guia-dedo path { fill:Canvas; stroke:CanvasText; }
 .demo-guia-rastro { stroke:Highlight; }
 /* El modo presionado y la barra de avance se distinguen sin colores de fondo (con el foco del teclado,
    manda el anillo de foco de siempre). */
 .froz-demo button[aria-pressed="true"]:not(:focus-visible) { outline:3px solid Highlight; outline-offset:-5px; }
 .demo-guia-avance i { border:1px solid CanvasText; }
 .demo-guia-avance i[data-hecho] { background:Highlight; forced-color-adjust:none; }
}
@media print {
 .froz-demo .demo-guia,.froz-demo .demo-guia-foco,.froz-demo .demo-guia-mano,.froz-demo .demo-guia-chip,.demo-guia-franja { display:none!important; }
}