/* ==========================================================================
   Sección final — demostración visual de JustiBot funcionando (no un CTA
   tradicional). Ciclo de 8s en loop infinito, coreografiado 100% en CSS
   (keyframes por porcentaje) para que no haya drift de temporizador entre
   iteraciones; JS solo arranca/pausa el ciclo al entrar en pantalla y
   resuelve el estado estático para prefers-reduced-motion.

   Misma identidad visual del Hero (mismos tokens de color, adaptados a
   modo claro/oscuro igual que hero.css/pricing.css).
   ========================================================================== */

.ds-section{
  --ds-bg:#070b16;
  --ds-card-bg: rgba(255,255,255,.04);
  --ds-card-bg-strong: rgba(30,41,59,.55);
  --ds-border: rgba(255,255,255,.09);
  --ds-border-strong: rgba(255,255,255,.16);
  --ds-blue:#3b82f6;
  --ds-blue-light:#93c5fd;
  --ds-text:#ffffff;
  --ds-text-soft:#dbe3ee;
  --ds-muted:#93a0b8;
  --ds-muted-2:#69768c;
  --ds-icon-color:var(--ds-blue-light);
  --ds-particle-dot: rgba(255,255,255,.12);
  --ds-dot-waiting: rgba(255,255,255,.25);
  --ds-amber:#f5b942;
  --ds-green:#4ade80;
  --ds-green-text:#4ade80;
  --ds-report-bg: rgba(15,23,42,.72);
  --ds-shadow: rgba(0,0,0,.5);
  --ds-ease: cubic-bezier(.4,0,.2,1);
  --ds-cycle: 8s;

  position:relative;
  background:var(--ds-bg);
  padding:96px 0 88px;
  overflow:hidden;
  isolation:isolate;
}
.ds-section *{box-sizing:border-box;}

.ds-bg-particles{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--ds-particle-dot) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 40%,transparent 85%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 40%,transparent 85%);
}

.ds-container{position:relative;z-index:1;max-width:900px;margin-inline:auto;padding-inline:24px;}

.ds-head{text-align:center;margin-bottom:40px;}
.ds-head h2{font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem);font-weight:800;color:var(--ds-text);letter-spacing:-.02em;margin:0;}
.ds-accent{
  background:linear-gradient(90deg,var(--ds-blue),var(--ds-blue-light));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ds-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ds-blue-light);background:rgba(59,130,246,.12);
  padding:7px 16px;border-radius:999px;margin-bottom:18px;
}

/* Entrada escalonada al hacer scroll — sin loop, un único fundido discreto. */
.ds-eyebrow,.ds-head h2,.ds-ctas{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ds-ease),transform .6s var(--ds-ease);
}
.ds-head.ds-head-in .ds-eyebrow{opacity:1;transform:none;}
.ds-head.ds-head-in h2{opacity:1;transform:none;transition-delay:.12s;}
.ds-head.ds-head-in ~ .ds-ctas{opacity:1;transform:none;transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){
  .ds-eyebrow,.ds-head h2,.ds-ctas{transition:none;opacity:1;transform:none;}
}

/* ---------- Stage: hub + 5 tarjetas + panel de reporte ---------- */
.ds-stage{position:relative;min-height:680px;margin-bottom:56px;}
.ds-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;}
.ds-line{fill:none;stroke:rgba(96,165,250,.4);stroke-width:.5;stroke-dasharray:60;}
.ds-pulse{fill:var(--ds-green);filter:drop-shadow(0 0 3px rgba(74,222,128,.9));}

