/* p-video.css · página Video (narrativa y formatos) · clases vi-* · solo tokens de tokens.css (sin hex, sin sombras, sin degradados, sin rebotes) */

/* ---- ritmo de la página: más compacta que el resto (lo accesorio vive en <details class="mas">) ---- */
.vi-pg .hero{padding:var(--s-48) 0 var(--s-32)}
.vi-pg .sec{padding:calc(var(--s-32) + var(--s-8)) 0}
.vi-pg .sec-head{max-width:none;margin-bottom:var(--s-24)}
.vi-pg .sec-head h2{max-width:none}
.vi-pg .sec-head .lede{margin-top:var(--s-8)}
.vi-pg .sec-head .eyebrow{margin-bottom:var(--s-12)}
.vi-pg details.mas>div>.vi-pie:first-child{margin-top:0}
.vi-pg .acciones{margin-top:var(--s-24)}
.vi-pg .sec>details.mas:first-of-type{margin-top:var(--s-24)}
.vi-gan{margin-top:var(--s-32);margin-bottom:var(--s-8)}

/* ---- la espina: cinco movimientos que se encienden de a uno ---- */
.vi-stage{--alto:0px;padding:var(--s-24) var(--s-24) 56px;align-content:center}
.vi-esp{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-16);width:100%}
.vi-ec{display:flex;flex-direction:column;gap:var(--s-8);min-width:0}
.vi-th{aspect-ratio:3/2;border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-captura);overflow:hidden;background:var(--blanco)}
.vi-th img{width:100%;height:100%;object-fit:cover}
.vi-eh{display:flex;align-items:center;gap:var(--s-8);margin-top:var(--s-4)}
.vi-eh b{font-size:var(--t-19);letter-spacing:var(--trk-19)}
.vi-ec p{margin:0;font-size:var(--t-15);color:var(--texto-2);line-height:1.35}
.vi-n{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:var(--r-pill);border:var(--borde-encendido) solid var(--texto-2);font-size:var(--t-15);font-weight:var(--bold);font-variant-numeric:tabular-nums;color:var(--texto)}
.vi-n.on,.on .vi-n{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.vi-pes{height:72px;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-4);margin-top:var(--s-8)}
.vi-pes i{display:block;height:calc(var(--p)*1.8px);background:var(--borde);border-radius:4px;transform-origin:bottom}
.on .vi-pes i{background:var(--acento)}
.vi-pes span{font-size:var(--t-12);font-variant-numeric:tabular-nums;color:var(--texto-2)}
.on .vi-pes span{color:var(--texto);font-weight:var(--bold)}
.is-playing .vi-ec{animation:vi-ec var(--dur-entrada) var(--mov-entrada) both;animation-delay:calc(var(--i)*520ms)}
.is-playing .vi-pes i{animation:vi-barra 800ms var(--mov-estado) both;animation-delay:calc(var(--i)*520ms + 250ms)}
@keyframes vi-ec{from{opacity:.25}to{opacity:1}}
@keyframes vi-barra{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (max-width:760px){
  .vi-stage{--alto:0px;padding-bottom:72px}
  .vi-esp{grid-template-columns:minmax(0,1fr);gap:var(--s-16)}
  .vi-ec{display:grid;grid-template-columns:96px minmax(0,1fr) 56px;grid-template-areas:"th eh pes" "th p pes";column-gap:var(--s-12);row-gap:2px;align-items:center}
  .vi-th{grid-area:th}.vi-eh{grid-area:eh;margin:0;align-self:end}.vi-ec p{grid-area:p;align-self:start}
  .vi-pes{grid-area:pes;height:56px;margin:0}.vi-pes i{height:calc(var(--p)*1.4px)}
}
.vi-pie{margin:var(--s-16) 0 0;font-size:var(--t-15);color:var(--texto-2);max-width:46em}

/* ---- movimientos: cinco columnas (tres o una cuando falta ancho) ---- */
.vi-movw{container-type:inline-size}
.vi-movs{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-32) var(--s-16)}
@container (min-width:560px){.vi-movs{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-32) var(--s-24)}}
@container (min-width:900px){.vi-movs{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-16)}}
@container (min-width:560px){.vi-mt{min-height:4.05em}}
.vi-mv{display:flex;flex-direction:column;min-width:0;border-top:var(--borde-encendido) solid var(--texto);padding-top:var(--s-16)}
.vi-mv.on{border-top-color:var(--acento)}
.vi-mf{margin:0 0 var(--s-12)}
.vi-mf img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-captura);border:var(--borde-ancho) solid var(--borde);cursor:zoom-in;background:var(--blanco)}
.vi-mh{display:flex;gap:var(--s-8);align-items:center}
.vi-mh h3{font-size:var(--t-19);letter-spacing:var(--trk-19);line-height:1.2}
.vi-mt{margin:var(--s-8) 0 0;font-size:var(--t-15);line-height:1.35;color:var(--texto-2)}
.vi-k{margin:var(--s-16) 0 var(--s-4);font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);font-weight:var(--bold)}
.vi-vz{margin:0;padding:var(--s-4) 0 var(--s-4) var(--s-12);font-size:var(--t-15);line-height:1.4;color:var(--texto)}
.vi-no{position:relative;margin:0;padding-left:24px;font-size:var(--t-15);line-height:1.4;color:var(--texto-2)}
.vi-no::before{content:"";position:absolute;left:0;top:.2em;width:14px;height:14px;background:var(--texto-2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat}
/* en celular: el cuadro va chico junto al nombre y lo demás debajo */
@container (max-width:559px){
  .vi-mv{display:grid;grid-template-columns:124px minmax(0,1fr);column-gap:var(--s-16);align-items:start}
  .vi-mf{grid-column:1;grid-row:1/3;margin:0}
  .vi-mh{grid-column:2;grid-row:1}.vi-mt{grid-column:2;grid-row:2;margin-top:0}
  .vi-k,.vi-vz,.vi-no{grid-column:1/-1}
}
/* detalle: cada movimiento con su qué hace, sus ilustraciones y todos sus cuadros */
.vi-md{padding:var(--s-24) 0;border-top:var(--borde-ancho) solid var(--borde)}
.vi-md:first-child{padding-top:0;border-top:0}
.vi-md .vi-mh h3{font-size:var(--t-24);letter-spacing:var(--trk-24)}
.vi-md .vi-n{width:32px;height:32px}
.vi-hace{margin:var(--s-8) 0 0;color:var(--texto-2);max-width:46em}
.vi-sub{margin:var(--s-24) 0 var(--s-8);font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);font-weight:var(--bold)}
.vi-sub:first-child{margin-top:0}
.vi-ilus{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,290px));gap:var(--s-16)}
.vi-ilus .shot{aspect-ratio:3/2;object-fit:contain;background:var(--blanco)}
.vi-ilus .fig figcaption,.tira figcaption{font-size:var(--t-12);line-height:1.35}
.tira{--fw:200px}
.tira.chica{--fw:150px}
.tira figcaption b{display:block;color:var(--texto);font-weight:var(--bold);font-size:var(--t-12)}
.tira img{cursor:zoom-in}

