/* ============================================================================
   VDN VALUE — GRÁFICAS Y ANIMACIONES
   Componentes de datos (barras, medidores, radar, crecimiento, comparativas,
   líneas de tiempo, flujos) y piezas ilustrativas. Todo se anima al entrar en
   pantalla (.vz-in) y queda quieto con "movimiento reducido".
   Reglas: marcas finas, extremos redondeados de 4px, rejilla de 1px, textos
   en tinta (nunca del color de la serie), leyenda con 2+ series.
   ========================================================================= */
:root{
  --vz-1:#3F63A8;          /* serie principal = acento de marca */
  --vz-2:#EB6834;          /* paleta categórica validada (daltonismo) */
  --vz-3:#1BAF7A;
  --vz-4:#EDA100;
  --vz-muted:#B7BFCC;      /* serie de contexto */
  --vz-track:#E3EBF8;      /* pista de medidores: paso claro de la misma rampa */
  --vz-grid:#E7E8EC;       /* rejilla: un paso fuera de la superficie */
  --vz-wash:rgba(63,99,168,.10);
  --vz-ink-on:#0B0B0B;     /* texto dentro de rellenos claros */
  --vz-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Tarjeta de gráfica ---------- */
.vz{
  position:relative;
  margin:var(--space-6) 0;
  padding:clamp(18px,3vw,28px);
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(14,21,38,.04),0 12px 32px rgba(14,21,38,.05);
  font-size:1rem;line-height:1.5;
}
.vz.vz-flat{background:transparent;border:none;box-shadow:none;padding:0;}
.story-body .vz{margin:var(--space-6) 0 var(--space-7);}
.vz-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 16px;margin-bottom:20px;}
.vz-title{font-size:1.02rem;font-weight:700;letter-spacing:-.015em;line-height:1.35;color:var(--fg);}
.vz-sub{margin-top:4px;font-size:.86rem;line-height:1.5;color:var(--fg-muted);}
.vz-src{margin-top:16px;font-size:.74rem;line-height:1.45;color:var(--fg-subtle);}
.vz-flag{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:4px 10px;border-radius:var(--r-full);
  background:var(--bg-panel);color:var(--fg-muted);
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.vz-flag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vz-4);}
.vz-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);}
.vz-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);}
@media (max-width:880px){ .vz-grid3{grid-template-columns:1fr;} }
@media (max-width:760px){ .vz-grid2{grid-template-columns:1fr;} }

/* ---------- Leyenda ---------- */
.vz-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px;padding:0;}
.vz-legend li{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--fg-muted);list-style:none;}
.vz-legend i{width:12px;height:12px;border-radius:3px;background:var(--c,var(--vz-1));flex:0 0 auto;}
.vz-legend i.is-dot{border-radius:50%;}
.vz-legend i.is-line{height:3px;border-radius:2px;width:16px;}

/* ---------- Cifras (stat tiles) ---------- */
.vz-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.vz-stat{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:18px 18px 16px;border-radius:var(--r-md);
  background:var(--bg-panel);border:1px solid var(--line);
  overflow:hidden;
}
.vz-stat::before{
  content:"";position:absolute;left:18px;top:0;height:3px;width:28px;border-radius:0 0 3px 3px;
  background:var(--vz-1);transform-origin:left;transform:scaleX(0);
  transition:transform .8s var(--vz-ease) .15s;
}
.vz-in .vz-stat::before,.vz-stat.vz-in::before{transform:scaleX(1);}
.vz-stat-num{font-size:clamp(1.8rem,3.6vw,2.5rem);font-weight:700;letter-spacing:-.035em;line-height:1.02;color:var(--fg);}
.vz-stat-num small{font-size:.5em;font-weight:600;letter-spacing:-.01em;color:var(--fg-muted);margin-left:2px;}
.vz-stat-label{font-size:.86rem;line-height:1.45;color:var(--fg-muted);}
.vz-stats.on-dark .vz-stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);}
.vz-stats.on-dark .vz-stat-num{color:#fff;}
.vz-stats.on-dark .vz-stat-label{color:rgba(255,255,255,.7);}
.vz-stats.on-dark .vz-stat::before{background:var(--accent-decor);}
.vz-stat.is-pending{background:transparent;border-style:dashed;border-color:var(--line-strong);}
.vz-stat.is-pending .vz-stat-num{display:flex;align-items:center;gap:10px;color:var(--fg-subtle);}
.vz-stat.is-pending .vz-stat-num i{width:10px;height:10px;border-radius:50%;background:var(--vz-4);animation:vz-blink 1.6s ease-in-out infinite;}
@keyframes vz-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

/* ---------- Barras horizontales ---------- */
.vz-bars{display:grid;gap:16px;margin:0;padding:0;}
.vz-bars li{display:grid;gap:7px;list-style:none;outline:none;}
.vz-bar-label{font-size:.88rem;line-height:1.35;color:var(--fg);}
.vz-bar-row{position:relative;height:16px;padding-right:4.2em;}
.vz-bar{position:relative;display:block;height:100%;}
.vz-bar::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--vz-grid);}
.vz-bar i{
  position:absolute;left:0;top:0;bottom:0;
  width:calc(var(--v) / var(--max,100) * 100%);
  background:var(--vz-1);border-radius:0 4px 4px 0;
  transform-origin:left center;transform:scaleX(0);
  transition:transform 1.1s var(--vz-ease),filter .2s ease;
}
.vz-bars li.is-muted .vz-bar i{background:var(--vz-muted);}
.vz-bar-val{
  position:absolute;top:50%;
  left:calc(var(--v) / var(--max,100) * (100% - 4.2em) + 10px);
  transform:translateY(-50%);
  font-size:.9rem;font-weight:700;letter-spacing:-.01em;color:var(--fg);white-space:nowrap;
  opacity:0;transition:opacity .5s ease .5s;
}
.vz-in .vz-bar i{transform:scaleX(1);}
.vz-in .vz-bar-val{opacity:1;}
.vz-bars li:nth-child(2) i{transition-delay:.08s;} .vz-bars li:nth-child(2) .vz-bar-val{transition-delay:.58s;}
.vz-bars li:nth-child(3) i{transition-delay:.16s;} .vz-bars li:nth-child(3) .vz-bar-val{transition-delay:.66s;}
.vz-bars li:nth-child(4) i{transition-delay:.24s;} .vz-bars li:nth-child(4) .vz-bar-val{transition-delay:.74s;}
.vz-bars li:nth-child(5) i{transition-delay:.32s;} .vz-bars li:nth-child(5) .vz-bar-val{transition-delay:.82s;}
.vz-bars li:nth-child(6) i{transition-delay:.40s;} .vz-bars li:nth-child(6) .vz-bar-val{transition-delay:.90s;}
.vz-bars li:hover .vz-bar i,.vz-bars li:focus-visible .vz-bar i{filter:brightness(1.12);}
.vz-bars li:focus-visible .vz-bar-label{color:var(--accent);}

