/* =========================================================
   SITI Negocios · 3. "SITI vs. otras apps"
   Todo arranca cuando 02-charts.js pone .in en [data-animate]
   (y body.anim-on si hay movimiento permitido).
   ========================================================= */
.vs{padding:clamp(20px,4vh,50px) 0 clamp(90px,14vh,160px)}
.vs__card{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(24px,4vw,56px);border-radius:32px;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);
}
.vs__glow{position:absolute;z-index:-1;right:-15%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(var(--hot),.14),transparent 65%)}
.vs__head{max-width:620px;margin-bottom:clamp(28px,4vw,48px)}
.vs__head .h2{font-size:clamp(1.9rem,4vw,3.4rem)}
.vs__head .muted{margin-top:14px}
.vs__body{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:clamp(32px,5vw,72px);align-items:center}

/* ---------- donut ---------- */
.vs-donut{position:relative;width:min(100%,250px);aspect-ratio:1;justify-self:center}
.vs-donut svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.vs-track{stroke:rgba(var(--mesh),.08)}
.vs-donut__center{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.vs-donut-num{
  font-family:var(--f-dis);font-size:clamp(3rem,5vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(105deg,var(--orange),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:vsBeat 2.8s ease-in-out infinite;
}
.vs-donut__center small{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}
@keyframes vsBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.vs-donut-num.pop{animation:vsPop .65s cubic-bezier(.34,1.56,.64,1)}
@keyframes vsPop{0%{transform:scale(1)}38%{transform:scale(1.26)}100%{transform:scale(1)}}

.anim-on .anim-ring{stroke-dashoffset:var(--c);transition:stroke-dashoffset 1.7s cubic-bezier(.34,1.4,.64,1)}
.anim-on .in .anim-ring{stroke-dashoffset:var(--o)}
.anim-ring{stroke-dashoffset:var(--o)}

.vs-comet{transform-origin:100px 100px;transform:rotate(var(--deg))}
.anim-on .vs-comet{transform:rotate(0deg);opacity:0;transition:transform 1.7s cubic-bezier(.34,1.4,.64,1),opacity .4s ease}
.anim-on .in .vs-comet{transform:rotate(var(--deg));opacity:1}
.anim-on .in .vs-comet-dot{animation:vsCometPulse 2.2s ease-in-out 1.95s infinite}
@keyframes vsCometPulse{0%,100%{r:5}50%{r:6.6}}

.vs-orbit{position:absolute;inset:-13%;border-radius:50%;pointer-events:none;opacity:.5;
  background:conic-gradient(from 0deg,rgba(255,122,34,0) 0deg,rgba(255,138,58,0) 205deg,rgba(255,170,80,.45) 300deg,rgba(255,122,34,.65) 342deg,rgba(255,122,34,0) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 57%,#000 60%,#000 74%,transparent 79%);
          mask:radial-gradient(circle,transparent 57%,#000 60%,#000 74%,transparent 79%);
  filter:blur(2px);animation:vsOrbit 6.5s linear infinite}
@keyframes vsOrbit{to{transform:rotate(360deg)}}

/* estallido de chispas cuando el aro llega al 78% */
.vs-spark{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;z-index:3;pointer-events:none;
  background:radial-gradient(circle,#FFF6DD 0%,#FFB347 45%,rgba(255,122,34,0) 75%);
  opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r0))) scale(.4);
  animation:vsSpark var(--dur,.9s) cubic-bezier(.2,.7,.3,1) forwards}
@keyframes vsSpark{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r0))) scale(.4)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r1))) scale(1)}
}
.vs-flash{position:absolute;inset:18%;border-radius:50%;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,214,120,.6),rgba(255,122,34,0) 70%);animation:vsFlash .75s ease-out forwards}
@keyframes vsFlash{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.55)}}

/* ---------- barras ---------- */
.vs__legend{display:flex;gap:22px;margin-bottom:22px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.vs__legend span{display:inline-flex;align-items:center;gap:8px}
.vs__legend .is-muted{color:var(--muted)}
.sw{width:14px;height:14px;border-radius:4px}
.sw--siti{background:linear-gradient(90deg,var(--amber),var(--orange))}
.sw--other{background:rgba(var(--mesh),.28)}

.vs-row + .vs-row{margin-top:22px}
.vs-row > p{display:flex;align-items:center;gap:8px;font-family:var(--f-dis);font-weight:700;font-size:.95rem;margin-bottom:10px}
.vs-row > p .lucide{color:var(--ink)}
.vs-line{display:flex;align-items:center;gap:14px}
.vs-line + .vs-line{margin-top:8px}
.vs-val{width:80px;text-align:right;flex:none;font-family:var(--f-dis);font-weight:800;font-size:1.15rem;color:var(--ink);font-variant-numeric:tabular-nums}
.vs-line--other .vs-val{font-size:.9rem;font-weight:700;color:var(--muted)}

.vs-bar-track{position:relative;flex:1;height:22px;border-radius:99px;background:rgba(var(--mesh),.07)}
.vs-line--other .vs-bar-track{height:14px}
.vs-bar-fill{position:absolute;top:0;left:0;height:100%;border-radius:99px;transform-origin:left;overflow:hidden}
.vs-bar-siti{background:linear-gradient(90deg,var(--amber),#FF9A4D 55%,var(--orange));box-shadow:0 4px 18px -4px rgba(var(--hot),.7)}
.vs-bar-other{background:rgba(var(--mesh),.28)}
.vs-bar-siti::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 15%,rgba(255,255,255,.5) 50%,transparent 85%);transform:translateX(-110%)}

.anim-on .grow-x{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.anim-on .grow-x.vs-bar-siti{transition:transform 1.15s cubic-bezier(.34,1.42,.5,1)}
.anim-on .in .grow-x{transform:scaleX(1)}
.anim-on .in .vs-bar-siti::after{animation:vsShine 2.8s ease-in-out 1.5s infinite}
@keyframes vsShine{0%{transform:translateX(-110%)}55%,100%{transform:translateX(110%)}}

.vs-tip{position:absolute;top:50%;left:var(--tip);width:18px;height:18px;border-radius:50%;z-index:2;pointer-events:none;
  transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0%,#FFD36B 34%,rgba(255,122,34,0) 72%);box-shadow:0 0 14px 3px rgba(255,140,60,.7)}
.anim-on .vs-tip{left:0;transform:translate(-50%,-50%) scale(0);opacity:0;transition:left 1.15s cubic-bezier(.34,1.42,.5,1),transform .55s ease .1s,opacity .55s ease .1s}
.anim-on .in .vs-tip{left:var(--tip);transform:translate(-50%,-50%) scale(1);opacity:1;animation:vsTipPulse 1.9s ease-in-out 1.4s infinite}
@keyframes vsTipPulse{0%,100%{box-shadow:0 0 12px 2px rgba(255,140,60,.55)}50%{box-shadow:0 0 22px 7px rgba(255,140,60,.95)}}

.vs__note{display:flex;align-items:center;gap:8px;margin-top:26px;font-size:.78rem;color:var(--muted)}

@media (max-width:860px){
  .vs__body{grid-template-columns:1fr}
}
@media (max-width:560px){
  .vs-val{width:62px;font-size:1rem}
}