/* ---- fotogramas armados en HTML (lienzo de 1920 × 1080 o de 1080 × 1920; cada número es un píxel del lienzo) ---- */
.vi-fr{position:relative;container-type:inline-size;aspect-ratio:16/9;width:100%;border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-captura);overflow:hidden;font-family:var(--fuente)}
.vi-fr.v{aspect-ratio:9/16}
.vi-in{position:absolute;inset:0;--u:calc(100cqw/1920);--sub:58;--tt:80}
.vi-fr.v .vi-in{--u:calc(100cqw/1080);--sub:80}
.vi-fr .a{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u))}
.vi-fr .aw{width:calc(var(--w)*var(--u))}
.vi-fr .e{font-size:calc(30*var(--u));font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);line-height:1.2;white-space:nowrap}
.vi-fr .t{font-size:calc(var(--sz,80)*var(--u));font-weight:var(--bold);line-height:var(--lh-titular);letter-spacing:-.04em;color:var(--texto);margin:0}
.vi-fr .t em{font-style:normal;color:var(--acento-texto)}
.vi-fr .t .g{color:var(--texto-3)}
.vi-fr .c{font-size:calc(var(--sz,160)*var(--u));font-weight:var(--bold);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--texto)}
.vi-fr .c.az{color:var(--acento-texto)}
.vi-fr .p{font-size:calc(var(--sz,42)*var(--u));line-height:1.3;color:var(--texto-2);margin:0}
.vi-fr .s{display:inline-block;background:color-mix(in srgb,var(--papel) 90%,transparent);color:var(--tinta);border-radius:calc(24*var(--u));padding:calc(16*var(--u)) calc(40*var(--u));font-size:calc(var(--sub)*var(--u));line-height:1.15;font-weight:var(--bold);text-align:center;letter-spacing:-.01em}
.vi-fr .s em{font-style:normal;color:var(--encendido)}
.vi-fr .chp{display:inline-block;font-size:calc(30*var(--u));font-weight:var(--bold);padding:calc(14*var(--u)) calc(32*var(--u));background:var(--papel);border:calc(2*var(--u)) solid var(--linea);color:var(--tinta);white-space:nowrap}
.vi-fr .bt{display:inline-flex;align-items:center;height:calc(96*var(--u));padding:0 calc(56*var(--u));border-radius:var(--r-pill);background:var(--acento);border:calc(3*var(--u)) solid var(--acento);color:var(--sobre-acento);font-size:calc(42*var(--u));font-weight:var(--bold);white-space:nowrap}
.vi-fr .bt.g{background:transparent;border-color:var(--texto);color:var(--texto)}
.vi-fr img.a{display:block}
.vi-fr .lg{display:block;height:auto}
/* interruptor: cápsula de ancho w (unidades de lienzo); k = altura de la perilla */
.vi-fr .sw3{--W:calc(var(--w)*var(--u));position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:var(--W);height:calc(var(--W)*3.076);border-radius:calc(var(--W)/2);background:var(--apagado)}
.vi-fr .sw3::after{content:"";position:absolute;left:calc(var(--W)*.0445);top:calc(var(--W)*2.1205);width:calc(var(--W)*.911);height:calc(var(--W)*.911);border-radius:50%;background:var(--fondo)}
.vi-fr .sw3.on{background:var(--acento)}.vi-fr .sw3.on::after{top:calc(var(--W)*.0445)}
/* teléfono */
.vi-fr .tel{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));border:calc(10*var(--u)) solid var(--telefono-marco);border-radius:calc(60*var(--u));background:var(--telefono-pantalla);overflow:hidden;padding:calc(34*var(--u)) calc(26*var(--u))}
.vi-fr .tel .nm{display:flex;justify-content:space-between;align-items:baseline;font-size:calc(34*var(--u));font-weight:var(--bold);color:var(--tinta);margin-bottom:calc(26*var(--u))}
.vi-fr .tel .nm small{font-size:calc(20*var(--u));letter-spacing:var(--trk-eyebrow);color:var(--pizarra)}
.vi-fr .tel .bb{background:var(--blanco);border:calc(2*var(--u)) solid var(--linea);border-radius:calc(28*var(--u));padding:calc(20*var(--u)) calc(24*var(--u));font-size:calc(28*var(--u));line-height:1.3;color:var(--tinta)}
.vi-fr .tel .cp{display:inline-block;margin-top:calc(18*var(--u));font-size:calc(22*var(--u));font-weight:var(--bold);padding:calc(8*var(--u)) calc(22*var(--u));border-radius:var(--r-pill);border:calc(2*var(--u)) solid var(--tinta);color:var(--tinta)}
/* diagrama de cuatro pasos */
.vi-fr .nd{position:absolute;top:calc(var(--y)*var(--u));left:calc(var(--x)*var(--u));width:calc(300*var(--u));height:calc(260*var(--u));border:calc(3*var(--u)) solid var(--apagado);border-radius:calc(32*var(--u));display:flex;align-items:center;justify-content:center;text-align:center;padding:0 calc(24*var(--u));font-size:calc(40*var(--u));line-height:1.15;font-weight:var(--bold);color:var(--pizarra)}
.vi-fr .nd.on{background:var(--encendido-suave);border:calc(5*var(--u)) solid var(--encendido);color:var(--tinta)}
.vi-fr .ln{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(4*var(--u));background:var(--apagado)}
.dont .vi-fr{border-color:var(--texto-3)}
.vi-fc{margin:0;min-width:0}
.vi-fc figcaption{font-size:var(--t-12);line-height:1.35;color:var(--texto-2);margin-top:var(--s-8)}
.vi-fc figcaption b{display:block;color:var(--texto);font-size:var(--t-15)}