/* ---------- Barra segmentada (parte de un todo) ---------- */
.vz-seg{display:flex;gap:2px;height:28px;clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--vz-ease);}
.vz-in .vz-seg{clip-path:inset(0 0 0 0);}
.vz-seg-part{
  flex:var(--v) 1 0;min-width:0;
  display:flex;align-items:center;padding:0 8px;
  background:var(--c,var(--vz-1));border-radius:4px;
  color:var(--vz-ink-on);font-size:.76rem;font-weight:700;white-space:nowrap;
  outline:none;transition:filter .2s ease;
}
.vz-seg-part.is-light-text{color:#fff;}
.vz-seg-part.no-label b{visibility:hidden;}
.vz-seg-part:hover,.vz-seg-part:focus-visible{filter:brightness(1.1);}
.vz-seg + .vz-legend{margin:14px 0 0;}

/* ---------- Comparativa en dos momentos (dumbbell) ---------- */
.vz-db{display:grid;gap:18px;margin:0;padding:0;}
.vz-db li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;list-style:none;outline:none;}
.vz-db-label{grid-column:1 / -1;font-size:.88rem;line-height:1.35;color:var(--fg);}
.vz-db-track{position:relative;height:18px;}
.vz-db-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--vz-grid);}
.vz-db-line{
  position:absolute;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--vz-muted);
  left:calc(min(var(--a),var(--b)) * 1%);width:calc((max(var(--a),var(--b)) - min(var(--a),var(--b))) * 1%);
  transform-origin:calc((var(--a) - min(var(--a),var(--b))) / max(1, max(var(--a),var(--b)) - min(var(--a),var(--b))) * 100%) 50%;
  transform:scaleX(0);transition:transform 1s var(--vz-ease) .25s;
}
.vz-db-a,.vz-db-b{
  position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  box-shadow:0 0 0 2px var(--bg-elevated);
}
.vz-db-a{left:calc(var(--a) * 1%);background:var(--vz-muted);}
.vz-db-b{left:calc(var(--a) * 1%);background:var(--vz-1);transition:left 1s var(--vz-ease) .25s;}
.vz-in .vz-db-line{transform:scaleX(1);}
.vz-in .vz-db-b{left:calc(var(--b) * 1%);}
.vz-db-vals{font-size:.86rem;color:var(--fg-muted);white-space:nowrap;}
.vz-db-vals b{color:var(--fg);font-weight:700;}
.vz-axis{display:flex;justify-content:space-between;margin-top:8px;padding-right:calc(5.8em + 14px);font-size:.72rem;color:var(--fg-subtle);}

