/* RealCut · web pública · el movimiento (16/10/2026).
   La pieza principal: el análisis en directo de la portada (anim.js lo mueve por etapas: .st-1 … .st-6).
   Fuera de eso, solo dos detalles al llegar a ellos: los 10 vídeos y las cifras para negociar. */
.an{position:relative;border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(180deg,rgba(20,27,44,.94),rgba(10,14,24,.96)) padding-box,linear-gradient(140deg,rgba(139,123,255,.9),rgba(47,140,255,.55) 40%,rgba(34,211,238,.9)) border-box;
  border:1px solid transparent;box-shadow:0 30px 80px -20px rgba(47,140,255,.45);font-variant-numeric:tabular-nums}
.an::after{content:"";position:absolute;inset:-1px;border-radius:24px;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(34,211,238,.10) 50%,transparent 60%);background-size:250% 100%;animation:barrido 4.5s linear infinite}
@keyframes barrido{from{background-position:120% 0}to{background-position:-120% 0}}
.an-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--text-3)}
.an-estado{display:inline-flex;align-items:center;gap:7px;color:var(--cyan)}
.an-estado i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;animation:pulse 1.4s infinite}
.an.st-6 .an-estado{color:var(--green)}.an.st-6 .an-estado i{animation:none}
.an-pasos{display:flex;gap:6px}
.an-pasos button{flex:1;border:0;border-radius:999px;padding:5px 0;font:700 11px "DM Sans",sans-serif;color:var(--text-3);background:rgba(255,255,255,.05);cursor:pointer;transition:background .3s,color .3s}
.an-pasos button.on{color:#fff;background:linear-gradient(100deg,rgba(139,123,255,.55),rgba(47,140,255,.55))}
.an-pasos button.hecho{color:#9fd0ff;background:rgba(47,140,255,.14)}
.an-pasos button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.an-file{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:14px;background:rgba(255,255,255,.04)}
.an-xls{display:grid;place-items:center;width:36px;height:40px;border-radius:8px;font:800 10px "Plus Jakarta Sans",sans-serif;color:#0b2a17;background:linear-gradient(160deg,#5ef0ad,#21a86b)}
.an-file-t{min-width:0}
.an-file-t b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-carga{display:block;height:5px;margin-top:6px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.an-carga i{display:block;height:100%;width:100%;border-radius:9px;background:linear-gradient(90deg,#2f8cff,#22d3ee)}
.an.st-1 .an-carga i{animation:carga .7s cubic-bezier(.4,0,.2,1) both}
@keyframes carga{from{width:0}to{width:100%}}
.an-ped{font-size:12px;color:var(--text-3);white-space:nowrap}.an-ped b{color:var(--text);font-size:14px}
.an-lista{padding:10px 12px 12px;border-radius:14px;background:rgba(255,255,255,.035)}
.an-lista-t{font-size:12px;font-weight:700;color:#9fd0ff;margin-bottom:8px;transition:color .4s}
.an:is(.st-4,.st-5,.st-6) .an-lista-t{color:var(--green)}
.an-filas{position:relative;height:138px}
.an-fila{position:absolute;left:0;right:0;height:42px;display:grid;grid-template-columns:minmax(0,1fr) 34% auto;gap:10px;align-items:center;
  font-size:12.5px;font-weight:700;top:calc(var(--pos, 0) * 48px);transition:top .5s cubic-bezier(.65,0,.35,1),opacity .4s,color .4s;opacity:.25}
.an-n{display:flex;align-items:center;gap:8px;min-width:0}.an-n span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-b{height:8px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden}
.an-b i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#5b4bff,#2f8cff);transition:width .5s cubic-bezier(.4,0,.2,1),background .35s}
.an-v{position:relative;min-width:64px;text-align:right}
.an-v span{transition:opacity .4s}.an-v .c{position:absolute;right:0;opacity:0;color:var(--green)}
.an:is(.st-3,.st-4,.st-5,.st-6) .an-fila{opacity:1}
.an.st-3 .an-b i{width:var(--wg)}
.an:is(.st-4,.st-5,.st-6) .an-b i{width:var(--wc);background:linear-gradient(90deg,#21a86b,#3ddc97)}
.an:is(.st-4,.st-5,.st-6) .an-v .g{opacity:0}.an:is(.st-4,.st-5,.st-6) .an-v .c{opacity:1}
.an:is(.st-4,.st-5,.st-6) .an-fila[data-c="0"]{color:var(--green)}
.an-diez{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;color:var(--text-3)}
.an-diez div{display:flex;gap:5px}
.an-diez i{width:14px;height:20px;border-radius:4px;background:rgba(255,255,255,.07);transition:background .3s,box-shadow .3s;transition-delay:calc(var(--n, 0) * 50ms)}
.an:is(.st-5,.st-6) .an-diez i.g{background:var(--green);box-shadow:0 0 10px rgba(61,220,151,.6)}
.an:is(.st-5,.st-6) .an-diez i.y{background:var(--yellow)}
.an:is(.st-5,.st-6) .an-diez i.n{background:#3a4253}
.an-total{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.12)}
.an-total small{display:block;font-size:12px;font-weight:700;color:var(--text-3)}
.an-total b{font:800 34px/1.05 "Plus Jakarta Sans",sans-serif;letter-spacing:-.03em}
.an-mas{font-size:12.5px;font-weight:800;color:var(--green);background:rgba(61,220,151,.12);border:1px solid rgba(61,220,151,.4);border-radius:999px;padding:6px 10px;white-space:nowrap;
  opacity:0;transform:translateY(6px) scale(.9);transition:opacity .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.an.st-6 .an-mas{opacity:1;transform:none}
@media (max-width:420px){.an{padding:14px}.an-total b{font-size:28px}.an-diez i{width:11px;height:17px}}

/* «De cada 10 vídeos» de la sección: se encienden uno a uno al llegar (anim.js quita .espera) */
.ten i{transition:background .35s,border-color .35s,box-shadow .35s;transition-delay:calc(var(--n, 0) * 110ms)}
.ten.espera i{background:rgba(255,255,255,.03)!important;border-color:rgba(255,255,255,.08)!important;box-shadow:none!important}
.ten.espera svg{stroke:#3a4253!important}

@media (prefers-reduced-motion:reduce){
  .an::after{animation:none}.an *{transition:none!important;animation:none!important}.ten i{transition:none}
}

/* móvil: más sitio para el nombre del producto; el estado no pisa la cuenta */
.an-top{gap:10px}.an-top > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.an-estado{flex:none}
@media (max-width:520px){
  .an-fila{grid-template-columns:minmax(0,1fr) 22% auto;gap:8px}
  .an .foto{width:32px;height:32px;border-radius:8px}
  .an-n span{white-space:normal;line-height:1.15;font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .an-top > span:first-child{display:none}.an-top{justify-content:flex-end}
}

/* ── «De cada 10 vídeos» con clips (fotogramas de ChatGPT). Todos en el mismo estilo quieto: la foto en gris
   oscuro y, encima, una capa de color: verde los que te pagan, naranja los que venden poco, gris los que no venden.
   Sin barras ni zoom (a Celia no le gustaba que «se recargara»). Al llegar se encienden uno a uno. ── */
.ten i{position:relative;aspect-ratio:3/4;overflow:hidden;display:block;border-width:2px;border-style:solid;--tinte:transparent}
.ten i::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(6,8,13,.5));pointer-events:none}
.ten i.g{--tinte:#3ddc97;border-color:rgba(61,220,151,.6)!important;box-shadow:0 0 16px rgba(61,220,151,.22)}
.ten i.y{--tinte:#ff9f43;border-color:rgba(255,159,67,.55)!important}
.ten .clip-play{position:absolute;z-index:2;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:rgba(6,8,13,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:.9}
.ten .clip-play svg{width:45%;height:45%;fill:#fff;stroke:none;margin-left:8%}
.ten .clip-barra{display:none}
.ten-l .y{background:#ff9f43!important}
/* antes de llegar: sin color; al llegar, la capa de color aparece uno a uno */
@media (max-width:420px){.ten{gap:6px}.ten i{border-radius:9px}}

/* ── Más movimiento (16/10/2026) ── */
/* 10 vídeos: la capa de color «respira» despacio (sin barras), y el play de los verdes late */
@keyframes respira{0%,100%{opacity:.62}50%{opacity:.95}}
.ten:not(.espera) i.g .clip-play{animation:late 2.4s ease-out infinite;animation-delay:calc(var(--n, 0) * -.6s)}
@keyframes late{0%{box-shadow:0 0 0 0 rgba(61,220,151,.55)}70%{box-shadow:0 0 0 12px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
/* GMV / comisiones: la columna de comisiones se reordena sola (anim.js pone .anima y la posición) */
.vs.anima .win ol{position:relative;display:block}
.vs.anima .win li{position:absolute;left:0;right:0;transition:top .6s cubic-bezier(.65,0,.35,1),background .4s,outline-color .4s}
.vs .win li:first-child{background:rgba(255,255,255,.04);outline:0}
.vs .win li.top{background:rgba(61,220,151,.14);outline:1px solid rgba(61,220,151,.45)}
.vs > div:first-child li.top{background:rgba(47,140,255,.14);outline:1px solid rgba(47,140,255,.4)}
/* los vídeos top: el fotograma detrás, con un zoom muy lento */
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:acerca 12s ease-in-out infinite alternate}
.reel:nth-child(2) img{animation-delay:-4s}.reel:nth-child(3) img{animation-delay:-8s}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,13,0) 35%,rgba(6,8,13,.85));pointer-events:none}
.reel > :not(img){position:relative;z-index:1}
.reel .play{position:absolute;z-index:1}
@keyframes acerca{from{transform:scale(1.02)}to{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.ten i::after,.ten .clip-play,.reel img{animation:none!important}.vs.anima .win li{transition:none}}

/* ── 10 vídeos (16/10/2026, versión final): al llegar se ven a COLOR NORMAL; luego una barra baja desde arriba y
   los va tiñendo de verde (te pagan), naranja (venden poco) o gris (no venden). Cada 10 s vuelve a empezar. ── */
.ten i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ten i.n{border-color:rgba(255,255,255,.12)!important}
.ten .clip-gris,.ten .clip-tinte{position:absolute;inset:0;pointer-events:none;clip-path:inset(0 0 100% 0)}
.ten .clip-gris{backdrop-filter:grayscale(1) brightness(.55) contrast(1.05);-webkit-backdrop-filter:grayscale(1) brightness(.55) contrast(1.05)}
.ten .clip-tinte{background:var(--tinte);mix-blend-mode:color;opacity:.9}
.ten i.n .clip-tinte{display:none}
.ten .clip-scan{position:absolute;left:0;right:0;top:-4px;height:3px;z-index:2;opacity:0;pointer-events:none;
  background:var(--tinte, #c3cad8);box-shadow:0 0 12px 2px var(--tinte, #c3cad8)}
.ten i.n .clip-scan{--tinte:#c3cad8}
.ten:not(.espera) .clip-gris,.ten:not(.espera) .clip-tinte{animation:tinie 10s linear infinite;animation-delay:calc(var(--n, 0) * 140ms)}
.ten:not(.espera) .clip-scan{animation:barre 10s linear infinite;animation-delay:calc(var(--n, 0) * 140ms)}
@keyframes tinie{0%,14%{clip-path:inset(0 0 100% 0);opacity:1}26%{clip-path:inset(0 0 0 0)}88%{clip-path:inset(0 0 0 0);opacity:1}97%,100%{clip-path:inset(0 0 0 0);opacity:0}}
.ten .clip-tinte{opacity:.9}
@keyframes barre{0%,13.9%{top:-4px;opacity:0}14%{top:-4px;opacity:1}26%{top:100%;opacity:1}27%,100%{top:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ten .clip-gris,.ten .clip-tinte{animation:none!important;clip-path:none}
  .ten .clip-scan{display:none}
}
/* 16/10/2026 (Celia): que no pasen por gris. Verdes y naranjas siguen con su color normal y la barra solo les da
   un baño de color; el gris oscuro queda únicamente para los que no venden. */
.ten i.g .clip-gris,.ten i.y .clip-gris{display:none}
.ten i.g .clip-tinte,.ten i.y .clip-tinte{mix-blend-mode:soft-light;opacity:1}
.ten i.g .clip-tinte{background:linear-gradient(180deg,rgba(61,220,151,.55),rgba(61,220,151,.85))}
.ten i.y .clip-tinte{background:linear-gradient(180deg,rgba(255,159,67,.55),rgba(255,159,67,.85))}
/* 17/10/2026: los 3 vídeos de la chica ya son vídeo de verdad (Seedance mini), en bucle y sin sonido */
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel > video{z-index:0}