.ds-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;width:min(230px,64%);text-align:center;
  background:var(--ds-card-bg-strong);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid var(--ds-border-strong);border-radius:22px;
  padding:22px 20px;box-shadow:0 26px 50px -22px rgba(59,130,246,.4);
}
.ds-hub-avatar{width:52px;height:52px;margin:0 auto 12px;border-radius:16px;overflow:hidden;background:rgba(59,130,246,.15);display:flex;align-items:center;justify-content:center;}
.ds-hub-avatar img{width:100%;height:100%;object-fit:contain;padding:5px;}
.ds-hub-name{font-weight:800;font-size:1.02rem;color:var(--ds-text);margin-bottom:8px;}
.ds-hub-state{position:relative;height:1.3em;font-size:.76rem;font-weight:600;}
.ds-hub-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;}
.ds-hub-label--idle{color:var(--ds-green-text);}
.ds-hub-label--analyzing{color:var(--ds-blue-light);}

.ds-card{
  position:absolute;transform:translate(-50%,-50%);z-index:2;width:172px;
  background:var(--ds-card-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--ds-border);border-radius:16px;padding:13px 15px;
  box-shadow:0 12px 26px -16px var(--ds-shadow);
}
.ds-card--p1{left:50%;top:4%;}
.ds-card--p2{left:20%;top:19%;}
.ds-card--p3{left:80%;top:19%;}
.ds-card--p4{left:12%;top:38%;}
.ds-card--p5{left:88%;top:38%;}
.ds-card--p6{left:12%;top:57%;}
.ds-card--p7{left:88%;top:57%;}
.ds-card--p8{left:20%;top:76%;}
.ds-card--p9{left:80%;top:76%;}

.ds-card-top{display:flex;align-items:flex-start;gap:9px;margin-bottom:9px;}
.ds-card-icon{width:32px;height:32px;border-radius:9px;background:rgba(59,130,246,.15);color:var(--ds-icon-color);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ds-card-name{font-weight:700;font-size:.8rem;color:var(--ds-text);line-height:1.25;}

.ds-card-status{display:flex;align-items:center;gap:7px;font-size:.68rem;font-weight:600;}
.ds-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background-color:var(--ds-dot-waiting);}
.ds-status-track{position:relative;height:1.2em;flex:1;min-width:0;}
.ds-status-label{position:absolute;left:0;top:0;white-space:nowrap;}
.ds-status-label--waiting{color:var(--ds-muted-2);}
.ds-status-label--consulting{color:var(--ds-amber);}
.ds-status-label--done{color:var(--ds-green-text);}

/* ---------- Panel de reporte ---------- */
.ds-report{
  position:absolute;left:50%;top:80%;transform:translate(-50%,0);z-index:4;width:min(300px,90%);
  background:var(--ds-report-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--ds-border-strong);border-radius:16px;padding:16px 18px;
  box-shadow:0 22px 46px -18px var(--ds-shadow);
}
.ds-report-title{font-weight:700;font-size:.84rem;color:var(--ds-text);margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--ds-border);}
.ds-report-row{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ds-text-soft);padding:4px 0;}
.ds-report-row svg{color:var(--ds-green-text);flex-shrink:0;}

.ds-email{
  position:absolute;left:50%;top:50%;z-index:5;
  width:34px;height:34px;border-radius:10px;
  background:var(--ds-blue);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px -8px rgba(59,130,246,.6);
}

/* ---------- CTAs ---------- */
.ds-ctas{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.ds-btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:12px;
  font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap;border:1px solid transparent;
  transition:transform .15s var(--ds-ease),background-color .15s,border-color .15s;
}
.ds-btn:active{transform:scale(.97);}
.ds-btn--primary{background:var(--ds-blue);color:#fff;box-shadow:0 12px 28px -10px rgba(59,130,246,.55);}
.ds-btn--primary:hover{background:#2563eb;}
.ds-btn--ghost{background:rgba(255,255,255,.03);color:var(--ds-text);border-color:var(--ds-border-strong);}
.ds-btn--ghost:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.06);}

/* ==========================================================================
   Coreografía — un ciclo de 8s (--ds-cycle), en loop infinito. Pausado
   hasta que demo-section.js lo activa al entrar en pantalla.
   ========================================================================== */
.ds-run .ds-line,
.ds-run .ds-hub-label,
.ds-run .ds-dot,
.ds-run .ds-status-label,
.ds-run .ds-report,
.ds-run .ds-report-row,
.ds-run .ds-email{
  animation-duration:var(--ds-cycle);
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}