/* ---------- Gráficas SVG (crecimiento y radar): se dibujan con JS ---------- */
.vz-svg{display:block;width:100%;overflow:visible;}
.vz-svg text{font-family:var(--font-body);fill:var(--fg-muted);font-size:12px;}
.vz-svg .t-strong{fill:var(--fg);font-weight:700;font-size:13px;}
.vz-svg .t-label{fill:var(--fg);font-size:12.5px;}
.vz-gridline{stroke:var(--vz-grid);stroke-width:1;shape-rendering:crispEdges;}
.vz-line{fill:none;stroke:var(--vz-1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.vz-area{fill:var(--vz-wash);opacity:0;transition:opacity .9s ease .7s;}
.vz-marker{fill:var(--vz-1);stroke:var(--bg-elevated);stroke-width:2;}
.vz-hit{fill:transparent;cursor:pointer;outline:none;}
.vz-hit:focus-visible + .vz-marker,.vz-hit:hover + .vz-marker{stroke:var(--vz-1);stroke-opacity:.25;stroke-width:6;}
.vz-growth .vz-line{stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);transition:stroke-dashoffset 1.6s var(--vz-ease);}
.vz-growth .vz-marker,.vz-growth .vz-endlabel{opacity:0;transition:opacity .4s ease;}
.vz-growth .vz-marker.is-start,.vz-growth .vz-endlabel.is-start{transition-delay:.1s;}
.vz-growth .vz-marker.is-end,.vz-growth .vz-endlabel.is-end{transition-delay:1.5s;}
.vz-in .vz-growth .vz-line,.vz-growth.vz-in .vz-line{stroke-dashoffset:0;}
.vz-in .vz-growth .vz-area,.vz-growth.vz-in .vz-area{opacity:1;}
.vz-in .vz-growth .vz-marker,.vz-in .vz-growth .vz-endlabel,
.vz-growth.vz-in .vz-marker,.vz-growth.vz-in .vz-endlabel{opacity:1;}

.vz-radar{max-width:440px;margin:0 auto;}
.vz-radar .vz-ring{fill:none;stroke:var(--vz-grid);stroke-width:1;}
.vz-radar .vz-spoke{stroke:var(--vz-grid);stroke-width:1;}
.vz-radar .vz-shape{transform-box:view-box;transform:scale(0);transition:transform 1.2s var(--vz-ease) .1s;}
.vz-radar .vz-poly{fill:var(--vz-wash);stroke:var(--vz-1);stroke-width:2;stroke-linejoin:round;}
.vz-radar .vz-poly.is-target{fill:none;stroke:var(--vz-muted);stroke-width:1.5;}
.vz-radar .vz-pt{opacity:0;transition:opacity .4s ease 1.1s;}
.vz-in .vz-radar .vz-shape,.vz-radar.vz-in .vz-shape{transform:scale(1);}
.vz-in .vz-radar .vz-pt,.vz-radar.vz-in .vz-pt{opacity:1;}

/* ---------- Medidor (gauge) ---------- */
.vz-gauge{position:relative;max-width:300px;margin:0 auto;}
.vz-gauge svg{display:block;width:100%;height:auto;overflow:visible;}
.vz-gauge-track{fill:none;stroke:var(--vz-track);stroke-width:16;stroke-linecap:round;}
.vz-gauge-fill{
  fill:none;stroke:var(--vz-1);stroke-width:16;stroke-linecap:round;
  stroke-dasharray:100 100;stroke-dashoffset:100;
  transition:stroke-dashoffset 1.6s var(--vz-ease) .1s;
}
.vz-in .vz-gauge-fill,.vz-gauge.vz-in .vz-gauge-fill{stroke-dashoffset:calc(100 - var(--pct,0));}
.vz-gauge-center{position:absolute;left:0;right:0;bottom:4%;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;}
.vz-gauge-num{font-size:clamp(2.2rem,5vw,3rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--fg);}
.vz-gauge-num small{font-size:.38em;font-weight:600;color:var(--fg-muted);letter-spacing:0;margin-left:3px;}
.vz-gauge-label{font-size:.8rem;color:var(--fg-muted);}
.vz-gauge-scale{display:flex;justify-content:space-between;margin:6px 4% 0;font-size:.72rem;color:var(--fg-subtle);}

/* ---------- Medidores lineales (meter) ---------- */
.vz-meters{display:grid;gap:14px;}
.vz-meter{display:grid;gap:6px;}
.vz-meter-top{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;color:var(--fg);}
.vz-meter-top b{font-weight:700;}
.vz-meter-bar{height:8px;border-radius:var(--r-full);background:var(--vz-track);overflow:hidden;}
.vz-meter-bar i{display:block;height:100%;width:calc(var(--v) / var(--max,100) * 100%);border-radius:var(--r-full);background:var(--vz-1);transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--vz-ease) .3s;}
.vz-in .vz-meter-bar i{transform:scaleX(1);}

/* ---------- Matriz de dos capitales ---------- */
.vz-matrix{position:relative;padding:0 0 30px 30px;}
.vz-matrix-plot{
  position:relative;aspect-ratio:1/1;max-width:360px;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;
  border-radius:var(--r-md);overflow:hidden;
}
.vz-matrix-cell{
  display:flex;align-items:flex-start;padding:10px 12px;
  background:var(--bg-panel);font-size:.78rem;font-weight:700;line-height:1.25;color:var(--fg-muted);
  transition:background .5s ease,color .5s ease;
}
.vz-matrix-cell.is-hi{background:var(--accent-soft);color:var(--accent);}
.vz-matrix-dot{
  position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:var(--vz-1);box-shadow:0 0 0 3px var(--bg-elevated),0 6px 16px rgba(63,99,168,.35);
  left:6%;top:94%;
  transition:left 1.4s var(--vz-ease) .3s,top 1.4s var(--vz-ease) .3s;
}
.vz-in .vz-matrix-dot{left:var(--x);top:calc(100% - var(--y));}
.vz-matrix-dot::after{
  content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--vz-1);opacity:0;
  animation:vz-ping 2.4s var(--vz-ease) 1.8s infinite;
}
@keyframes vz-ping{0%{transform:scale(.6);opacity:.55;}80%,100%{transform:scale(1.6);opacity:0;}}
.vz-matrix-tag{
  position:absolute;transform:translate(-50%,16px);
  padding:4px 9px;border-radius:8px;background:var(--fg);color:var(--bg);
  font-size:.74rem;font-weight:700;white-space:nowrap;
  left:var(--x);top:calc(100% - var(--y));opacity:0;transition:opacity .4s ease 1.6s;pointer-events:none;
}
.vz-in .vz-matrix-tag{opacity:1;}
.vz-matrix-x,.vz-matrix-y{position:absolute;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--fg-muted);}
.vz-matrix-x{left:30px;bottom:6px;right:0;max-width:360px;display:flex;justify-content:space-between;}
.vz-matrix-y{left:0;top:0;bottom:30px;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;justify-content:space-between;}
.vz-matrix-wrap{position:relative;max-width:390px;}
.vz-matrix-wrap .vz-matrix-plot{width:100%;}

