/* ============================================================================
   ZENTRIX — DEMOS EN VIVO
   Maquetas animadas del sistema funcionando. No son capturas: son HTML y CSS,
   pesan nada y no muestran la marca de ninguna herramienta de terceros.

   Regla que las une: el dato entra en CORAL (sin resolver) y sale en CIAN
   (resuelto). Es el mismo lenguaje caos → orden del resto de la web.

   Requiere las variables de styles.css. Se acompaña de demos.js.
   ============================================================================ */

/* ── marco común ──────────────────────────────────────────────────────────── */
.demo{position:relative;border-radius:16px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:0 30px 70px -40px rgba(15,23,42,.4);}
.demo-barra{display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:var(--ink2);border-bottom:1px solid var(--line);}
.demo-barra i{width:10px;height:10px;border-radius:50%;background:var(--faint);opacity:.45;}
.demo-barra i:nth-child(1){background:#ff5f57;opacity:.85;}
.demo-barra i:nth-child(2){background:#febc2e;opacity:.85;}
.demo-barra i:nth-child(3){background:#28c840;opacity:.85;}
.demo-barra b{margin-left:8px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--faint);font-weight:400;text-transform:none;}
.demo-lienzo{padding:20px;min-height:280px;position:relative;}

.demo-pie{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-top:14px;display:flex;align-items:center;gap:8px;}
.demo-pie::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--order);
  box-shadow:0 0 0 0 rgba(8,145,178,.5);animation:latido 2.4s ease-out infinite;}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(8,145,178,.45);}70%{box-shadow:0 0 0 8px rgba(8,145,178,0);}100%{box-shadow:0 0 0 0 rgba(8,145,178,0);}}

/* ══════════════════════════════════════════════════════════════════════════
   1. AGENTE — atiende por varios canales y deja la cita puesta
   ══════════════════════════════════════════════════════════════════════════ */
.d-canales{display:flex;gap:6px;margin-bottom:16px;}
.d-canal{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--faint);
  background:var(--ink2);border:1px solid var(--line);padding:5px 10px;border-radius:50px;
  transition:.4s;}
.d-canal svg{width:13px;height:13px;fill:currentColor;}
.d-canal.vivo{color:var(--order);background:var(--order-soft);border-color:var(--order-line);}

/* los mensajes se apoyan abajo, como en un chat de verdad:
   así el bloque no da saltos mientras van entrando */
.d-chat{display:flex;flex-direction:column;justify-content:flex-end;gap:9px;min-height:270px;}
.d-msg{max-width:80%;padding:10px 13px;border-radius:14px;font-size:.82rem;line-height:1.45;
  opacity:0;transform:translateY(10px);}
.d-msg.entra{background:var(--chaos-soft);border:1px solid var(--chaos-line);color:var(--paper);
  align-self:flex-start;border-bottom-left-radius:4px;}
.d-msg.sale{background:var(--order-soft);border:1px solid var(--order-line);color:var(--paper);
  align-self:flex-end;border-bottom-right-radius:4px;}
.d-msg.aparece{animation:msgEntra .45s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes msgEntra{to{opacity:1;transform:none;}}
.d-msg small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:4px;}

.d-escribiendo{align-self:flex-start;display:inline-flex;gap:4px;padding:12px 14px;
  background:var(--ink2);border:1px solid var(--line);border-radius:14px 14px 14px 4px;
  opacity:0;transition:opacity .3s;}
.d-escribiendo.on{opacity:1;}
.d-escribiendo i{width:5px;height:5px;border-radius:50%;background:var(--faint);
  animation:puntos 1.1s infinite;}
.d-escribiendo i:nth-child(2){animation-delay:.16s;}
.d-escribiendo i:nth-child(3){animation-delay:.32s;}
@keyframes puntos{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

.d-hecho{align-self:center;display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  background:var(--order);color:#fff;font-size:.76rem;font-weight:600;padding:9px 16px;
  border-radius:50px;opacity:0;transform:scale(.9);
  box-shadow:0 10px 26px -10px rgba(8,145,178,.7);}
.d-hecho.aparece{animation:hechoEntra .5s cubic-bezier(.2,1.4,.4,1) forwards;}
@keyframes hechoEntra{to{opacity:1;transform:none;}}
.d-hecho svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}