/* Líneas: se dibujan cuando esa fuente empieza a "consultar" y se
   deshacen brevemente en el punto de reinicio del ciclo. */
@keyframes ds-line-1{0%,3%{stroke-dashoffset:60;opacity:.35;}5%,93%{stroke-dashoffset:0;opacity:1;}96%,100%{stroke-dashoffset:60;opacity:.35;}}
@keyframes ds-line-2{0%,6%{stroke-dashoffset:60;opacity:.35;}8%,93%{stroke-dashoffset:0;opacity:1;}96%,100%{stroke-dashoffset:60;opacity:.35;}}
@keyframes ds-line-3{0%,9%{stroke-dashoffset:60;opacity:.35;}11%,93%{stroke-dashoffset:0;opacity:1;}96%,100%{stroke-dashoffset:60;opacity:.35;}}
@keyframes ds-line-4{0%,12%{stroke-dashoffset:60;opacity:.35;}14%,93%{stroke-dashoffset:0;opacity:1;}96%,100%{stroke-dashoffset:60;opacity:.35;}}
@keyframes ds-line-5{0%,15%{stroke-dashoffset:60;opacity:.35;}17%,93%{stroke-dashoffset:0;opacity:1;}96%,100%{stroke-dashoffset:60;opacity:.35;}}
@keyframes ds-line-6{0%,18%{stroke-dashoffset:60;opacity:.35;}20%,93%{stroke-dashoffset:0;opacity:1;}96%,100%{stroke-dashoffset:60;opacity:.35;}}
@keyframes ds-line-7{0%,21%{stroke-dashoffset:60;opacity:.35;}23%,93%{stroke-dashoffset:0;opacity:1;}96%,100%{stroke-dashoffset:60;opacity:.35;}}
@keyframes ds-line-8{0%,24%{stroke-dashoffset:60;opacity:.35;}26%,93%{stroke-dashoffset:0;opacity:1;}96%,100%{stroke-dashoffset:60;opacity:.35;}}
@keyframes ds-line-9{0%,27%{stroke-dashoffset:60;opacity:.35;}29%,93%{stroke-dashoffset:0;opacity:1;}96%,100%{stroke-dashoffset:60;opacity:.35;}}
.ds-run .ds-line-1{animation-name:ds-line-1;}
.ds-run .ds-line-2{animation-name:ds-line-2;}
.ds-run .ds-line-3{animation-name:ds-line-3;}
.ds-run .ds-line-4{animation-name:ds-line-4;}
.ds-run .ds-line-5{animation-name:ds-line-5;}
.ds-run .ds-line-6{animation-name:ds-line-6;}
.ds-run .ds-line-7{animation-name:ds-line-7;}
.ds-run .ds-line-8{animation-name:ds-line-8;}
.ds-run .ds-line-9{animation-name:ds-line-9;}