/* ---- ocho modos ---- */
.vi-modos{gap:var(--s-24) var(--s-16)}
.vi-modos figcaption{font-size:var(--t-15)}
.vi-modos figcaption b{display:block}
.vi-modos figcaption span{font-size:var(--t-12);color:var(--texto-2);display:block;margin-top:2px;line-height:1.35}

/* ---- formatos ---- */
.vi-ley{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-16);margin:0 0 var(--s-12);font-size:var(--t-12);color:var(--texto-2)}
.vi-ley b{color:var(--texto);font-variant-numeric:tabular-nums}
.vi-ley .on b{color:var(--acento-texto)}
.vi-fmts{display:grid;gap:var(--s-16)}
.vi-fmt{display:grid;grid-template-columns:190px minmax(0,1fr);gap:var(--s-24);align-items:center}
@media (max-width:760px){.vi-fmt{grid-template-columns:minmax(0,1fr);gap:var(--s-8)}}
.vi-fmt h3{font-size:var(--t-19);letter-spacing:var(--trk-19)}
.vi-fmt .d{display:block;font-size:var(--t-15);color:var(--texto-2);margin-top:2px}
.vi-bar{display:flex;gap:4px;height:60px}
.vi-seg{flex:var(--p) 1 0;min-width:0;border:var(--borde-ancho) solid var(--borde);background:var(--superficie);border-radius:var(--r-campo);display:flex;flex-direction:column;justify-content:center;padding:0 var(--s-8);font-size:var(--t-12);line-height:1.25;color:var(--texto-2);overflow:hidden;font-variant-numeric:tabular-nums;transform-origin:left}
.vi-seg b{color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vi-seg.on{background:var(--acento-suave);border:var(--borde-encendido) solid var(--acento)}
.vi-seg.on b{color:var(--texto)}
.vi-seg.no{flex:0 0 28px;background:transparent;border:var(--borde-encendido) dashed var(--texto-3);align-items:center;padding:0}
.is-lit .vi-seg{animation:vi-seg 600ms var(--mov-entrada) both;animation-delay:calc(var(--i)*70ms)}
@keyframes vi-seg{from{opacity:0;transform:scaleX(.4)}to{opacity:1;transform:none}}
.vi-fp{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-32);align-items:start}
@media (max-width:900px){.vi-fp{grid-template-columns:minmax(0,1fr)}}
.vi-reg{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-16)}
.vi-reg li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s-12);font-size:var(--t-17)}
.vi-reg li>b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:var(--r-pill);border:var(--borde-ancho) solid var(--borde);font-size:var(--t-12);color:var(--texto-2);margin-top:3px}
.vi-reg li.mas>b{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.vi-reg p{margin:0}

/* ---- ritmo medido ---- */
.vi-rit{display:grid;gap:0}
.vi-rh,.vi-rr{display:grid;grid-template-columns:minmax(140px,230px) minmax(0,1fr) 96px;gap:var(--s-16);align-items:center}
.vi-rh{padding-bottom:var(--s-8);border-bottom:var(--borde-ancho) solid var(--texto);font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);font-weight:var(--bold)}
.vi-rh span:last-child,.vi-x{text-align:right}
.vi-rr{padding:var(--s-12) 0;border-bottom:var(--borde-ancho) solid var(--borde)}
.vi-rr.g{margin-top:var(--s-12);border-top:var(--borde-ancho) solid var(--borde)}
.vi-nm b{display:block;font-size:var(--t-15)}
.vi-nm span{display:block;font-size:var(--t-12);color:var(--texto-2)}
.vi-bs{display:grid;gap:4px}
.vi-b{display:flex;align-items:center;gap:var(--s-8);height:20px}
.vi-b i{display:block;height:100%;width:calc((100% - 52px)*var(--v)/50);min-width:2px;background:var(--acento);border-radius:4px;transform-origin:left}
.vi-b.cu i{background:var(--apagado)}
.vi-b.nu i{background:var(--texto)}
.vi-b em{font-style:normal;font-size:var(--t-12);font-variant-numeric:tabular-nums;color:var(--texto);min-width:44px}
.vi-x{font-size:var(--t-15);font-variant-numeric:tabular-nums;color:var(--texto)}
.vi-x small{display:block;font-size:var(--t-12);color:var(--texto-2)}
.is-lit .vi-b i{animation:vi-grow 800ms var(--mov-estado) both;animation-delay:calc(var(--i)*60ms)}
@keyframes vi-grow{from{transform:scaleX(0)}to{transform:none}}
@media (max-width:760px){.vi-rh{display:none}.vi-rr{grid-template-columns:minmax(0,1fr) 72px;row-gap:var(--s-8)}.vi-rr .vi-nm{grid-column:1/-1}}
.vi-leyb{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-24);margin:var(--s-16) 0 0;font-size:var(--t-12);color:var(--texto-2)}
.vi-leyb span{display:inline-flex;align-items:center;gap:var(--s-8)}
.vi-leyb i{display:inline-block;width:14px;height:10px;border-radius:3px;background:var(--acento)}
.vi-leyb .cu i{background:var(--apagado)}.vi-leyb .nu i{background:var(--texto)}
.vi-lect{list-style:none;margin:var(--s-32) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-32)}
@media (max-width:900px){.vi-lect{grid-template-columns:minmax(0,1fr);gap:var(--s-16)}}
.vi-lect li{border-top:var(--borde-encendido) solid var(--texto);padding-top:var(--s-12)}
.vi-lect b{display:block;font-size:var(--t-19);letter-spacing:var(--trk-19);line-height:1.25;margin-bottom:var(--s-4)}
.vi-lect span{font-size:var(--t-15);color:var(--texto-2)}
.vi-prop{margin-top:var(--s-48)}
.vi-prop-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-32);margin-top:var(--s-24)}
.vi-prop-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vi-prop-g.vi-prop-g3 .big-num small{display:block;margin-top:var(--s-4);font-size:var(--t-19);letter-spacing:var(--trk-19)}
@media (max-width:900px){.vi-prop-g3{grid-template-columns:minmax(0,1fr);gap:var(--s-24)}}
@media (max-width:700px){.vi-prop-g{grid-template-columns:minmax(0,1fr);gap:var(--s-24)}}
.vi-prop-g .big-num small{font-size:var(--t-24);letter-spacing:var(--trk-24);font-weight:var(--regular);color:var(--texto-2)}
.vi-prop-g .big-num.az{color:var(--acento-texto)}
.vi-prop-g p{margin:var(--s-8) 0 0;color:var(--texto-2);font-size:var(--t-17);max-width:30em}
.vi-prop-g b.k{display:block;font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);margin-bottom:var(--s-8)}