/* ---------- Flujo de pasos ---------- */
.vz-flow{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:16px;margin:0;padding:0;counter-reset:vzf;}
.vz-flow::before,.vz-flow::after{
  content:"";position:absolute;top:21px;left:calc(50% / var(--n,4));right:calc(50% / var(--n,4));height:2px;border-radius:2px;
}
.vz-flow::before{background:var(--vz-grid);}
.vz-flow::after{background:var(--vz-1);transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--vz-ease) .2s;}
.vz-in .vz-flow::after,.vz-flow.vz-in::after{transform:scaleX(1);}
.vz-flow li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;list-style:none;}
.vz-flow-dot{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--bg-elevated);border:2px solid var(--vz-grid);color:var(--fg-muted);
  font-size:.92rem;font-weight:700;
  transition:background .4s ease,border-color .4s ease,color .4s ease,transform .5s var(--ease-spring);
}
.vz-in .vz-flow-dot,.vz-flow.vz-in .vz-flow-dot{background:var(--vz-1);border-color:var(--vz-1);color:#fff;}
.vz-flow li:nth-child(1) .vz-flow-dot{transition-delay:.15s;}
.vz-flow li:nth-child(2) .vz-flow-dot{transition-delay:.5s;}
.vz-flow li:nth-child(3) .vz-flow-dot{transition-delay:.85s;}
.vz-flow li:nth-child(4) .vz-flow-dot{transition-delay:1.2s;}
.vz-flow li:nth-child(5) .vz-flow-dot{transition-delay:1.55s;}
.vz-flow li:nth-child(6) .vz-flow-dot{transition-delay:1.8s;}
.vz-flow li:nth-child(7) .vz-flow-dot{transition-delay:2s;}
.vz-flow li:nth-child(8) .vz-flow-dot{transition-delay:2.2s;}
.vz-flow b{font-size:.92rem;line-height:1.25;color:var(--fg);}
.vz-flow span{font-size:.8rem;line-height:1.4;color:var(--fg-muted);}
.vz-flow a{color:inherit;}
.vz-flow a:hover b,.vz-flow a:focus-visible b{color:var(--accent);}
.vz-flow li:hover .vz-flow-dot{transform:scale(1.08);}
@media (max-width:760px){
  .vz-flow{grid-template-columns:1fr;gap:14px;}
  .vz-flow::before,.vz-flow::after{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto;}
  .vz-flow::after{transform-origin:top;transform:scaleY(0);}
  .vz-in .vz-flow::after,.vz-flow.vz-in::after{transform:scaleY(1);}
  .vz-flow li{flex-direction:row;align-items:center;text-align:left;gap:14px;}
  .vz-flow li > div{display:flex;flex-direction:column;gap:2px;}
}
.vz-flow li > div{display:flex;flex-direction:column;gap:4px;}

/* ---------- Matriz de puntos ---------- */
.vz-dots{display:grid;grid-template-columns:repeat(var(--cols,17),1fr);gap:6px;max-width:520px;}
.vz-dots span{aspect-ratio:1/1;border-radius:50%;background:var(--vz-1);transform:scale(0);transition:transform .45s var(--ease-spring);transition-delay:calc(var(--i) * 14ms);}
.vz-in .vz-dots span,.vz-dots.vz-in span{transform:scale(1);}
.vz-dots span.is-alt{background:var(--accent-decor);}

/* ---------- Línea de tiempo compacta ---------- */
.vz-tl{position:relative;display:grid;gap:18px;margin:0;padding:0 0 0 34px;}
.vz-tl::before,.vz-tl::after{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;border-radius:2px;}
.vz-tl::before{background:var(--vz-grid);}
.vz-tl::after{background:linear-gradient(180deg,var(--accent-decor),var(--vz-1));transform-origin:top;transform:scaleY(0);transition:transform 1.8s var(--vz-ease) .1s;}
.vz-in .vz-tl::after,.vz-tl.vz-in::after{transform:scaleY(1);}
.vz-tl li{position:relative;list-style:none;opacity:0;transform:translateX(-8px);transition:opacity .5s ease,transform .6s var(--vz-ease);}
.vz-tl li::before{
  content:"";position:absolute;left:-31px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--bg-elevated);border:2px solid var(--vz-1);
}
.vz-tl li.is-key::before{background:var(--vz-1);}
.vz-in .vz-tl li,.vz-tl.vz-in li{opacity:1;transform:none;}
.vz-tl li:nth-child(2){transition-delay:.15s;} .vz-tl li:nth-child(3){transition-delay:.3s;}
.vz-tl li:nth-child(4){transition-delay:.45s;} .vz-tl li:nth-child(5){transition-delay:.6s;}
.vz-tl li:nth-child(6){transition-delay:.75s;} .vz-tl li:nth-child(7){transition-delay:.9s;}
.vz-tl li:nth-child(8){transition-delay:1.05s;} .vz-tl li:nth-child(9){transition-delay:1.2s;}
.vz-tl-year{display:block;font-size:.76rem;font-weight:800;letter-spacing:.12em;color:var(--accent);}
.vz-tl-text{display:block;margin-top:2px;font-size:.95rem;line-height:1.5;color:var(--fg);}
.vz-tl a{color:inherit;border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease;}
.vz-tl a:hover,.vz-tl a:focus-visible{color:var(--accent);border-bottom-color:currentColor;}

/* ---------- Tooltip ---------- */
.vz-tip{
  position:fixed;z-index:3000;left:0;top:0;pointer-events:none;
  display:flex;flex-direction:column;gap:2px;max-width:260px;
  padding:9px 12px;border-radius:10px;
  background:var(--navy);color:#fff;box-shadow:0 10px 30px rgba(10,14,24,.25);
  font-size:.8rem;line-height:1.35;
  opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease;
}
.vz-tip.is-on{opacity:1;transform:none;}
.vz-tip b{font-size:1rem;font-weight:700;letter-spacing:-.01em;}
.vz-tip span{color:rgba(255,255,255,.72);}

/* Los contadores no enseñan su cifra final antes de contar */
html.vz-ready [data-count]:not(.is-counted){opacity:0;}
@media print{ html.vz-ready [data-count]{opacity:1!important;} }

/* ---------- Texto solo para lectores de pantalla ---------- */
.vz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

/* ============================================================================
   PIEZAS ILUSTRATIVAS (sin datos): mini gráficas de Nosotros y diagramas
   ========================================================================= */