/* Puntos de estado por tarjeta: gris (esperando) → ámbar (consultando) → verde (completada) */
@keyframes ds-dot-1{0%,3%{background-color:var(--ds-dot-waiting);}5%,10%{background-color:var(--ds-amber);}12%,93%{background-color:var(--ds-green);}96%,100%{background-color:var(--ds-dot-waiting);}}
@keyframes ds-dot-2{0%,6%{background-color:var(--ds-dot-waiting);}8%,13%{background-color:var(--ds-amber);}15%,93%{background-color:var(--ds-green);}96%,100%{background-color:var(--ds-dot-waiting);}}
@keyframes ds-dot-3{0%,9%{background-color:var(--ds-dot-waiting);}11%,16%{background-color:var(--ds-amber);}18%,93%{background-color:var(--ds-green);}96%,100%{background-color:var(--ds-dot-waiting);}}
@keyframes ds-dot-4{0%,12%{background-color:var(--ds-dot-waiting);}14%,19%{background-color:var(--ds-amber);}21%,93%{background-color:var(--ds-green);}96%,100%{background-color:var(--ds-dot-waiting);}}
@keyframes ds-dot-5{0%,15%{background-color:var(--ds-dot-waiting);}17%,22%{background-color:var(--ds-amber);}24%,93%{background-color:var(--ds-green);}96%,100%{background-color:var(--ds-dot-waiting);}}
@keyframes ds-dot-6{0%,18%{background-color:var(--ds-dot-waiting);}20%,25%{background-color:var(--ds-amber);}27%,93%{background-color:var(--ds-green);}96%,100%{background-color:var(--ds-dot-waiting);}}
@keyframes ds-dot-7{0%,21%{background-color:var(--ds-dot-waiting);}23%,28%{background-color:var(--ds-amber);}30%,93%{background-color:var(--ds-green);}96%,100%{background-color:var(--ds-dot-waiting);}}
@keyframes ds-dot-8{0%,24%{background-color:var(--ds-dot-waiting);}26%,31%{background-color:var(--ds-amber);}33%,93%{background-color:var(--ds-green);}96%,100%{background-color:var(--ds-dot-waiting);}}
@keyframes ds-dot-9{0%,27%{background-color:var(--ds-dot-waiting);}29%,34%{background-color:var(--ds-amber);}36%,93%{background-color:var(--ds-green);}96%,100%{background-color:var(--ds-dot-waiting);}}
.ds-run .ds-card-1 .ds-dot{animation-name:ds-dot-1;}
.ds-run .ds-card-2 .ds-dot{animation-name:ds-dot-2;}
.ds-run .ds-card-3 .ds-dot{animation-name:ds-dot-3;}
.ds-run .ds-card-4 .ds-dot{animation-name:ds-dot-4;}
.ds-run .ds-card-5 .ds-dot{animation-name:ds-dot-5;}
.ds-run .ds-card-6 .ds-dot{animation-name:ds-dot-6;}
.ds-run .ds-card-7 .ds-dot{animation-name:ds-dot-7;}
.ds-run .ds-card-8 .ds-dot{animation-name:ds-dot-8;}
.ds-run .ds-card-9 .ds-dot{animation-name:ds-dot-9;}