/* ---- demos ---- */
.vi-demos{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:var(--s-32);align-items:start}
@media (max-width:900px){.vi-demos{grid-template-columns:minmax(0,1fr)}.vi-d9{max-width:250px}}
.vi-demos video.player{aspect-ratio:var(--ar)}
.vi-demos .fig figcaption{font-size:var(--t-15)}
.vi-caps{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-top:var(--s-12)}
.vi-cap{font:inherit;font-size:var(--t-15);display:inline-flex;gap:var(--s-8);align-items:baseline;border:var(--borde-ancho) solid var(--borde);background:transparent;color:var(--texto-2);border-radius:var(--r-pill);padding:6px 14px;cursor:pointer;transition:background var(--dur-micro) var(--mov-micro),border-color var(--dur-micro) var(--mov-micro),color var(--dur-micro) var(--mov-micro)}
.vi-cap:hover{border-color:var(--texto-2);color:var(--texto)}
.vi-cap em{font-style:normal;font-size:var(--t-12);font-variant-numeric:tabular-nums}
.vi-cap[aria-current="true"]{border-color:var(--acento);background:var(--acento-suave);color:var(--texto)}
.vi-reel{margin-top:var(--s-32)}
.vi-d9 .vi-sg{padding:0 4px}

/* línea de tiempo de cada demo */
.vi-tl{position:relative;display:flex;gap:3px;height:54px;margin-top:var(--s-12)}
.vi-sg{flex:var(--d) 1 0;min-width:0;font:inherit;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;padding:0 var(--s-8);border:var(--borde-ancho) solid var(--borde);background:var(--superficie);border-radius:var(--r-campo);color:var(--texto-2);text-align:left;cursor:pointer;overflow:hidden;transition:background var(--dur-micro) var(--mov-micro),border-color var(--dur-micro) var(--mov-micro)}
.vi-sg:hover{border-color:var(--texto-2)}
.vi-sg b{font-size:var(--t-12);color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.vi-sg em{font-style:normal;font-size:var(--t-12);font-variant-numeric:tabular-nums}
.vi-sg[aria-current="true"]{background:var(--acento-suave);border:var(--borde-encendido) solid var(--acento)}
.vi-ph{position:absolute;left:-1px;top:-5px;bottom:-5px;width:2px;background:var(--texto);border-radius:2px;pointer-events:none;opacity:0}
.vi-clic{position:absolute;bottom:6px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--acento);pointer-events:none}