/* Datos dispersos que se ordenan en estrategia */
.vz-scatter{position:relative;aspect-ratio:5/4;width:100%;max-width:520px;margin-inline:auto;}
.vz-scatter span{
  position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  left:var(--x0);top:var(--y0);background:var(--vz-muted);
  transition:left 1.6s var(--vz-ease),top 1.6s var(--vz-ease),background .8s ease,border-radius .8s ease;
  transition-delay:calc(var(--i) * 12ms);
}
.vz-in .vz-scatter span,.vz-scatter.vz-in span{left:var(--x1);top:var(--y1);background:var(--vz-1);border-radius:3px;}
.vz-scatter span.is-alt{--hl:1;}
.vz-in .vz-scatter span.is-alt,.vz-scatter.vz-in span.is-alt{background:var(--accent-decor);}
.vz-scatter-labels{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--fg-muted);}
.vz-scatter-labels span:last-child{color:var(--accent);}

/* Tarjetas de pilares con mini gráfica */
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-7);}
@media (max-width:760px){ .pillars{grid-template-columns:1fr;} }
.pillar{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:var(--space-5);align-items:center;
  padding:var(--space-5) var(--space-6);
  background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .4s var(--vz-ease),box-shadow .4s var(--vz-ease),border-color .3s ease;
}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
.pillar-kicker{font-size:.72rem;font-weight:800;letter-spacing:.12em;color:var(--accent);}
.pillar h3{margin-top:8px;font-size:1.18rem;line-height:1.25;letter-spacing:-.02em;}
.pillar p{margin-top:8px;font-size:.94rem;line-height:1.6;color:var(--fg-muted);}
.pillar-viz{position:relative;height:120px;}
@media (max-width:420px){ .pillar{grid-template-columns:1fr;} .pillar-viz{max-width:220px;} }

/* 1 · Cuatro fuentes que convergen en una recomendación */
.pv-sources{display:flex;flex-direction:column;justify-content:space-between;height:100%;}
.pv-sources i{
  display:block;height:8px;border-radius:0 4px 4px 0;background:var(--vz-muted);
  width:var(--w);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--vz-ease),background .6s ease;
}
.pv-sources i:nth-child(2){transition-delay:.12s;} .pv-sources i:nth-child(3){transition-delay:.24s;} .pv-sources i:nth-child(4){transition-delay:.36s;}
.vz-in .pv-sources i{transform:scaleX(1);background:var(--accent-decor);}
.pv-check{
  position:absolute;right:0;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;
  display:grid;place-items:center;background:var(--vz-1);color:#fff;
  transform:scale(0);transition:transform .6s var(--ease-spring) 1s;
  box-shadow:0 8px 20px rgba(63,99,168,.35);
}
.pv-check svg{width:24px;height:24px;stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .5s ease 1.4s;}
.vz-in .pv-check{transform:scale(1);}
.vz-in .pv-check svg{stroke-dashoffset:0;}

/* 2 · 85 variables en 10 dimensiones */
.pv-dots{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;align-content:center;height:100%;}
.pv-dots span{aspect-ratio:1/1;border-radius:50%;background:var(--vz-1);transform:scale(0);transition:transform .35s var(--ease-spring);transition-delay:calc(var(--i) * 10ms);}
.vz-in .pv-dots span{transform:scale(1);}

/* 3 · Acompañamiento: recorrido continuo */
.pv-path{width:100%;height:100%;overflow:visible;}
.pv-path .track{fill:none;stroke:var(--vz-grid);stroke-width:2;}
.pv-path .run{fill:none;stroke:var(--vz-1);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);transition:stroke-dashoffset 1.8s var(--vz-ease);}
.vz-in .pv-path .run{stroke-dashoffset:0;}
.pv-path .node{fill:var(--bg-elevated);stroke:var(--vz-1);stroke-width:2;}
.pv-path .traveler{fill:var(--vz-1);opacity:0;}
.vz-in .pv-path .traveler{opacity:1;}
.pv-path text{font-size:10px;fill:var(--fg-muted);font-family:var(--font-body);}

/* 4 · De marca a inversión: curva ascendente */
.pv-rise{width:100%;height:100%;overflow:visible;}
.pv-rise .base{stroke:var(--vz-grid);stroke-width:1;}
.pv-rise .area{fill:var(--vz-wash);opacity:0;transition:opacity .8s ease .9s;}
.pv-rise .line{fill:none;stroke:var(--vz-1);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:stroke-dashoffset 1.6s var(--vz-ease);}
.pv-rise .end{fill:var(--vz-1);stroke:var(--bg-elevated);stroke-width:2;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s var(--ease-spring) 1.5s;}
.vz-in .pv-rise .line{stroke-dashoffset:0;}
.vz-in .pv-rise .area{opacity:1;}
.vz-in .pv-rise .end{transform:scale(1);}
.pv-badge{
  position:absolute;right:0;top:0;padding:4px 9px;border-radius:999px;background:var(--fg);color:var(--bg);
  font-size:.68rem;font-weight:700;opacity:0;transform:translateY(6px);transition:opacity .4s ease 1.7s,transform .4s ease 1.7s;
}
.vz-in .pv-badge{opacity:1;transform:none;}