/* Texto de estado: 3 etiquetas apiladas que se cruzan en opacidad */
@keyframes ds-label-waiting-1{0%,3%{opacity:1;}5%,100%{opacity:0;}}
@keyframes ds-label-consulting-1{0%,3%{opacity:0;}5%,10%{opacity:1;}12%,100%{opacity:0;}}
@keyframes ds-label-done-1{0%,10%{opacity:0;}12%,93%{opacity:1;}96%,100%{opacity:0;}}
@keyframes ds-label-waiting-2{0%,6%{opacity:1;}8%,100%{opacity:0;}}
@keyframes ds-label-consulting-2{0%,6%{opacity:0;}8%,13%{opacity:1;}15%,100%{opacity:0;}}
@keyframes ds-label-done-2{0%,13%{opacity:0;}15%,93%{opacity:1;}96%,100%{opacity:0;}}
@keyframes ds-label-waiting-3{0%,9%{opacity:1;}11%,100%{opacity:0;}}
@keyframes ds-label-consulting-3{0%,9%{opacity:0;}11%,16%{opacity:1;}18%,100%{opacity:0;}}
@keyframes ds-label-done-3{0%,16%{opacity:0;}18%,93%{opacity:1;}96%,100%{opacity:0;}}
@keyframes ds-label-waiting-4{0%,12%{opacity:1;}14%,100%{opacity:0;}}
@keyframes ds-label-consulting-4{0%,12%{opacity:0;}14%,19%{opacity:1;}21%,100%{opacity:0;}}
@keyframes ds-label-done-4{0%,19%{opacity:0;}21%,93%{opacity:1;}96%,100%{opacity:0;}}
@keyframes ds-label-waiting-5{0%,15%{opacity:1;}17%,100%{opacity:0;}}
@keyframes ds-label-consulting-5{0%,15%{opacity:0;}17%,22%{opacity:1;}24%,100%{opacity:0;}}
@keyframes ds-label-done-5{0%,22%{opacity:0;}24%,93%{opacity:1;}96%,100%{opacity:0;}}
@keyframes ds-label-waiting-6{0%,18%{opacity:1;}20%,100%{opacity:0;}}
@keyframes ds-label-consulting-6{0%,18%{opacity:0;}20%,25%{opacity:1;}27%,100%{opacity:0;}}
@keyframes ds-label-done-6{0%,25%{opacity:0;}27%,93%{opacity:1;}96%,100%{opacity:0;}}
@keyframes ds-label-waiting-7{0%,21%{opacity:1;}23%,100%{opacity:0;}}
@keyframes ds-label-consulting-7{0%,21%{opacity:0;}23%,28%{opacity:1;}30%,100%{opacity:0;}}
@keyframes ds-label-done-7{0%,28%{opacity:0;}30%,93%{opacity:1;}96%,100%{opacity:0;}}
@keyframes ds-label-waiting-8{0%,24%{opacity:1;}26%,100%{opacity:0;}}
@keyframes ds-label-consulting-8{0%,24%{opacity:0;}26%,31%{opacity:1;}33%,100%{opacity:0;}}
@keyframes ds-label-done-8{0%,31%{opacity:0;}33%,93%{opacity:1;}96%,100%{opacity:0;}}
@keyframes ds-label-waiting-9{0%,27%{opacity:1;}29%,100%{opacity:0;}}
@keyframes ds-label-consulting-9{0%,27%{opacity:0;}29%,34%{opacity:1;}36%,100%{opacity:0;}}
@keyframes ds-label-done-9{0%,34%{opacity:0;}36%,93%{opacity:1;}96%,100%{opacity:0;}}
.ds-run .ds-card-1 .ds-status-label--waiting{animation-name:ds-label-waiting-1;}
.ds-run .ds-card-1 .ds-status-label--consulting{animation-name:ds-label-consulting-1;}
.ds-run .ds-card-1 .ds-status-label--done{animation-name:ds-label-done-1;}
.ds-run .ds-card-2 .ds-status-label--waiting{animation-name:ds-label-waiting-2;}
.ds-run .ds-card-2 .ds-status-label--consulting{animation-name:ds-label-consulting-2;}
.ds-run .ds-card-2 .ds-status-label--done{animation-name:ds-label-done-2;}
.ds-run .ds-card-3 .ds-status-label--waiting{animation-name:ds-label-waiting-3;}
.ds-run .ds-card-3 .ds-status-label--consulting{animation-name:ds-label-consulting-3;}
.ds-run .ds-card-3 .ds-status-label--done{animation-name:ds-label-done-3;}
.ds-run .ds-card-4 .ds-status-label--waiting{animation-name:ds-label-waiting-4;}
.ds-run .ds-card-4 .ds-status-label--consulting{animation-name:ds-label-consulting-4;}
.ds-run .ds-card-4 .ds-status-label--done{animation-name:ds-label-done-4;}
.ds-run .ds-card-5 .ds-status-label--waiting{animation-name:ds-label-waiting-5;}
.ds-run .ds-card-5 .ds-status-label--consulting{animation-name:ds-label-consulting-5;}
.ds-run .ds-card-5 .ds-status-label--done{animation-name:ds-label-done-5;}
.ds-run .ds-card-6 .ds-status-label--waiting{animation-name:ds-label-waiting-6;}
.ds-run .ds-card-6 .ds-status-label--consulting{animation-name:ds-label-consulting-6;}
.ds-run .ds-card-6 .ds-status-label--done{animation-name:ds-label-done-6;}
.ds-run .ds-card-7 .ds-status-label--waiting{animation-name:ds-label-waiting-7;}
.ds-run .ds-card-7 .ds-status-label--consulting{animation-name:ds-label-consulting-7;}
.ds-run .ds-card-7 .ds-status-label--done{animation-name:ds-label-done-7;}
.ds-run .ds-card-8 .ds-status-label--waiting{animation-name:ds-label-waiting-8;}
.ds-run .ds-card-8 .ds-status-label--consulting{animation-name:ds-label-consulting-8;}
.ds-run .ds-card-8 .ds-status-label--done{animation-name:ds-label-done-8;}
.ds-run .ds-card-9 .ds-status-label--waiting{animation-name:ds-label-waiting-9;}
.ds-run .ds-card-9 .ds-status-label--consulting{animation-name:ds-label-consulting-9;}
.ds-run .ds-card-9 .ds-status-label--done{animation-name:ds-label-done-9;}