/* ---- cómo se habla ---- */
.vi-voz{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-48);align-items:start}
@media (max-width:900px){.vi-voz{grid-template-columns:minmax(0,1fr);gap:var(--s-32)}}
.vi-loc{margin-top:var(--s-8)}
.vi-lf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-16);padding:var(--s-12) 0;border-top:var(--borde-ancho) solid var(--borde);align-items:baseline}
.vi-lf:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
.vi-lf b{font-size:var(--t-19);letter-spacing:var(--trk-19);line-height:1.25}
.vi-lf span{font-size:var(--t-12);color:var(--texto-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.vi-vo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-24);margin:var(--s-32) 0}
@media (max-width:900px){.vi-vo{grid-template-columns:minmax(0,1fr)}}
.vi-vo>div{border-top:var(--borde-encendido) solid var(--texto);padding-top:var(--s-12)}
.vi-vo h3{font-size:var(--t-19);letter-spacing:var(--trk-19);margin:var(--s-4) 0}
.vi-vo p{margin:0;font-size:var(--t-15);color:var(--texto-2)}
.vi-vo .k{display:block;font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;font-weight:var(--bold);color:var(--texto-2)}
.vi-pv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-16) var(--s-32);padding:var(--s-12) 0;border-top:var(--borde-ancho) solid var(--borde);font-size:var(--t-15)}
.vi-pv:first-child{border-top:var(--borde-ancho) solid var(--texto)}
.vi-pv>div{display:flex;gap:var(--s-8)}
.vi-pv .x{color:var(--texto-2)}
.vi-pv.h{font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);font-weight:var(--bold)}
@media (max-width:700px){.vi-pv{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}.vi-pv.h{display:none}}
.vi-ic{flex:none;width:16px;height:16px;margin-top:4px;background:var(--texto);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.vi-ic.x{background:var(--texto-2);--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}

/* ---- lista de control ---- */
.vi-prog{display:flex;align-items:center;gap:var(--s-16);flex-wrap:wrap;padding:var(--s-16) var(--s-24);background:var(--superficie);border-radius:var(--r-tarjeta);margin-bottom:var(--s-16)}
.vi-prog .sw{width:14px;height:26px;border-width:2px}
.vi-prog .sw b{left:2px;right:2px;bottom:2px;height:8px}
.vi-prog.ok .sw{border-color:var(--acento)}.vi-prog.ok .sw b{background:var(--acento);transform:translateY(-10px)}
.vi-prog strong{font-size:var(--t-19);letter-spacing:var(--trk-19);font-variant-numeric:tabular-nums;min-width:5.5em}
.vi-meter{flex:1;min-width:120px;height:6px;background:var(--borde);border-radius:var(--r-pill);overflow:hidden}
.vi-meter i{display:block;height:100%;width:0;background:var(--acento);border-radius:var(--r-pill);transition:width var(--dur-estado) var(--mov-estado)}
.vi-msg{margin:0;font-size:var(--t-15);color:var(--texto-2);flex-basis:100%}
.vi-prog.ok .vi-msg{color:var(--texto);font-weight:var(--bold)}
.vi-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:var(--s-48)}
.vi-q{border-top:var(--borde-ancho) solid var(--borde)}
.vi-q:nth-child(5),.vi-q:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
@media (max-width:900px){.vi-lista{display:block}.vi-q:nth-child(5){border-bottom:0}}
.vi-q label{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s-16);align-items:start;padding:var(--s-12) 0;cursor:pointer}
.vi-q input{appearance:none;-webkit-appearance:none;width:28px;height:28px;margin:0;border:var(--borde-encendido) solid var(--borde-control);border-radius:var(--r-pill);background:var(--elevado);cursor:pointer;position:relative;transition:background var(--dur-micro) var(--mov-micro),border-color var(--dur-micro) var(--mov-micro)}
.vi-q input::after{content:"";position:absolute;inset:0;background:var(--sobre-acento);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center/16px no-repeat;opacity:0;transition:opacity var(--dur-micro) var(--mov-micro)}
.vi-q input:checked{background:var(--acento);border-color:var(--acento)}
.vi-q input:checked::after{opacity:1}
.vi-q input:focus-visible{outline:var(--foco-ancho) solid var(--acento);outline-offset:2px}
.vi-q b{display:block;font-size:var(--t-17);letter-spacing:var(--trk-17);line-height:1.3}
.vi-q b .n{color:var(--texto-2);font-weight:var(--regular);font-variant-numeric:tabular-nums;margin-right:var(--s-8)}
.vi-q span.h{display:block;font-size:var(--t-15);color:var(--texto-2);margin-top:2px}
.vi-q input:checked~span b{color:var(--texto-2)}