/* Transformaciones del propósito (fondo oscuro) */
.shifts{display:grid;gap:12px;margin-top:var(--space-7);}
.shift{
  display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;gap:12px;
  padding:14px 18px;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
}
.shift-from,.shift-to{display:flex;align-items:center;gap:12px;font-size:.98rem;line-height:1.3;}
.shift-from{color:rgba(255,255,255,.55);}
.shift-to{color:#fff;font-weight:600;}
.shift-from svg,.shift-to svg{flex:0 0 auto;width:44px;height:28px;overflow:visible;}
.shift-from svg *{stroke:rgba(255,255,255,.45);}
.shift-to svg *{stroke:var(--accent-decor);}
.shift-arrow{position:relative;height:2px;background:rgba(255,255,255,.14);border-radius:2px;}
.shift-arrow::after{content:"";position:absolute;inset:0;background:var(--accent-decor);transform-origin:left;transform:scaleX(0);transition:transform .8s var(--vz-ease);}
.shift-arrow::before{content:"";position:absolute;right:-2px;top:-4px;width:10px;height:10px;border-top:2px solid var(--accent-decor);border-right:2px solid var(--accent-decor);transform:rotate(45deg) scale(0);transition:transform .3s ease .7s;}
.vz-in .shift-arrow::after,.shift.vz-in .shift-arrow::after{transform:scaleX(1);}
.vz-in .shift-arrow::before,.shift.vz-in .shift-arrow::before{transform:rotate(45deg) scale(1);}
.shift-to svg .draw{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset .9s var(--vz-ease) .5s;}
.vz-in .shift-to svg .draw,.shift.vz-in .shift-to svg .draw{stroke-dashoffset:0;}
.shifts .shift:nth-child(2) .shift-arrow::after{transition-delay:.25s;}
.shifts .shift:nth-child(3) .shift-arrow::after{transition-delay:.5s;}
@media (max-width:560px){
  .shift{grid-template-columns:1fr;gap:8px;}
  .shift-arrow{width:64px;}
}

/* Horizonte 2026 → 2036 */
.horizon-track{position:relative;margin:var(--space-6) 0 var(--space-6);padding:28px 0 0;}
.horizon-bar{position:relative;height:6px;border-radius:999px;background:var(--vz-track);}
.horizon-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent-decor),var(--vz-1));transform-origin:left;transform:scaleX(0);transition:transform 2.2s var(--vz-ease) .2s;}
.horizon-track.vz-in .horizon-bar i{transform:scaleX(1);}
.horizon-ticks{display:flex;justify-content:space-between;margin-top:10px;font-size:.74rem;font-weight:700;color:var(--fg-subtle);}
.horizon-ticks span:first-child{color:var(--accent);}
.horizon-ticks span:last-child{color:var(--fg);}
.horizon-pin{
  position:absolute;top:0;left:0;transform:translateX(-50%);
  padding:3px 9px;border-radius:999px;background:var(--vz-1);color:#fff;font-size:.7rem;font-weight:700;
}
.horizon-pin.is-end{left:100%;background:var(--fg);color:var(--bg);opacity:0;transition:opacity .4s ease 2.2s;}
.horizon-track.vz-in .horizon-pin.is-end{opacity:1;}

/* Diagrama de cuatro perspectivas */
.voices{position:relative;aspect-ratio:1/1;max-width:380px;margin-inline:auto;}
.voices svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.voices .spoke{stroke:var(--vz-1);stroke-width:2;stroke-dasharray:4 6;opacity:.0;transition:opacity .6s ease;}
.voices.vz-in .spoke{opacity:.55;animation:vz-flow-in 1.4s linear infinite;}
@keyframes vz-flow-in{to{stroke-dashoffset:-20;}}
.voices .ring{fill:none;stroke:var(--vz-grid);stroke-width:1;}
.voice{
  position:absolute;transform:translate(-50%,-50%) scale(.6);opacity:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  transition:transform .6s var(--ease-spring),opacity .4s ease;
}
.voice i{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--bg-elevated);border:2px solid var(--vz-1);color:var(--vz-1);box-shadow:var(--shadow-sm);}
.voice i svg{position:static;width:24px;height:24px;}
.voice b{font-size:.82rem;color:var(--fg);}
.voices.vz-in .voice{transform:translate(-50%,-50%) scale(1);opacity:1;}
.voices .voice:nth-of-type(2){transition-delay:.12s;} .voices .voice:nth-of-type(3){transition-delay:.24s;} .voices .voice:nth-of-type(4){transition-delay:.36s;}
.voice-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:112px;height:112px;border-radius:50%;
  background:var(--vz-1);color:#fff;text-align:center;font-size:.82rem;font-weight:700;line-height:1.2;padding:12px;
  box-shadow:0 14px 34px rgba(63,99,168,.35);
}
.voice-core::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--vz-1);opacity:0;animation:vz-ping 2.6s var(--vz-ease) 1s infinite;}

/* Convergencia: dos consultores, misma puntuación */
.converge{display:grid;gap:14px;}
.converge-row{display:grid;grid-template-columns:120px 1fr 48px;align-items:center;gap:12px;font-size:.86rem;color:var(--fg);}
.converge-row .vz-meter-bar{height:10px;}
.converge-row .vz-meter-bar i{width:calc(var(--v) * 1%);transform:none;transition:width 1.6s var(--vz-ease) .3s;}
.converge-row:first-child .vz-meter-bar i{width:calc(var(--v0) * 1%);}
.converge-row:nth-child(2) .vz-meter-bar i{width:calc(var(--v1) * 1%);}
.converge.vz-in .converge-row .vz-meter-bar i{width:calc(var(--v) * 1%);}
.converge-row b{font-weight:700;text-align:right;}
.converge-note{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:.84rem;color:var(--fg-muted);}
.converge-note i{width:20px;height:20px;border-radius:50%;background:var(--vz-1);display:grid;place-items:center;color:#fff;transform:scale(0);transition:transform .5s var(--ease-spring) 1.8s;}
.converge.vz-in .converge-note i{transform:scale(1);}

/* Tres evidencias */
.evidence{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.evidence-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  border:1.5px solid var(--line-strong);background:var(--bg-elevated);font-size:.84rem;font-weight:600;color:var(--fg-muted);
  transition:border-color .4s ease,color .4s ease,background .4s ease;
}
.evidence-chip i{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;}
.evidence.vz-in .evidence-chip{border-color:var(--vz-1);color:var(--vz-1);background:var(--accent-soft);}
.evidence.vz-in .evidence-chip:nth-child(1){transition-delay:.2s;}
.evidence.vz-in .evidence-chip:nth-child(2){transition-delay:.6s;}
.evidence.vz-in .evidence-chip:nth-child(3){transition-delay:1s;}
.evidence.vz-in .evidence-chip:nth-child(4){transition-delay:1.4s;}
.evidence-eq{font-size:1.2rem;font-weight:700;color:var(--fg-subtle);}
.evidence-max{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--fg);color:var(--bg);
  font-size:.84rem;font-weight:700;opacity:.25;transition:opacity .5s ease 1.4s;
}
.evidence.vz-in .evidence-max{opacity:1;}