/* ══════════════════════════════════════════════════════════════════════════
   2. PANEL — lo que ve el cliente cada mañana
   ══════════════════════════════════════════════════════════════════════════ */
.d-panel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px;}
.d-tarjeta{background:var(--ink2);border:1px solid var(--line);border-radius:12px;padding:14px 15px;}
.d-tarjeta .et{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-bottom:7px;}
.d-tarjeta .cifra{font-family:var(--display);font-size:1.75rem;line-height:1;color:var(--paper);}
.d-tarjeta .cifra em{font-style:normal;color:var(--order);}
.d-tarjeta .sub{font-size:.7rem;color:var(--dim);margin-top:5px;display:flex;align-items:center;gap:4px;}
.d-tarjeta .sub b{color:var(--order);font-weight:600;}

/* embudo de estados */
.d-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;}
.d-etapa{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 11px;position:relative;}
.d-etapa .n{font-family:var(--display);font-size:1.2rem;color:var(--paper);line-height:1;}
.d-etapa .t{font-size:.66rem;color:var(--faint);margin-top:4px;}
.d-etapa::after{content:'';position:absolute;left:0;bottom:0;height:2px;border-radius:2px;
  background:var(--order);width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1);}
.d-etapa.lleno::after{width:100%;}
.d-etapa:nth-child(2)::after{transition-delay:.15s;}
.d-etapa:nth-child(3)::after{transition-delay:.3s;}
.d-etapa:nth-child(4)::after{transition-delay:.45s;}

/* actividad en vivo */
.d-act{border-top:1px solid var(--line);padding-top:12px;}
.d-act .cab{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-bottom:10px;}
.d-linea{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:.78rem;color:var(--dim);
  opacity:0;transform:translateX(-8px);}
.d-linea.aparece{animation:lineaEntra .45s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes lineaEntra{to{opacity:1;transform:none;}}
.d-linea .pt{width:7px;height:7px;border-radius:50%;background:var(--order);flex-shrink:0;}
.d-linea .pt.coral{background:var(--chaos);}
.d-linea b{color:var(--paper);font-weight:600;}
.d-linea time{margin-left:auto;font-family:var(--mono);font-size:.64rem;color:var(--faint);}

/* ══════════════════════════════════════════════════════════════════════════
   3. FLUJO — la automatización por dentro
   ══════════════════════════════════════════════════════════════════════════ */
.d-flujo{display:flex;flex-direction:column;gap:0;padding:6px 0;}
.d-nodo{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;position:relative;z-index:2;transition:.4s;}
.d-nodo.activo{border-color:var(--order-line);box-shadow:0 8px 24px -14px rgba(8,145,178,.7);}
.d-nodo .ico{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  background:var(--ink2);border:1px solid var(--line);transition:.4s;}
.d-nodo.activo .ico{background:var(--order-soft);border-color:var(--order-line);}
.d-nodo .ico svg{width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s;}
.d-nodo.activo .ico svg{stroke:var(--order);}
.d-nodo .tx b{display:block;font-size:.84rem;color:var(--paper);font-weight:500;}
.d-nodo .tx span{display:block;font-size:.72rem;color:var(--dim);margin-top:1px;}
.d-nodo .marca{margin-left:auto;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;flex-shrink:0;transition:.4s;}
.d-nodo.activo .marca{background:var(--order);border-color:var(--order);}
.d-nodo .marca svg{width:9px;height:9px;stroke:#fff;fill:none;stroke-width:3.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s .1s;}
.d-nodo.activo .marca svg{opacity:1;}

.d-cable{height:22px;margin-left:31px;width:2px;background:var(--line);position:relative;z-index:1;}
.d-cable::after{content:'';position:absolute;inset:0;background:var(--order);
  transform:scaleY(0);transform-origin:top;transition:transform .5s ease;}
.d-cable.lleno::after{transform:scaleY(1);}

/* ══════════════════════════════════════════════════════════════════════════
   4. CONOCIMIENTO — responde con lo tuyo, no con lo que se inventa
   ══════════════════════════════════════════════════════════════════════════ */
.d-docs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.d-doc{display:flex;align-items:center;gap:7px;background:var(--ink2);border:1px solid var(--line);
  border-radius:9px;padding:8px 11px;font-size:.72rem;color:var(--dim);transition:.4s;}
.d-doc svg{width:13px;height:13px;stroke:var(--faint);fill:none;stroke-width:1.8;transition:stroke .4s;}
.d-doc.leido{border-color:var(--order-line);background:var(--order-soft);color:var(--order);}
.d-doc.leido svg{stroke:var(--order);}

.d-pregunta{background:var(--chaos-soft);border:1px solid var(--chaos-line);border-radius:12px;
  padding:12px 14px;font-size:.84rem;color:var(--paper);margin-bottom:12px;}
.d-pregunta small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--chaos);margin-bottom:5px;}
.d-respuesta{background:#fff;border:1px solid var(--order-line);border-radius:12px;padding:14px 16px;
  font-size:.84rem;color:var(--dim);line-height:1.6;opacity:0;transform:translateY(8px);}
