/* Video explicativo de Vencito (app/vistas/cliente/video.php). Todo lo propio lleva el prefijo vid-.
   Regla de las animaciones: el estilo base de cada pieza es su estado FINAL y las animaciones solo definen el "from".
   Así, con prefers-reduced-motion (app.css apaga toda animación) el dibujo queda completo y quieto. */

.vid{position:relative;border-radius:22px;overflow:hidden;background:#071735;box-shadow:0 30px 60px -34px rgba(11,33,72,.6);outline:none}
.vid-defs{position:absolute;width:0;height:0;overflow:hidden}
.vid-oculto{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Escenario ---------- */
.vid-escenario{position:relative;display:grid;aspect-ratio:16/9;container-type:inline-size;background:#132F63;overflow:hidden}
.vid-listo .vid-escenario{cursor:pointer}
.vid-escenas,.vid-poster{grid-area:1/1;min-width:0;min-height:0}
.vid-escenas{display:grid}
.vid-escena{grid-area:1/1;display:grid;grid-template-columns:38fr 62fr;min-width:0;min-height:0;color:var(--marino,#0B2148);
  opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
.vid-escena.activa{opacity:1;visibility:visible;transition:opacity .55s ease,visibility 0s linear 0s}
.vid-texto{align-self:center;min-width:0;padding:32px 8px 32px 40px;padding:3cqw 1cqw 3cqw 4.6cqw}
.vid-arte{position:relative;min-width:0;min-height:0}
.vid-arte>svg{position:absolute;top:0;left:0;width:100%;height:100%;display:block;overflow:visible}
.vid-arte text{font-family:var(--texto,system-ui,sans-serif)}
.vid-arte .vid-t{font-family:var(--titular,"Arial Black",system-ui,sans-serif)}
.vid-arte .vid-cjk{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Heiti SC",sans-serif}

.vid .vid-paso{display:inline-block;margin:0 0 14px;margin:0 0 1.3cqw;padding:.42em 1em;border-radius:999px;background:var(--rojo,#E63B2E);color:#fff;
  font-family:var(--texto);font-weight:800;line-height:1.2;font-size:14px;font-size:clamp(12px,1.3cqw,17px)}
.vid .vid-titulo{margin:0 0 14px;margin:0 0 1.3cqw;font-family:var(--titular);font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:1;
  font-size:36px;font-size:clamp(23px,3.8cqw,50px);text-wrap:balance}
.vid .vid-leyenda{margin:0;font-weight:600;line-height:1.46;font-size:19px;font-size:clamp(15px,1.85cqw,24px);text-wrap:pretty}

/* Fondo propio de cada escena */
.vid-e1{background:linear-gradient(150deg,#FFF9EC 0%,#F8E2BD 100%)}
.vid-e2{background:linear-gradient(150deg,#EEF4FF 0%,#CADBFB 100%)}
.vid-e3{background:linear-gradient(150deg,#FFF3EE 0%,#F8D6CE 100%)}
.vid-e4{background:linear-gradient(150deg,#EBF8F5 0%,#C3E9E3 100%)}
.vid-e5{background:linear-gradient(150deg,#F1F2FF 0%,#D2D8F8 100%)}
.vid-e6{background:linear-gradient(150deg,#FCF5E3 0%,#EFDAAB 100%)}
.vid-e7{background:linear-gradient(150deg,#17376F 0%,#071735 100%);color:#fff}
.vid-e8{background:linear-gradient(150deg,#FFF9E6 0%,#F9E4A6 100%)}
.vid-e9{background:linear-gradient(150deg,#E9F5FF 0%,#C9EAD2 100%)}
.vid-e10{background:radial-gradient(120% 120% at 78% 40%,#1C4184 0%,#0B2148 48%,#071735 100%);color:#fff;grid-template-columns:47fr 53fr}
.vid-e7 .vid-leyenda,.vid-e10 .vid-leyenda{color:#DDE6F8}
.vid .vid-e10 .vid-titulo{font-size:30px;font-size:clamp(21px,3.1cqw,41px);line-height:1.06}
.vid-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;margin-top:2cqw}
.vid-acciones .btn{font-size:15px;font-size:clamp(13.5px,1.42cqw,18.5px);padding:.72em 1.3em}
.vid-e10 .btn.sec{border-color:#fff}

/* ---------- Carátula ---------- */
.vid-poster{position:relative;z-index:3;display:grid;grid-template-columns:54fr 46fr;color:#fff;
  background:radial-gradient(120% 120% at 80% 42%,#1C4184 0%,#0B2148 46%,#071735 100%);transition:opacity .5s ease,visibility 0s linear .5s}
.vid-iniciado .vid-poster{opacity:0;visibility:hidden;pointer-events:none}
.vid-poster-t{align-self:center;min-width:0;padding:32px 8px 32px 40px;padding:3cqw 0 3cqw 5cqw}
.vid .vid-poster h2{margin:0;color:#fff;font-family:var(--titular);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.98;
  font-size:40px;font-size:clamp(26px,4.5cqw,60px);text-wrap:balance}
.vid-poster p{margin:16px 0 0;margin:1.5cqw 0 0;color:#C9D6F2;font-weight:600;font-size:17px;font-size:clamp(14.5px,1.65cqw,21px)}
.vid-poster .vid-nojs{font-size:14px;color:#fff}
.vid-jugar{display:none;align-items:center;gap:16px;margin-top:26px;margin-top:2.6cqw;padding:0;border:0;background:none;color:#fff;cursor:pointer;
  font-family:var(--texto);font-weight:800;font-size:18px;font-size:clamp(15px,1.7cqw,22px)}
.vid-listo .vid-jugar{display:inline-flex}
.vid-jugar-c{position:relative;display:grid;place-items:center;flex:none;width:84px;height:84px;width:clamp(64px,7.6cqw,98px);height:clamp(64px,7.6cqw,98px);border-radius:50%;
  background:var(--rojo,#E63B2E);box-shadow:0 14px 30px -10px rgba(230,59,46,.75);transition:transform .2s ease,background .2s ease}
.vid-jugar-c svg{width:46%;height:46%;margin-left:6%}
.vid-jugar-c::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;border:2px solid rgba(255,255,255,.6);animation:vid-anillo 2.4s ease-out infinite;opacity:0}
.vid-iniciado .vid-jugar-c::after{animation:none}
.vid-jugar:hover .vid-jugar-c{transform:scale(1.06);background:var(--rojo-2,#C42D22)}
.vid-jugar:focus-visible{outline:none}
.vid-jugar:focus-visible .vid-jugar-c{outline:3px solid #7FB0FF;outline-offset:4px}
@keyframes vid-anillo{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}

/* ---------- Controles ---------- */
.vid-controles{background:#071735;color:#fff;padding:6px 16px 12px}
.vid:not(.vid-listo) .vid-controles{display:none}
.vid-segmentos{display:flex;gap:5px}
.vid-seg{flex:1;min-width:0;padding:9px 0;border:0;background:none;cursor:pointer;border-radius:4px}
.vid-seg span{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden;transition:background .2s ease}
.vid-seg:hover span{background:rgba(255,255,255,.38)}
.vid-seg i{display:block;height:100%;border-radius:3px;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.vid-seg.hecho i{transform:scaleX(1)}
.vid-seg.actual i{background:#FF7C70}
.vid-botones{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.vid-b{display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .2s ease}
.vid-b:hover{background:rgba(255,255,255,.22)}
.vid-b svg{width:22px;height:22px}
.vid-b.vid-b-p{width:48px;height:48px;background:#fff;color:#0B2148}
.vid-b.vid-b-p:hover{background:#DCE6FA}
.vid-b.vid-b-p svg{width:26px;height:26px}
.vid-i-pausa{display:none}
.vid-andando .vid-i-pausa{display:block}
.vid-andando .vid-i-play{display:none}
.vid-cuenta{margin-left:6px;font-weight:700;font-size:14px;color:#C9D6F2;font-variant-numeric:tabular-nums;white-space:nowrap}
.vid-voz{display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding:8px 15px 8px 11px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:none;color:#fff;
  font:inherit;font-weight:800;font-size:14px;line-height:1.2;cursor:pointer;transition:background .2s ease,color .2s ease}
.vid-voz[hidden]{display:none}
.vid-voz svg{width:22px;height:22px;flex:none}
.vid-voz-e{font-weight:600;opacity:.8}
.vid-voz-ondas{opacity:.3}
.vid-voz:hover{border-color:#fff}
.vid-voz[aria-pressed="true"]{background:#fff;border-color:#fff;color:#0B2148}
.vid-voz[aria-pressed="true"] .vid-voz-ondas{opacity:1}

/* ---------- El paso a paso escrito ---------- */
.vid-escrito{margin-top:22px}
.vid-escrito ol{list-style:none;margin:6px 0 16px;padding:0;counter-reset:vidpaso;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:4px 34px}
.vid-escrito li{counter-increment:vidpaso;position:relative;padding:14px 0 12px 50px;border-top:1px solid var(--linea,#DDD5C5)}
.vid-escrito li::before{content:counter(vidpaso);position:absolute;left:0;top:13px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--marino,#0B2148);color:#fff;font-family:var(--titular);font-weight:800;font-size:16px}
.vid-escrito li h3{margin:0 0 3px}
.vid-escrito li p{margin:0;color:var(--gris,#5B6472)}
.vid-escrito-e{margin:0;max-width:70ch;font-weight:600}

/* ---------- Animaciones (solo corren en la escena activa) ---------- */
.vid-pausa .vid-escena *,.vid-pausa .vid-escena *::after{animation-play-state:paused!important}

.vid-escena.activa .vid-paso{animation:vid-sube .5s ease-out .05s backwards}
.vid-escena.activa .vid-titulo{animation:vid-sube .55s ease-out .16s backwards}
.vid-escena.activa .vid-leyenda{animation:vid-sube .55s ease-out .3s backwards}
.vid-escena.activa .vid-acciones{animation:vid-sube .55s ease-out .9s backwards}
@keyframes vid-sube{from{opacity:0;transform:translateY(20px)}}

.vid-escena.activa .vid-a-sube{animation:vid-sube .7s cubic-bezier(.2,.8,.2,1) var(--d,0s) backwards}
.vid-escena.activa .vid-a-aparece{animation:vid-aparece .5s ease-out var(--d,0s) backwards}
@keyframes vid-aparece{from{opacity:0}}
.vid-escena.activa .vid-a-pop{animation:vid-pop .6s cubic-bezier(.34,1.56,.64,1) var(--d,0s) backwards}
@keyframes vid-pop{from{opacity:0;transform:scale(.3)}}
/* como "pop", pero para piezas con coordenadas absolutas: no se escala, solo cae un poco */
.vid-escena.activa .vid-a-pop-s{animation:vid-pop-s .5s cubic-bezier(.34,1.56,.64,1) var(--d,0s) backwards}
@keyframes vid-pop-s{from{opacity:0;transform:translateY(-16px)}}
.vid-escena.activa .vid-a-cae{animation:vid-cae .8s cubic-bezier(.3,1.3,.5,1) var(--d,0s) backwards}
@keyframes vid-cae{from{opacity:0;transform:translateY(-70px)}}
.vid-escena.activa .vid-a-crece{animation:vid-crece .7s ease-out var(--d,0s) backwards}
@keyframes vid-crece{from{opacity:0;transform:scaleX(0)}}
.vid-escena.activa .vid-a-enciende{animation:vid-enciende .6s ease-out var(--d,0s) backwards}
@keyframes vid-enciende{from{opacity:.22}}

/* Vencito: se mece, parpadea y saluda */
.vid-escena.activa .vid-v-bob,.vid:not(.vid-iniciado) .vid-poster .vid-v-bob{animation:vid-bob 3.4s ease-in-out infinite}
@keyframes vid-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.vid-escena.activa .vid-v-ojos{animation:vid-parpadea 4.2s linear infinite}
@keyframes vid-parpadea{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.08)}}
.vid-escena.activa .vid-v-saluda{animation:vid-saluda 1.1s ease-in-out infinite}
@keyframes vid-saluda{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(14deg)}}
.vid-escena.activa .vid-v-saluda-d{animation-name:vid-saluda-d}
@keyframes vid-saluda-d{0%,100%{transform:rotate(9deg)}50%{transform:rotate(-14deg)}}

/* 1 · el avión recorre el arco China → Venezuela */
.vid-escena.activa .vid-a-avion{animation:vid-avion 6.5s linear .4s infinite backwards}
@keyframes vid-avion{
  0%{transform:translate(-184px,78px) rotate(-40deg);opacity:0}
  8%{opacity:1}
  25%{transform:translate(-97px,22px) rotate(-24deg)}
  50%{transform:translate(0,0) rotate(0deg)}
  75%{transform:translate(97px,22px) rotate(24deg)}
  92%{opacity:1}
  100%{transform:translate(184px,78px) rotate(40deg);opacity:0}}
/* 2 · el sobre viaja hacia el proveedor; el botón "Copiar" late */
.vid-escena.activa .vid-a-sobre{animation:vid-sobre 2.8s ease-in-out 3s infinite backwards}
@keyframes vid-sobre{0%{transform:translate(-62px,54px) scale(.6);opacity:0}18%{opacity:1}80%{opacity:1}100%{transform:translate(64px,6px) scale(.7);opacity:0}}
.vid-escena.activa .vid-a-pulso{animation:vid-pulso .5s ease-in-out 2.1s 1 backwards}
@keyframes vid-pulso{0%,100%{transform:scale(1)}50%{transform:scale(.88)}}
/* 4 · la caja entra al almacén; la campana suena */
.vid-escena.activa .vid-a-entra{animation:vid-entra 3s ease-in-out .5s both}
@keyframes vid-entra{0%{transform:translate(-104px,60px);opacity:0}14%{opacity:1}68%{transform:translate(0,0);opacity:1}100%{transform:translate(36px,-21px);opacity:0}}
.vid-escena.activa .vid-a-campana{animation:vid-campana .9s ease-in-out 4s 2 backwards}
@keyframes vid-campana{0%,100%{transform:rotate(0)}20%{transform:rotate(-16deg)}40%{transform:rotate(14deg)}60%{transform:rotate(-9deg)}80%{transform:rotate(6deg)}}
/* 5 · las cajas suben al contenedor por la cinta */
.vid-escena.activa .vid-a-cinta{animation:vid-cinta 3.6s linear var(--d,0s) infinite}
@keyframes vid-cinta{0%{transform:translate(46px,27px);opacity:0}10%{opacity:1}80%{transform:translate(-90px,-52px);opacity:1}100%{transform:translate(-124px,-72px);opacity:0}}
/* 7 · la barra de avance y el barquito */
.vid-escena.activa .vid-a-barra{animation:vid-barra 7.2s linear 1s backwards}
@keyframes vid-barra{from{transform:scaleX(0)}}
.vid-escena.activa .vid-a-nave{animation:vid-nave 7.2s linear 1s backwards}
@keyframes vid-nave{from{transform:translateX(-528px)}}
/* 8 · el borde dorado de la opción aconsejada y las rayas de velocidad */
.vid-escena.activa .vid-a-brilla{animation:vid-brilla 1.6s ease-in-out 3.2s infinite backwards}
@keyframes vid-brilla{0%,100%{opacity:1}50%{opacity:.25}}
.vid-escena.activa .vid-a-ligero{animation:vid-ligero .7s ease-in-out 4.6s infinite backwards}
@keyframes vid-ligero{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(-12px);opacity:.3}}
/* 9 · el camión llega a la casa */
.vid-escena.activa .vid-a-camion{animation:vid-camion 3.8s cubic-bezier(.45,0,.2,1) .5s backwards}
@keyframes vid-camion{from{transform:translate(-121px,-70px)}}

/* ---------- Pantallas angostas: el dibujo arriba y el texto debajo ---------- */
@media (max-width:760px){
  .vid{border-radius:18px}
  .vid-escenario{aspect-ratio:auto}
  .vid-escena,.vid-e10{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .vid-arte{order:-1;aspect-ratio:720/640}
  .vid-e10 .vid-arte{aspect-ratio:720/330}
  .vid-texto{align-self:start;padding:6px 18px 24px}
  .vid .vid-paso{margin-bottom:10px}
  .vid .vid-titulo{margin-bottom:10px}
  .vid-acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
  .vid .vid-acciones .btn{padding:11px 10px;font-size:13.5px;text-align:center}
  .vid-acciones .btn.rojo{grid-column:1/-1}
  .vid-acciones .btn.wa:nth-child(even):nth-last-child(3){grid-column:1/-1}
  .vid-poster{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .vid-poster .vid-arte{aspect-ratio:720/520}
  .vid-poster-t{align-self:center;padding:0 20px 28px}
  .vid-controles{padding:4px 12px 12px}
  .vid-b{width:40px;height:40px}
  .vid-voz{padding:8px 12px 8px 9px}
}
@media (max-width:380px){.vid-voz-e{display:none}}

/* ---------- Menos movimiento: sin bucles; las escenas pasan con un fundido ---------- */
@media (prefers-reduced-motion:reduce){
  .vid *,.vid *::after{animation:none!important}
  .vid .vid-escena{transition:opacity .4s linear,visibility 0s linear .4s!important}
  .vid .vid-escena.activa{transition:opacity .4s linear,visibility 0s linear 0s!important}
  .vid .vid-poster{transition:opacity .4s linear,visibility 0s linear .4s!important}
}

/* ---------- Modo grabación (?grabar=1): solo el escenario, a pantalla completa ---------- */
html.vid-grabando,html.vid-grabando body{overflow:hidden}
.vid.vid-grabar{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2147483000;border-radius:0;box-shadow:none}
.vid-grabar .vid-escenario{width:100vw;height:100vh;aspect-ratio:auto;cursor:default}
.vid-grabar .vid-botones{display:none}
.vid-grabar .vid-controles{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 2.4vw 1.4vh;background:none;pointer-events:none}
.vid-grabar .vid-seg span{height:5px;background:rgba(120,134,168,.34)}
.vid-grabar .vid-seg i,.vid-grabar .vid-seg.actual i{background:#E63B2E}
.vid-grabar:not(.vid-iniciado) .vid-controles,.vid.vid-grabar .vid-jugar{display:none}

@media print{.vid{display:none}}

/* ---------- Segundo video: cómo comprar en Alibaba (cliente/video_compra.php) ---------- */
/* El botón de la música va junto al de la voz. */
.vid-mus{margin-left:auto}
.vid-mus+.vid-voz{margin-left:0}
/* 2 · el buscador: una tapa del color del campo se corre a saltos, como si se escribiera. Su estado final es "ya corrida". */
.vid-a-escribe{transform:translateX(var(--w,300px));opacity:0}
.vid-escena.activa .vid-a-escribe{animation:vid-escribe 1.7s steps(18,end) var(--d,0s) backwards}
@keyframes vid-escribe{from{transform:translateX(0);opacity:1}99%{opacity:1}}
/* 2 · el cursor baja hasta un producto y hace clic */
.vid-escena.activa .vid-c-cursor{animation:vid-c-cursor 2.2s cubic-bezier(.4,0,.2,1) 3.6s backwards}
@keyframes vid-c-cursor{0%{transform:translate(150px,-150px);opacity:0}15%{opacity:1}70%{transform:translate(0,0)}80%{transform:translate(0,0) scale(.8)}90%{transform:translate(0,0) scale(1)}}
/* 5 · la dirección copiada vuela del teléfono al chat */
.vid-escena.activa .vid-c-vuela{animation:vid-c-vuela 2.6s ease-in-out 2.2s infinite backwards}
@keyframes vid-c-vuela{0%{transform:translate(-64px,44px) scale(.6);opacity:0}18%{opacity:1}80%{opacity:1}100%{transform:translate(70px,16px) scale(.75);opacity:0}}
/* 8 · el camión del proveedor llega al almacén */
.vid-escena.activa .vid-c-camion{animation:vid-c-camion 3.6s cubic-bezier(.45,0,.2,1) .6s backwards}
@keyframes vid-c-camion{from{transform:translate(-150px,-87px)}}
/* En el teléfono, las escenas de este video tienen más texto: la letra un poco menor. */
@media (max-width:760px){.vid-compra .vid-leyenda{font-size:15.5px}}