/* Puente de capital (VDN Invest) */
.bridge{position:relative;display:grid;grid-template-columns:1fr minmax(120px,1.4fr) 1fr;align-items:center;gap:12px;}
.bridge-node{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 12px;border-radius:var(--r-md);
  background:var(--bg-panel);border:1px solid var(--line);
}
.bridge-node i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--vz-1);color:#fff;}
.bridge-node i svg{width:24px;height:24px;}
.bridge-node b{font-size:.95rem;color:var(--fg);}
.bridge-node span{font-size:.8rem;color:var(--fg-muted);line-height:1.4;}
.bridge-mid{position:relative;height:120px;}
.bridge-mid svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.bridge-mid .arc{fill:none;stroke:var(--vz-grid);stroke-width:2;}
.bridge-mid .flow{fill:none;stroke:var(--vz-1);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:3 12;opacity:0;transition:opacity .6s ease .4s;}
.bridge-mid .flow.back{stroke:var(--accent-decor);}
.bridge.vz-in .bridge-mid .flow{opacity:1;animation:vz-flow-right 1.2s linear infinite;}
.bridge.vz-in .bridge-mid .flow.back{animation:vz-flow-left 1.2s linear infinite;}
@keyframes vz-flow-right{to{stroke-dashoffset:-30;}}
@keyframes vz-flow-left{to{stroke-dashoffset:30;}}
.bridge-gate{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);opacity:0;
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--fg);color:var(--bg);
  font-size:.74rem;font-weight:700;white-space:nowrap;transition:transform .6s var(--ease-spring) .2s,opacity .4s ease .2s;
}
.bridge.vz-in .bridge-gate{transform:translate(-50%,-50%) scale(1);opacity:1;}
.bridge-cap{position:absolute;left:0;right:0;font-size:.72rem;font-weight:700;color:var(--fg-muted);text-align:center;}
.bridge-cap.top{top:6px;} .bridge-cap.bottom{bottom:6px;}
@media (max-width:640px){
  .bridge{grid-template-columns:1fr;}
  .bridge-mid{height:90px;transform:rotate(90deg);width:90px;margin:0 auto;}
  .bridge-mid .bridge-gate,.bridge-mid .bridge-cap{transform:rotate(-90deg);}
  .bridge.vz-in .bridge-gate{transform:translate(-50%,-50%) rotate(-90deg) scale(1);}
}

/* 40 productos → 4 casillas (Jobs) */
.grid40{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;}
.grid40-a{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;}
.grid40-a span{aspect-ratio:1/1;border-radius:3px;background:var(--vz-muted);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(.6s + var(--i) * 15ms);}
.grid40.vz-in .grid40-a span:not(.keep){opacity:.18;transform:scale(.7);}
.grid40.vz-in .grid40-a span.keep{background:var(--vz-1);}
.grid40-arrow{width:34px;height:2px;background:var(--line-strong);position:relative;}
.grid40-arrow::after{content:"";position:absolute;right:0;top:-4px;width:10px;height:10px;border-top:2px solid var(--line-strong);border-right:2px solid var(--line-strong);transform:rotate(45deg);}
.grid40-b{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto 1fr 1fr;gap:4px;font-size:.7rem;color:var(--fg-muted);}
.grid40-b .h{display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px;font-weight:700;}
.grid40-b .v{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:center;font-weight:700;}
.grid40-b .c{aspect-ratio:1/1;border-radius:6px;background:var(--vz-1);transform:scale(0);transition:transform .5s var(--ease-spring);}
.grid40.vz-in .grid40-b .c{transform:scale(1);}
.grid40-b .c:nth-of-type(1){transition-delay:1.6s;} .grid40-b .c:nth-of-type(2){transition-delay:1.75s;}
.grid40-b .c:nth-of-type(3){transition-delay:1.9s;} .grid40-b .c:nth-of-type(4){transition-delay:2.05s;}
.grid40-cap{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;margin-top:10px;font-size:.84rem;color:var(--fg-muted);}
.grid40-cap b{display:block;font-size:1.3rem;color:var(--fg);letter-spacing:-.02em;}
.grid40-cap span:nth-child(2){width:34px;}
@media (max-width:560px){ .grid40,.grid40-cap{grid-template-columns:1fr;} .grid40-arrow{transform:rotate(90deg);margin:6px auto;} .grid40-cap span:nth-child(2){display:none;} }