/* ---- lo que no se hace ---- */
.vi-nos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-32) var(--s-24);align-items:start}
.vi-nos .pair{grid-template-columns:minmax(0,1fr);gap:var(--s-16)}
.vi-nos .do>p{min-height:3.1em}
@media (max-width:900px){.vi-nos{grid-template-columns:minmax(0,1fr)}.vi-nos .pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.vi-nos .pair{grid-template-columns:minmax(0,1fr)}}
.vi-pg details.mas .vi-nos{padding-top:0}
.vi-snd{display:block;width:100%;height:100%;background:var(--superficie)}
.vi-sndw{position:relative;width:100%;aspect-ratio:16/9;border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-captura);overflow:hidden;background:var(--superficie)}
.dont .vi-sndw{border-color:var(--texto-3)}
.vi-pair-t{margin:0 0 var(--s-16);font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);font-weight:var(--bold)}

/* ---- siguiente ---- */
.vi-sig a.card h3{display:flex;justify-content:space-between;align-items:center;gap:var(--s-8)}
.vi-sig a.card h3::after{content:"→";font-weight:var(--regular);color:var(--texto-2)}

/* ---- storyboards por formato y utilidades de fotograma ---- */
.vi-sb{display:grid;gap:var(--s-16) var(--s-12);grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));align-items:start}
@media (max-width:760px){.vi-sb{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vi-sb figure{margin:0;min-width:0}
.vi-sb figcaption{font-size:var(--t-12);line-height:1.35;color:var(--texto-2);margin-top:var(--s-8)}
.vi-sb figcaption b{display:block;color:var(--texto);font-size:var(--t-12);font-weight:var(--bold)}
.vi-sb img{width:100%;height:auto;border-radius:var(--r-captura);border:var(--borde-ancho) solid var(--borde);cursor:zoom-in;background:var(--blanco)}
.vi-fr .ctr{text-align:center}
.vi-fr .stk{-webkit-text-stroke:calc(6*var(--u)) var(--tinta);paint-order:stroke fill;color:var(--blanco)}
.vi-fr .flecha{font-size:calc(420*var(--u));font-weight:var(--bold);line-height:1;color:var(--encendido)}

.vi-prop .vi-pie{margin-bottom:var(--s-32)}

.vi-reg4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-24)}
.vi-reg4 li{font-size:var(--t-15)}
@media (max-width:900px){.vi-reg4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.vi-reg4{grid-template-columns:minmax(0,1fr)}}

