/* Vista grande de cada agente («Ver cómo funciona») · 04-10-2026.
   Ventana encima de la página: cabecera (servicio + agente + controles), el escenario fijo de 1000 × 620 que se escala ENTERO
   (también en el móvil: se ve en horizontal, como en el ordenador), la barra de avance y el subtítulo tipo tutorial debajo.
   Las piezas de interfaz (WhatsApp, app, ficha…) son las de agentes.css; cada demo pone su colocación en secciones/demos/dNN-*.css. */
.dm[hidden]{ display:none; }
.dm{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:24px; }
.dm-fondo{ position:absolute; inset:0; background:rgba(10,10,10,.64); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:dm-fade .25s ease both; }
.dm-ventana{ position:relative; width:min(1180px, 100%); max-height:100%; display:flex; flex-direction:column; background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.65); animation:dm-entra .4s cubic-bezier(.16,1,.3,1) both; }
@keyframes dm-fade{ from{ opacity:0; } }
@keyframes dm-entra{ from{ opacity:0; transform:translateY(18px) scale(.98); } }

/* Cabecera */
.dm-cab{ flex:none; display:flex; align-items:center; gap:16px; padding:12px 14px 12px 22px; border-bottom:1px solid var(--linea); }
.dm-tit{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.dm-servicio{ font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-tit b{ font-size:18px; font-weight:500; letter-spacing:-.015em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-ctrl{ margin-left:auto; display:flex; gap:6px; flex:none; }
.dm-btn{ width:38px; height:38px; padding:0; border-radius:50%; border:1px solid var(--linea); background:#fff; color:var(--tinta-80); display:grid; place-items:center; cursor:pointer; transition:background .2s, border-color .2s; }
.dm-btn:hover{ background:var(--nieve); border-color:var(--linea-fuerte, rgba(10,10,10,.18)); }
.dm-btn .ico{ width:16px; height:16px; }
.dm-pausa .i-play, .dm-pausa[aria-pressed="true"] .i-pausa{ display:none; }
.dm-pausa[aria-pressed="true"] .i-play{ display:block; }
/* Sonido (demos con llamada): altavoz / tachado; si el navegador no dejó sonar el audio, el botón llama la atención */
.dm-sonido[hidden]{ display:none; }
.dm-sonido .i-sin, .dm-sonido[aria-pressed="true"] .i-con{ display:none; }
.dm-sonido[aria-pressed="true"] .i-sin{ display:block; }
.dm-sonido.llama{ border-color:var(--verde); box-shadow:0 0 0 3px rgba(60,193,160,.25); animation:dmLlama 1.4s ease-in-out infinite; }
@keyframes dmLlama{ 50%{ box-shadow:0 0 0 7px rgba(60,193,160,0); } }
.dm-cerrar{ background:var(--tinta); border-color:var(--tinta); color:#fff; }
.dm-cerrar:hover{ background:#262626; border-color:#262626; }

/* Escenario: la demo a tamaño fijo, escalada por JS */
.dm-escenario{ position:relative; flex:none; background:var(--nieve); overflow:hidden; }
.dm-esc{ position:absolute; left:0; top:0; width:1000px; height:620px; transform-origin:top left; }
.dm-escenario > .ejemplo{ top:auto; bottom:10px; left:12px; right:auto; }
.dm-barra{ flex:none; height:3px; background:var(--linea); }
.dm-barra i{ display:block; height:100%; width:0; background:var(--verde); }

/* Subtítulo tipo tutorial: lo que pasa en cada momento */
.dm-nota{ flex:none; display:flex; align-items:center; gap:14px; min-height:68px; padding:12px 22px; background:#0a0a0a; color:#fff; }
.dm-nota-n{ flex:none; min-width:46px; height:26px; padding:0 9px; border-radius:999px; background:var(--verde); color:#0a0a0a; font-size:12px; font-weight:600;
  display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.dm-nota p{ margin:0; font-size:16px; line-height:1.4; letter-spacing:-.01em; text-wrap:pretty; }
.dm-nota.cambia p{ animation:dm-nota .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes dm-nota{ from{ opacity:0; transform:translateY(6px); } }
.dm-girar{ display:none; align-items:center; justify-content:center; gap:8px; margin:0; padding:9px 16px; font-size:13px; color:var(--tinta-60); background:var(--nieve); border-top:1px solid var(--linea); }
.dm-girar .ico{ width:16px; height:16px; }

/* Lo que está a la vista en la vista grande se resalta un instante al cambiar */
.dm-esc .destello{ animation:destello 1.2s ease-out; }

/* Dentro de la vista grande no vale el apilado de móvil de agentes.css: el escenario es siempre el de escritorio */
.dm .scroll-auto, .dm .fi-scroll{ flex:1 1 auto !important; max-height:none !important; }
.dm .wa-cab > .ico:not(.wa-atras){ display:inline-block !important; }

/* Móvil y pantallas pequeñas: la ventana ocupa toda la pantalla */
@media (max-width:899px), (max-height:560px){
  .dm{ padding:0; }
  .dm-ventana{ width:100%; height:100%; max-height:none; border-radius:0; }
  .dm-escenario{ flex:1; display:flex; align-items:center; }
  .dm-cab{ padding:8px 10px 8px 16px; }
  .dm-tit b{ font-size:15.5px; }
  .dm-btn{ width:34px; height:34px; }
  .dm-nota{ min-height:58px; padding:10px 16px; gap:10px; }
  .dm-nota p{ font-size:14px; }
}
@media (max-width:899px) and (orientation:portrait){ .dm-girar{ display:flex; } }
@media (max-height:420px){ .dm-cab{ padding-block:4px; } .dm-nota{ min-height:48px; padding-block:6px; } .dm-nota p{ font-size:13px; } }
.dm:fullscreen .dm-ventana, .dm-ventana:fullscreen{ width:100%; height:100%; max-height:none; border-radius:0; }

/* ---------- En cada tarjeta: icono «ver en grande» sobre la portada ---------- */
.se-expandir{ position:absolute; z-index:5; top:10px; left:10px; height:30px; padding:0 10px 0 8px; border:1px solid rgba(10,10,10,.12); border-radius:999px; background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#0a0a0a; display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12px; font-weight:500; cursor:pointer;
  box-shadow:0 4px 12px -6px rgba(10,10,10,.3); transition:transform .2s, background .2s; }
.se-expandir .ico{ width:14px; height:14px; }
.se-expandir:hover{ transform:scale(1.04); background:#fff; }
.se-portada{ cursor:zoom-in; }

/* ---------- Miniatura de la demo en la portada de la tarjeta (04-10-2026) ---------- */
.se-mini{ position:absolute; inset:0; z-index:1; overflow:hidden; background:var(--nieve, #f5f5f7); pointer-events:none; }
.se-mini-esc{ position:absolute; left:0; top:0; width:1000px; height:620px; transform-origin:top left; }
.se-mini .ejemplo, .se-mini .dmb-salto{ display:none; }
/* capa negra suave encima, para que se lea «Ver en grande» */
.se-mini::after{ content:''; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(10,10,10,.18), rgba(10,10,10,.34)); transition:background .25s; }
.se-tarjeta:hover .se-mini::after{ background:linear-gradient(180deg, rgba(10,10,10,.26), rgba(10,10,10,.44)); }
.con-demo .se-esc, .con-demo .se-otra{ display:none !important; }
/* «Ver en grande» en el centro del banner */
.con-demo .se-expandir{ top:0; bottom:0; left:0; right:0; margin:auto; width:fit-content; height:44px; padding:0 18px 0 8px; gap:9px; font-size:14px; font-weight:500;
  background:#fff; border-color:transparent; box-shadow:0 14px 34px -10px rgba(0,0,0,.55); z-index:3; }
.con-demo .se-expandir::before{ content:''; display:none; }
.con-demo .se-expandir .ico{ width:28px; height:28px; padding:7px; border-radius:50%; background:var(--verde); color:#0a0a0a; box-sizing:border-box; }
.con-demo .se-expandir:hover{ transform:scale(1.05); }
@media (max-width:639.98px){ .con-demo .se-expandir{ height:40px; font-size:13.5px; } }