/* La demo de la página GrapeIQ (Iñaki, 20-10): desplegables a la izquierda y la app a la derecha, con capturas reales
   animadas (zoom, cursor, clic y un foco que oscurece el resto). Sale de la maqueta Documentation/web-nueva/demo-bloque/. */
.pag-grapeiq .cab-pag{max-width:none;gap:clamp(24px,3vw,36px)}
.cab-grapeiq-h{font:700 clamp(28px,3.6vw,42px)/1.18 var(--f-sans);letter-spacing:-.02em;max-width:44rem;text-wrap:balance}
.demo{width:100%;display:grid;gap:clamp(20px,2.4vw,28px)}
.demo-rejilla{display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.demo-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}

/* Desplegables */
.demo-lista{display:grid;margin:0;padding:0;list-style:none}
.demo-item{border-bottom:1px solid var(--filete)}
.demo-item:last-child{border-bottom:0}
.demo-boton{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;width:100%;padding:15px 4px 13px;cursor:pointer;font-family:var(--f-sans)}
.demo-boton:focus-visible{outline:2px solid var(--uva);outline-offset:2px;border-radius:var(--radio-s)}
.demo-num{grid-row:span 2;font:600 13px/1.6 var(--f-sans);color:var(--tinta-suave);font-variant-numeric:tabular-nums}
.demo-titulo{font:700 17.5px/1.3 var(--f-sans);color:var(--tinta-suave);transition:color 200ms ease}
.demo-item.abierto .demo-titulo{color:var(--tinta)}
@media (hover:hover) and (pointer:fine){.demo-boton:hover .demo-titulo{color:var(--tinta)}}
.demo-eje{display:flex;align-items:center;gap:8px;font:500 12.5px/1.2 var(--f-sans);color:var(--tinta-suave)}
.demo-eje i{width:3px;height:12px;border-radius:2px;background:var(--uva)}
.demo-eje.traz i{background:var(--raspon)}
.demo-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 300ms var(--ease-out)}
.demo-item.abierto .demo-panel{grid-template-rows:1fr}
.demo-panel>div{overflow:hidden;min-height:0}
.demo-texto{padding:0 4px 16px 34px;color:var(--tinta-suave);font:var(--t-cuerpo);max-width:34rem}
.demo-texto .llegara{margin-left:4px}
.demo-barra{height:2px;margin:0 4px 0 34px;background:var(--filete);border-radius:2px;overflow:hidden}
.demo-barra b{display:block;height:100%;width:100%;background:var(--uva);transform:scaleX(0);transform-origin:0 50%}
.demo-item:not(.abierto) .demo-barra{visibility:hidden}

/* Pantalla */
.demo-escenario{margin:0}
.demo-ventana{position:relative;border-radius:var(--radio-l);background:#fff;box-shadow:0 18px 48px -18px rgba(23,19,26,.28),0 0 0 1px rgba(23,19,26,.07);overflow:hidden}
.demo-ventana-cab{display:flex;gap:6px;padding:10px 12px;background:#EEECE7;border-bottom:1px solid var(--filete)}
.demo-ventana-cab i{width:9px;height:9px;border-radius:50%;background:#D3CEC8}
.demo-lienzo{position:relative;aspect-ratio:1440/900;overflow:hidden;background:var(--fondo)}
.demo-capa{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform;transition:transform 1300ms cubic-bezier(.77,0,.175,1)}
.demo-capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(3px);transition:opacity 500ms ease,filter 500ms ease}
.demo-capa img.visible{opacity:1;filter:none}
.demo-foco{position:absolute;border-radius:10px;box-shadow:0 0 0 200vmax rgba(23,19,26,.28);opacity:0;pointer-events:none;transition:opacity 450ms ease,left 900ms var(--ease-out),top 900ms var(--ease-out),width 900ms var(--ease-out),height 900ms var(--ease-out)}
.demo-foco.visible{opacity:1}
.demo-cursor{position:absolute;width:22px;height:22px;margin:-2px 0 0 -3px;opacity:0;transition:left 1000ms var(--ease-out),top 1000ms var(--ease-out),opacity 250ms ease;pointer-events:none;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.demo-cursor.visible{opacity:1}
.demo-clic{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.7);transform:scale(.2);opacity:0;pointer-events:none}
.demo-clic.ya{animation:demo-clic 460ms var(--ease-out)}
@keyframes demo-clic{0%{transform:scale(.3);opacity:.95}100%{transform:scale(1.4);opacity:0}}
.demo-pie{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:12px;font:var(--t-nota);color:var(--tinta-suave)}
.demo-pausa{all:unset;cursor:pointer;font:600 13px/1 var(--f-sans);color:var(--tinta-suave);padding:8px 2px}
.demo-pausa:focus-visible{outline:2px solid var(--uva);outline-offset:2px;border-radius:4px}
@media (hover:hover) and (pointer:fine){.demo-pausa:hover{color:var(--tinta)}}

@media (max-width:860px){
  .demo-rejilla{grid-template-columns:minmax(0,1fr)}
  .demo-escenario-col{display:none}
  .demo-escenario-movil{padding:0 0 16px}
}
@media (prefers-reduced-motion:reduce){
  .demo-capa,.demo-foco,.demo-cursor,.demo-panel{transition:opacity 200ms ease}
  .demo-capa img{transition:opacity 200ms ease;filter:none}
  .demo-cursor,.demo-clic{display:none}
}