.vi-lect{margin-bottom:var(--s-32)}

/* tablas que en celular se apilan */
.vi-stack{min-width:640px}
@media (max-width:700px){
  .vi-stack{min-width:0}
  .vi-stack thead{display:none}
  .vi-stack tr{display:block;border-bottom:var(--borde-ancho) solid var(--borde);padding:var(--s-12) 0}
  .vi-stack td{display:block;border:0;padding:2px 0}
  .vi-stack td::before{content:attr(data-l);display:block;margin-top:var(--s-8);font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);font-weight:var(--bold)}
  .vi-stack td:first-child::before{display:none}
  .vi-modos{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- celular: barras con el número del movimiento y la línea de tiempo con números ---- */
.vi-leym{display:none}
@media (max-width:560px){
  .vi-fmts .vi-seg:not(.no) b{display:none}
  .vi-fmts .vi-seg[data-n]::before{content:attr(data-n);font-weight:var(--bold);color:var(--texto)}
  .vi-leym{display:flex;gap:var(--s-4) var(--s-12);margin:var(--s-12) 0 0}
  .vi-leym span{white-space:nowrap}
  .vi-fmts .vi-seg{white-space:nowrap;padding:0 var(--s-4)}
  .vi-sg b .t{display:none}
  .vi-gan .vi-bar{height:auto;flex-direction:column}
  .vi-gan .vi-seg{flex:none;padding:var(--s-8) var(--s-12)}
}