/* Hub: "Monitoreo activo" ↔ "Analizando novedades..." */
@keyframes ds-hub-idle{0%,38%{opacity:1;}40%,83%{opacity:0;}85%,100%{opacity:1;}}
@keyframes ds-hub-analyzing{0%,38%{opacity:0;}40%,83%{opacity:1;}85%,100%{opacity:0;}}
.ds-run .ds-hub-label--idle{animation-name:ds-hub-idle;}
.ds-run .ds-hub-label--analyzing{animation-name:ds-hub-analyzing;}

/* Correo: sale del hub y viaja hasta el panel de reporte */
@keyframes ds-email{
  0%,49%{opacity:0;transform:translate(-50%,-50%) translateY(0);}
  51%{opacity:1;transform:translate(-50%,-50%) translateY(0);}
  60%{opacity:1;transform:translate(-50%,-50%) translateY(150px);}
  62%,100%{opacity:0;transform:translate(-50%,-50%) translateY(150px);}
}
.ds-run .ds-email{animation-name:ds-email;}

/* Panel de reporte y sus filas */
@keyframes ds-report{
  0%,60%{opacity:0;transform:translate(-50%,0) translateY(8px);}
  63%,93%{opacity:1;transform:translate(-50%,0) translateY(0);}
  96%,100%{opacity:0;transform:translate(-50%,0) translateY(8px);}
}
@keyframes ds-report-row-1{0%,63%{opacity:0;}66%,93%{opacity:1;}96%,100%{opacity:0;}}
@keyframes ds-report-row-2{0%,70%{opacity:0;}73%,93%{opacity:1;}96%,100%{opacity:0;}}
@keyframes ds-report-row-3{0%,77%{opacity:0;}80%,93%{opacity:1;}96%,100%{opacity:0;}}
.ds-run .ds-report{animation-name:ds-report;}
.ds-run .ds-report-row-1{animation-name:ds-report-row-1;}
.ds-run .ds-report-row-2{animation-name:ds-report-row-2;}
.ds-run .ds-report-row-3{animation-name:ds-report-row-3;}

/* Estado inicial (antes de arrancar el loop): todo en reposo, coherente
   con el primer frame de cada keyframe. */
.ds-line{stroke-dashoffset:60;opacity:.35;}
.ds-status-label--waiting{opacity:1;}
.ds-status-label--consulting,.ds-status-label--done{opacity:0;}
.ds-hub-label--idle{opacity:1;}
.ds-hub-label--analyzing{opacity:0;}
.ds-email{opacity:0;}
.ds-report,.ds-report-row{opacity:0;}