/* Junta directiva (Historias) */
.board{position:relative;max-width:820px;margin:0 auto;aspect-ratio:16/8;}
.board-table{
  position:absolute;left:18%;right:18%;top:26%;bottom:26%;border-radius:999px;
  background:radial-gradient(120% 120% at 50% 0%,#2A3A63,#0E1526);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 24px 60px rgba(14,21,38,.25);
  display:grid;place-items:center;text-align:center;color:rgba(255,255,255,.8);font-size:.86rem;padding:0 18%;
}
.board-table b{display:block;color:#fff;font-size:1.05rem;letter-spacing:-.01em;}
.seat{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(.4);opacity:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  transition:transform .6s var(--ease-spring),opacity .4s ease;transition-delay:calc(var(--i) * 90ms);
  outline:none;
}
.seat i{display:block;width:clamp(44px,8vw,72px);aspect-ratio:1/1;border-radius:50%;background:var(--src) center/cover no-repeat,#1F3358;filter:grayscale(1);box-shadow:0 0 0 3px var(--bg),0 8px 22px rgba(14,21,38,.2);transition:filter .4s ease,transform .4s var(--ease-spring);}
.seat b{font-size:.74rem;font-weight:700;color:var(--fg);line-height:1.2;white-space:nowrap;}
.seat:hover i,.seat:focus-visible i{filter:none;transform:scale(1.08);}
.seat:focus-visible i{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--focus);}
.seat.is-you i{background:var(--vz-1);display:grid;place-items:center;color:#fff;font-style:normal;font-weight:700;font-size:.9rem;filter:none;}
.seat.is-you i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--vz-1);opacity:0;animation:vz-ping 2.4s var(--vz-ease) 1.5s infinite;}
.seat.is-you i{position:relative;}
.board.vz-in .seat{transform:translate(-50%,-50%) scale(1);opacity:1;}
@media (max-width:640px){ .board{aspect-ratio:1/1;} .board-table{left:22%;right:22%;top:30%;bottom:30%;padding:0 10%;font-size:.74rem;} .seat b{font-size:.66rem;} }

/* Medidor circular reactivo (chequeo de dolores) */
.pain-ring{position:relative;width:64px;height:64px;flex:0 0 auto;}
.pain-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.pain-ring .t{fill:none;stroke:var(--vz-track);stroke-width:7;}
.pain-ring .f{fill:none;stroke:var(--vz-1);stroke-width:7;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--p,0));transition:stroke-dashoffset .6s var(--vz-ease),stroke .3s ease;}
.pain-result.hot .pain-ring .f{stroke:#C0392B;}
.pain-ring.is-zero .f{opacity:0;}
.pain-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:.95rem;font-weight:700;color:var(--fg);}

/* Índice legal con seguimiento de lectura */
.legal-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-8);align-items:start;}
.legal-toc{position:sticky;top:calc(var(--nav-h) + 24px);padding:6px 0;}
.legal-toc-label{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:10px;}
.legal-toc ol{position:relative;display:grid;gap:2px;margin:0;padding:0 0 0 14px;}
.legal-toc ol::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--vz-grid);border-radius:2px;}
.legal-toc-ind{position:absolute;left:0;width:2px;border-radius:2px;background:var(--vz-1);top:0;height:20px;transition:top .35s var(--vz-ease),height .35s var(--vz-ease);}
.legal-toc li{list-style:none;}
.legal-toc a{display:block;padding:5px 0;font-size:.84rem;line-height:1.35;color:var(--fg-muted);transition:color .2s ease;}
.legal-toc a:hover,.legal-toc a:focus-visible{color:var(--fg);}
.legal-toc a.is-active{color:var(--accent);font-weight:600;}
@media (max-width:960px){ .legal-layout{grid-template-columns:1fr;gap:0;} .legal-toc{display:none;} }

/* ---------- Movimiento reducido: todo en su estado final ---------- */
html.no-motion .vz *,html.no-motion .vz::before,html.no-motion .vz::after,
html.no-motion [class*="vz-"],html.no-motion [class*="vz-"]::before,html.no-motion [class*="vz-"]::after,
html.no-motion .pillar *,html.no-motion .shift *,html.no-motion .horizon-track *,html.no-motion .voices *,
html.no-motion .converge *,html.no-motion .evidence *,html.no-motion .bridge *,html.no-motion .grid40 *,
html.no-motion .board *,html.no-motion .shift-arrow::before,html.no-motion .shift-arrow::after{
  transition:none!important;animation:none!important;
}
@media (prefers-reduced-motion:reduce){
  .vz *,.vz::before,.vz::after,[class*="vz-"],[class*="vz-"]::before,[class*="vz-"]::after,
  .pillar *,.shift *,.horizon-track *,.voices *,.converge *,.evidence *,.bridge *,.grid40 *,.board *,
  .shift-arrow::before,.shift-arrow::after{transition:none!important;animation:none!important;}
}

/* ---------- Impresión: estado final, sin sombras ---------- */
@media print{
  .vz{box-shadow:none;break-inside:avoid;}
  .vz-tip{display:none!important;}
  .proj-shot,.proj-row .proj-body > *,.vz-tl li,.voice,.seat{opacity:1!important;transform:none!important;}
}

/* Caja del chequeo: anillo a la izquierda, recuento y mensaje a la derecha */
.pain-result{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center;}
.pain-result .pain-ring{display:block;grid-row:1 / span 2;}
.pain-result .pain-count{display:block;align-self:end;margin-bottom:2px;}
.pain-result #painMsg{display:block;align-self:start;}

/* Pasos con enlace o contenido envuelto */
.vz-flow li div{display:flex;flex-direction:column;gap:4px;}

/* Dentro de los artículos: listas y párrafos de las gráficas sin el estilo del texto corrido */
.story-body .vz ul,.story-body .vz ol{margin:0;padding:0;}
.story-body .vz li{list-style:none;margin:0;}
.story-body .vz .vz-bars{gap:16px;}
.story-body .vz .vz-db{gap:18px;}
.story-body .vz .vz-legend{margin:0 0 14px;}
.story-body .vz .vz-seg + .vz-legend{margin:14px 0 0;}
.story-body .vz p.vz-src{margin:16px 0 0;font-size:.74rem;line-height:1.45;color:var(--fg-subtle);}
.story-body .vz .vz-tl{padding-left:34px;}
.story-body .vz .vz-stats.vz-gap,.vz .vz-stats.vz-gap{margin-top:22px;}
.vz .vz-legend + .vz-stats{margin-top:22px;}
.grid40-b{width:100%;max-width:220px;justify-self:center;}
.moments-tl a,.story-body .vz-tl a{color:var(--accent);font-weight:600;}
/* Rejilla del radar más visible sobre fondos grises */
.report-cell .vz-radar .vz-ring,.report-cell .vz-radar .vz-spoke{stroke:#D3D7DF;}
.report-cell .vz-radar .vz-marker{stroke:var(--bg-panel);}