.d-respuesta.aparece{animation:msgEntra .5s cubic-bezier(.2,.7,.2,1) forwards;}
.d-respuesta b{color:var(--paper);}
.d-fuente{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.62rem;color:var(--faint);display:flex;align-items:center;gap:7px;}
.d-fuente span{color:var(--order);}
.d-fuente svg{width:13px;height:13px;flex-shrink:0;stroke:var(--order);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}

/* ══════════════════════════════════════════════════════════════════════════
   5. AGENDA — la semana se llena sola
   ══════════════════════════════════════════════════════════════════════════ */
.d-semana{display:grid;grid-template-columns:44px repeat(5,1fr);gap:4px;font-size:.68rem;}
.d-semana .cab{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);text-align:center;padding-bottom:7px;}
.d-hora{font-family:var(--mono);font-size:.6rem;color:var(--faint);display:flex;align-items:center;
  justify-content:flex-end;padding-right:8px;}
.d-hueco{background:var(--ink2);border:1px dashed var(--line);border-radius:7px;height:34px;
  display:grid;place-items:center;font-size:.62rem;color:transparent;transition:.45s cubic-bezier(.2,.7,.2,1);}
.d-hueco.ocupado{background:var(--order-soft);border:1px solid var(--order-line);border-style:solid;
  color:var(--order);font-weight:600;transform:scale(1);}
.d-hueco.entrando{animation:huecoEntra .5s cubic-bezier(.2,1.3,.4,1);}
@keyframes huecoEntra{0%{transform:scale(.8);opacity:.4;}100%{transform:scale(1);opacity:1;}}
.d-agenda-pie{display:flex;align-items:center;gap:16px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);flex-wrap:wrap;}
.d-agenda-pie span{font-size:.72rem;color:var(--dim);display:flex;align-items:center;gap:6px;}
.d-agenda-pie i{width:9px;height:9px;border-radius:3px;}
.d-agenda-pie i.lleno{background:var(--order-soft);border:1px solid var(--order-line);}
.d-agenda-pie i.libre{background:var(--ink2);border:1px dashed var(--line);}

/* ══════════════════════════════════════════════════════════════════════════
   6. LANDING — cómo queda una web hecha para convertir
   ══════════════════════════════════════════════════════════════════════════ */