/* ---------- Modo claro ---------- */
[data-theme="light"] .ds-section{
  --ds-bg:linear-gradient(160deg,#e7f0fd 0%,#f4f8fc 45%,#eaf1fb 100%);
  --ds-card-bg: rgba(15,23,42,.035);
  --ds-card-bg-strong: rgba(255,255,255,.72);
  --ds-border: rgba(15,23,42,.10);
  --ds-border-strong: rgba(15,23,42,.16);
  --ds-blue:#2563eb;
  --ds-blue-light:#3b82f6;
  --ds-text:#0f172a;
  --ds-text-soft:#334155;
  --ds-muted:#5b6675;
  --ds-muted-2:#7c8798;
  --ds-icon-color:#2563eb;
  --ds-particle-dot: rgba(15,23,42,.10);
  --ds-dot-waiting: rgba(15,23,42,.18);
  --ds-green-text:#15803d;
  --ds-report-bg: linear-gradient(160deg,rgba(255,255,255,.86),rgba(231,240,253,.8));
  --ds-shadow: rgba(15,23,42,.16);
}

/* ==========================================================================
   Responsive — igual criterio que el Hero: por debajo de 768px el
   diagrama absoluto se colapsa a una lista vertical simple, sin líneas.
   ========================================================================== */
@media (max-width:1024px){
  .ds-stage{width:100%;min-height:600px;max-width:520px;margin-inline:auto;}
}
/* Por debajo de 768px no cabe el layout radial a tamaño completo, pero en
   vez de colapsarlo a una lista se reduce todo proporcionalmente (hub,
   tarjetas, líneas, correo) para conservar el mismo diagrama que en PC. */
@media (max-width:768px){
  .ds-section{padding:56px 0 48px;}
  .ds-stage{width:100%;min-height:470px;max-width:290px;margin-inline:auto;}

  .ds-hub{width:min(108px,50%);padding:10px 6px;border-radius:14px;}
  .ds-hub-avatar{width:28px;height:28px;margin-bottom:5px;border-radius:9px;}
  .ds-hub-name{font-size:.64rem;margin-bottom:3px;}
  .ds-hub-state{font-size:.46rem;}

  .ds-card{width:104px;padding:6px 7px;border-radius:10px;}
  .ds-card--p1{left:50%;top:2%;}
  .ds-card--p2{left:23%;top:20%;}
  .ds-card--p3{left:77%;top:20%;}
  .ds-card--p4{left:16%;top:39%;}
  .ds-card--p5{left:84%;top:39%;}
  .ds-card--p6{left:16%;top:58%;}
  .ds-card--p7{left:84%;top:58%;}
  .ds-card--p8{left:23%;top:77%;}
  .ds-card--p9{left:77%;top:77%;}
  .ds-card-top{gap:5px;margin-bottom:5px;}
  .ds-card-icon{width:19px;height:19px;border-radius:6px;}
  .ds-card-icon svg{width:10px;height:10px;}
  .ds-card-name{font-size:.56rem;line-height:1.15;}
  .ds-card-status{font-size:.44rem;gap:4px;}
  .ds-dot{width:5px;height:5px;}

  .ds-email{width:22px;height:22px;border-radius:7px;}
  .ds-email svg{width:11px;height:11px;}

  .ds-report{width:min(190px,86%);padding:9px 10px;border-radius:11px;top:82%;}
  .ds-report-title{font-size:.62rem;margin-bottom:6px;padding-bottom:5px;}
  .ds-report-row{font-size:.56rem;gap:5px;padding:2px 0;}
  .ds-report-row svg{width:10px;height:10px;}

  .ds-ctas{flex-direction:column;align-items:stretch;}
  .ds-btn{justify-content:center;}
}

@media (prefers-reduced-motion:reduce){
  .ds-run .ds-line,.ds-run .ds-hub-label,.ds-run .ds-dot,.ds-run .ds-status-label,
  .ds-run .ds-report,.ds-run .ds-report-row,.ds-run .ds-email{animation:none !important;}
}

/* Con movimiento reducido: en vez de animar, mostramos directamente el
   estado final (todo consultado, reporte visible) — sin dejarlo a medias. */
.ds-static-done .ds-line{stroke-dashoffset:0;opacity:1;}
.ds-static-done .ds-dot{background-color:var(--ds-green);}
.ds-static-done .ds-status-label--waiting,
.ds-static-done .ds-status-label--consulting{opacity:0;}
.ds-static-done .ds-status-label--done{opacity:1;}
.ds-static-done .ds-hub-label--idle{opacity:1;}
.ds-static-done .ds-hub-label--analyzing{opacity:0;}
.ds-static-done .ds-email{display:none;}
.ds-static-done .ds-report,.ds-static-done .ds-report-row{opacity:1;transform:none;}