/* Demo guiada (demo.js). Usa los tokens de la landing (:root de index.html). */
.dm{position:relative; margin-top:36px;}

/* Pestañas: una por función, como mini tutoriales. */
.dm-pestanas{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 4px; scroll-snap-type:x proximity;}
.dm-pestanas::-webkit-scrollbar{display:none;}
.dm-pest{flex-shrink:0; scroll-snap-align:center; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  border-radius:12px; border:1px solid var(--border); background:rgba(20,20,22,.7); color:var(--text2);
  font:600 14px/1 'Inter',sans-serif; cursor:pointer; transition:color .2s, border-color .2s, background .2s;}
.dm-pest small{font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.3px;}
.dm-pest:hover{color:var(--text); border-color:rgba(232,169,75,.4);}
.dm-pest.on{color:#0B0B0C; background:var(--grad-gold); border-color:transparent;}
.dm-pest.on small{color:rgba(11,11,12,.6);}

/* Barra de narración: qué está pasando, con anterior / pausa / siguiente. */
.dm-barra{position:relative; display:flex; align-items:center; gap:16px; margin-top:14px; padding:14px 16px 16px; border-radius:16px;
  background:linear-gradient(180deg,rgba(28,27,29,.92),rgba(15,15,17,.92)); border:1px solid rgba(232,169,75,.28); overflow:hidden;}
.dm-narr{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.dm-tit{font-family:var(--sora); font-weight:700; font-size:17px; letter-spacing:-.3px; color:var(--text);}
.dm-baj{font-size:14px; color:var(--text2); min-height:1.4em;}
.dm-ctrl{display:flex; gap:8px; flex-shrink:0;}
.dm-btn{width:44px; height:44px; border-radius:12px; border:1px solid rgba(232,169,75,.45); background:rgba(232,169,75,.08); color:var(--amber-light);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s, border-color .2s;}
.dm-btn:hover{background:rgba(232,169,75,.16); border-color:var(--amber-light);}
.dm-btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
/* Play / pausa dibujados con CSS (sin depender del texto). */
.dm-play::before{content:''; width:0; height:0; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent currentColor; margin-left:3px;}
.dm-play.sonando::before{width:12px; height:15px; border:0; margin:0; background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px);}
/* La línea de tiempo: los momentos de la pestaña, tocables. Cada uno se llena mientras pasa. */
.dm-linea{list-style:none; display:flex; gap:6px; margin:10px 0 0; padding:0 2px 2px; overflow-x:auto; scrollbar-width:none;}
.dm-linea::-webkit-scrollbar{display:none;}
.dm-linea li{flex:1 0 auto; min-width:0;}
.dm-mom{width:100%; display:flex; flex-direction:column; gap:7px; padding:6px 4px 4px; border:0; background:none; cursor:pointer; text-align:left;
  font:500 12.5px/1.25 'Inter',sans-serif; color:var(--muted); white-space:nowrap; transition:color .2s;}
.dm-mom i{display:block; height:4px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden;}
.dm-mom i b{display:block; height:100%; width:0; background:var(--grad-gold); transition:width .4s ease;}
.dm-mom:hover{color:var(--text2);}
.dm-mom.hecho{color:var(--text2);}
.dm-mom.on{color:var(--text); font-weight:700;}

/* La escena: la compu y el celular. */
.dm-escena{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:center; margin-top:22px; min-height:320px;}
.dm-compu,.dm-cel{position:relative; cursor:default; transition:opacity .4s, transform .4s, filter .4s;}
.dm-escena:has(.activo) .dm-compu:not(.activo), .dm-escena:has(.activo) .dm-cel:not(.activo){opacity:.55; filter:saturate(.7);}
.dm-pantalla{position:relative; overflow:hidden; background:#0a0a0a;}
.dm-pantalla iframe{position:absolute; left:0; top:0; border:0; pointer-events:none; background:#0a0a0a;}
/* La lente: se acerca a lo que se toca y se aleja para mirar (demo.js, `enfocar`). */
.dm-lente{position:absolute; left:0; top:0; transform-origin:0 0; transition:transform .65s cubic-bezier(.45,.05,.25,1); will-change:transform;}
.dm-lente.sin-animar{transition:none;}

.dm-compu{border-radius:14px; border:1px solid rgba(255,255,255,.09); background:#141416; overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(232,169,75,.08);}
.dm-compu.activo{box-shadow:0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(232,169,75,.45), 0 0 50px -18px rgba(232,169,75,.55);}
.dm-cromo{display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#1b1b1e; border-bottom:1px solid rgba(255,255,255,.06);}
.dm-cromo i{width:9px; height:9px; border-radius:50%; background:#3a3a3e;}
.dm-cromo span{margin-left:10px; flex:1; max-width:260px; height:18px; border-radius:6px; background:#111113; color:var(--muted); font-size:11px; line-height:18px; padding:0 10px;}

.dm-cel{display:flex; flex-direction:column; align-items:center; gap:10px;}
.dm-quien{font-size:12.5px; font-weight:700; letter-spacing:.3px; color:var(--amber-light); min-height:16px; text-transform:uppercase;}
.dm-telefono{width:100%; padding:10px; border-radius:38px; background:#0d0d0f; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.95), inset 0 0 0 2px #1e1e22;}
.dm-cel.activo .dm-telefono{box-shadow:0 30px 70px -28px rgba(0,0,0,.95), inset 0 0 0 2px #1e1e22, 0 0 0 1px rgba(232,169,75,.45), 0 0 50px -16px rgba(232,169,75,.55);}
.dm-telefono .dm-pantalla{border-radius:29px;}

/* Cursor y anillo, por encima de los aparatos. */
.dm-cursor{position:absolute; left:0; top:0; width:26px; height:26px; margin:-3px 0 0 -4px; z-index:5; pointer-events:none; opacity:0;
  transition:transform .7s cubic-bezier(.45,.05,.25,1), opacity .3s; filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));}
.dm-cursor.on{opacity:1;}
.dm-cursor svg{width:100%; height:100%; fill:#fff; stroke:#0B0B0C; stroke-width:1.5; stroke-linejoin:round;}
.dm-cursor::after{content:''; position:absolute; left:2px; top:1px; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%;
  background:rgba(232,169,75,.55); transform:scale(0); opacity:0;}
.dm-cursor.toca::after{animation:dmToque .45s ease-out;}
@keyframes dmToque{0%{transform:scale(.2); opacity:.9;} 100%{transform:scale(1.5); opacity:0;}}
.dm-anillo{position:absolute; z-index:4; pointer-events:none; border-radius:12px; border:2px solid var(--amber); opacity:0;
  box-shadow:0 0 0 4px rgba(232,169,75,.18), 0 0 30px rgba(232,169,75,.45); transition:opacity .3s;}
.dm-anillo.on{opacity:1; animation:dmLate 1.4s ease-in-out infinite;}
@keyframes dmLate{0%,100%{box-shadow:0 0 0 4px rgba(232,169,75,.18), 0 0 24px rgba(232,169,75,.35);} 50%{box-shadow:0 0 0 7px rgba(232,169,75,.12), 0 0 36px rgba(232,169,75,.55);}}

/* En pausa: grande y a la vista, con cómo seguir (un toque sobre la compu parecía no hacer nada). */
.dm-pausa{position:absolute; inset:-8px; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center;
  border-radius:20px; background:rgba(11,11,12,.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); cursor:pointer;}
.dm-pausa[hidden]{display:none;}
.dm-reanudar{display:inline-flex; align-items:center; gap:12px; min-height:56px; padding:0 28px; border-radius:16px; border:0; cursor:pointer;
  font:700 17px/1 'Inter',sans-serif; color:#0B0B0C; background:var(--grad-gold); box-shadow:0 12px 40px -10px rgba(232,169,75,.8);}
.dm-reanudar span{width:0; height:0; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent currentColor;}
/* El contacto directo, por WhatsApp (en la pausa y al terminar). */
.dm-wa{display:inline-flex; align-items:center; gap:10px; max-width:min(360px, calc(100% - 32px)); min-height:44px; padding:9px 16px; border-radius:12px;
  font-size:14px; font-weight:600; line-height:1.35; text-align:left; color:var(--text); text-decoration:none;
  background:rgba(37,211,102,.1); border:1px solid rgba(37,211,102,.45); transition:background .2s, border-color .2s;}
.dm-wa:hover{background:rgba(37,211,102,.18); border-color:#25D366;}
.dm-wa::before{content:''; flex-shrink:0; width:18px; height:18px; border-radius:50%; background:#25D366
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17 14.3c-.3-.1-1.6-.8-1.9-.9-.3-.1-.4-.1-.6.1l-.8 1c-.2.2-.3.2-.6.1a7 7 0 0 1-3.5-3c-.3-.5.3-.4.8-1.4.1-.2 0-.3 0-.4l-.9-2c-.2-.5-.4-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3a11 11 0 0 0 4.2 3.7c1.6.7 2.2.7 3 .6.5-.1 1.6-.6 1.8-1.3.2-.6.2-1.2.2-1.3l-.4-.4z'/%3E%3C/svg%3E") center/14px no-repeat;}

/* Al terminar: el llamado a probarla. */
.dm-cierre{position:absolute; inset:-8px; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center;
  border-radius:20px; background:rgba(11,11,12,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.dm-cierre[hidden]{display:none;}
.dm-cierre p{font-family:var(--sora); font-weight:700; font-size:clamp(22px,4vw,34px); letter-spacing:-.6px;}
.dm-otra{background:none; border:0; color:var(--text2); font:600 15px 'Inter',sans-serif; cursor:pointer; text-decoration:underline; text-underline-offset:4px; min-height:44px;}
.dm-otra:hover{color:var(--text);}

.dm-cargando{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px;}
.dm.lista .dm-cargando{display:none;}
.dm:not(.lista) .dm-compu, .dm:not(.lista) .dm-cel{visibility:hidden;}

/* Teléfono (la landing en un celular): un solo aparato, el de quien actúa. */
.dm[data-layout="celular"] .dm-escena{grid-template-columns:1fr; justify-items:center;}
.dm[data-layout="celular"] .dm-compu{display:none;}
/* En el teléfono: el aparato a todo el ancho y sin el marco grueso (se lee a casi tamaño real). La
   pantalla es una ventana de la altura disponible; la lente la lleva a donde pasa la acción. */
.dm[data-layout="celular"] .dm-cel{width:100%;}
.dm[data-layout="celular"] .dm-telefono{padding:4px; border-radius:22px;}
.dm[data-layout="celular"] .dm-telefono .dm-pantalla{border-radius:18px;}
.dm[data-layout="celular"] .dm-escena{margin-top:12px; gap:0;}
.dm[data-layout="celular"] .dm-quien{font-size:11.5px;}
.dm[data-layout="celular"] .dm-cel:not(.activo){opacity:1; filter:none;}
@media (max-width:899px){
  .dm{margin-top:24px;}
  .dm-pest{min-height:40px; padding:0 13px; font-size:13.5px;}
  .dm-barra{padding:10px 10px 10px 12px; gap:8px;}
  .dm-tit{font-size:14.5px; line-height:1.3;}
  .dm-baj{font-size:12.5px; line-height:1.4;}
  .dm-ctrl{gap:4px;}
  .dm-btn{width:36px; height:40px; border-radius:10px;}
  .dm-btn svg{width:18px; height:18px;}
  .dm-linea li{flex:0 0 auto;}
  .dm-mom{min-width:96px;}
}
@media (prefers-reduced-motion: reduce){
  .dm-cursor{transition:opacity .2s;}
  .dm-anillo.on{animation:none;}
}