.d-land{background:#fff;padding:0;}
.d-land-nav{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fff;}
.d-land-nav .logo{width:20px;height:20px;border-radius:6px;
  background:linear-gradient(135deg,var(--order),#1e293b);}
.d-land-nav .barras{display:flex;gap:12px;margin-left:auto;}
.d-land-nav .barras i{width:32px;height:5px;border-radius:3px;background:var(--surf);}
.d-land-nav .cta{width:58px;height:21px;border-radius:6px;background:var(--order);}

.d-land-cuerpo{padding:24px 22px;display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;
  background:linear-gradient(165deg,rgba(8,145,178,.05),transparent 60%);}
.d-land-tit{height:11px;border-radius:3px;background:#334155;margin-bottom:7px;}
.d-land-tit.corto{width:58%;background:var(--order);}
.d-land-tit.medio{width:88%;}
.d-land-sub{height:5px;border-radius:3px;background:var(--surf);margin-bottom:6px;}
.d-land-sub.a{width:92%;} .d-land-sub.b{width:70%;}
.d-land-btns{display:flex;gap:8px;margin-top:16px;align-items:center;}
.d-land-btns i{height:25px;border-radius:7px;}
.d-land-btns i:first-child{width:84px;background:var(--order);}
.d-land-btns i:last-child{width:66px;background:#fff;border:1px solid var(--line);}
.d-land-form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;
  box-shadow:0 18px 40px -26px rgba(15,23,42,.45);}
.d-land-form .et{height:5px;width:38%;border-radius:3px;background:var(--order-line);margin-bottom:9px;}
.d-land-form .campo{height:25px;border-radius:7px;background:var(--ink2);border:1px solid var(--line);margin-bottom:7px;}
.d-land-form .enviar{height:29px;border-radius:7px;background:var(--order);margin-top:4px;}

/* prueba y secciones: lo que hace que una landing convierta */
.d-land-prueba{display:flex;align-items:center;gap:14px;padding:11px 22px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink2);}
.d-land-prueba i{height:11px;width:46px;border-radius:3px;background:var(--surf);}
.d-land-secs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:18px 22px 22px;}
.d-land-sec{border:1px solid var(--line);border-radius:9px;padding:12px 11px;}
.d-land-sec .ic{display:block;width:18px;height:18px;border-radius:5px;background:var(--order-soft);
  border:1px solid var(--order-line);margin-bottom:9px;}
.d-land-sec i{display:block;height:5px;border-radius:3px;background:var(--surf);margin-bottom:5px;}
.d-land-sec i:first-of-type{width:70%;background:#cbd5e1;}
.d-land-sec i:last-of-type{width:45%;}

.d-land-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;background:var(--paper);}
.d-land-pie .marca{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.45);}
/* la señal: lo único que importa de una landing es que suba */
.d-land-señal{display:flex;align-items:flex-end;gap:3px;height:20px;}
.d-land-señal i{width:5px;border-radius:2px 2px 0 0;background:rgba(255,255,255,.22);
  animation:sube 2.6s ease-in-out infinite;transform-origin:bottom;}
.d-land-señal i:nth-child(1){height:34%;animation-delay:0s;}
.d-land-señal i:nth-child(2){height:56%;animation-delay:.18s;}
.d-land-señal i:nth-child(3){height:78%;animation-delay:.36s;}
.d-land-señal i:nth-child(4){height:100%;background:var(--order-2);animation-delay:.54s;}
@keyframes sube{0%,100%{transform:scaleY(.7);}50%{transform:scaleY(1);}}

/* ══════════════════════════════════════════════════════════════════════════
   7. MINI APP — hecha para una sola cosa, la que tú haces cada día
   ══════════════════════════════════════════════════════════════════════════ */
.d-movil{width:246px;margin:0 auto;background:#111317;border-radius:32px;padding:9px;
  box-shadow:0 34px 70px -34px rgba(15,23,42,.6);position:relative;}
.d-movil::before{content:'';position:absolute;top:17px;left:50%;transform:translateX(-50%);
  width:82px;height:5px;background:#2a2d34;border-radius:4px;z-index:3;}
.d-movil-pant{background:#fff;border-radius:25px;overflow:hidden;height:400px;display:flex;flex-direction:column;}
.d-app-cab{background:var(--paper);padding:26px 16px 13px;}
.d-app-cab .t{color:#fff;font-family:var(--display);font-size:1.05rem;}
.d-app-cab .s{color:rgba(255,255,255,.55);font-size:.68rem;margin-top:2px;}
.d-app-cuerpo{flex:1;padding:14px;overflow:hidden;background:var(--ink2);}
.d-app-fila{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;
  margin-bottom:8px;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(10px);}
.d-app-fila.aparece{animation:msgEntra .45s cubic-bezier(.2,.7,.2,1) forwards;}
.d-app-fila .c{width:28px;height:28px;border-radius:8px;background:var(--order-soft);
  border:1px solid var(--order-line);display:grid;place-items:center;flex-shrink:0;
  font-family:var(--mono);font-size:.6rem;color:var(--order);font-weight:600;}
.d-app-fila .tx b{display:block;font-size:.76rem;color:var(--paper);}
.d-app-fila .tx span{display:block;font-size:.66rem;color:var(--faint);margin-top:1px;}
.d-app-fila .eur{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--paper);font-weight:500;}
.d-app-total{background:var(--order);color:#fff;border-radius:10px;padding:12px 13px;
  display:flex;align-items:center;justify-content:space-between;margin-top:12px;
  opacity:0;transform:translateY(10px);}
.d-app-total.aparece{animation:msgEntra .5s cubic-bezier(.2,.7,.2,1) forwards;}
.d-app-total b{font-size:.74rem;font-weight:500;opacity:.85;}
.d-app-total span{font-family:var(--display);font-size:1.3rem;}
.d-app-boton{background:var(--paper);color:#fff;border-radius:10px;padding:12px;text-align:center;
  font-size:.78rem;font-weight:600;margin-top:10px;opacity:0;}
.d-app-boton.aparece{animation:msgEntra .5s .15s cubic-bezier(.2,.7,.2,1) forwards;}

/* ══════════════════════════════════════════════════════════════════════════
   Galería: cómo se colocan en la página
   ══════════════════════════════════════════════════════════════════════════ */
.demos-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.demo-bloque h3{font-family:var(--display);font-size:1.32rem;font-weight:400;margin-bottom:7px;}
.demo-bloque h3 em{font-style:italic;color:var(--order);}
.demo-bloque > p{font-size:.87rem;color:var(--dim);line-height:1.65;margin-bottom:18px;max-width:460px;}

/* Nada dentro de una demo puede empujar el ancho: en un grid, los hijos tienen
   min-width:auto por defecto y el texto largo desborda el contenedor. */
.demo,.demo *{min-width:0;}
.demo{max-width:100%;}
.d-tarjeta .et,.d-etapa .t,.d-app-fila .tx b{overflow-wrap:anywhere;}

@media(max-width:900px){
  .demos-grid{grid-template-columns:1fr;}
  .d-panel{grid-template-columns:1fr 1fr;}
  .d-panel .d-tarjeta:last-child{grid-column:1/-1;}
  .d-land-cuerpo{grid-template-columns:1fr;}
  .d-pipe{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .demo-lienzo{padding:14px;min-height:0;}
  .d-panel{grid-template-columns:1fr 1fr;gap:9px;}
  .d-tarjeta{padding:11px 12px;}
  .d-tarjeta .cifra{font-size:1.45rem;}
  .d-tarjeta .et{font-size:.54rem;letter-spacing:.1em;}
  .d-tarjeta .sub{font-size:.66rem;}
  .d-pipe{gap:6px;}
  .d-etapa{padding:8px 9px;}
  .d-etapa .n{font-size:1rem;}
  .d-etapa .t{font-size:.6rem;}
  .d-linea{font-size:.74rem;gap:8px;}
  .d-linea time{font-size:.6rem;}
  .d-semana{grid-template-columns:34px repeat(5,1fr);font-size:.58rem;gap:3px;}
  .d-hueco{height:26px;font-size:.56rem;}
  .d-msg{max-width:88%;font-size:.78rem;}
  .d-canales{gap:5px;}
  .d-canal{font-size:.64rem;padding:4px 8px;}
  .d-nodo{padding:11px 12px;gap:10px;}
  .d-nodo .tx b{font-size:.79rem;}
  .d-nodo .tx span{font-size:.68rem;}
  .d-hecho{font-size:.7rem;padding:8px 13px;text-align:center;}
}

/* Sin animación para quien la ha desactivado: se muestra el estado final */
@media(prefers-reduced-motion:reduce){
  .demo *{animation:none!important;transition:none!important;}
  .d-msg,.d-hecho,.d-linea,.d-respuesta,.d-app-fila,.d-app-total,.d-app-boton{opacity:1!important;transform:none!important;}
  .d-cable::after{transform:scaleY(1)!important;}
  .d-etapa::after{width:100%!important;}
}