/* OKV · motion graphics (portada de candidatos y /empleadores) · v6
   Explicativas: cada pieza [data-okv-motion] se reproduce una vez al entrar en pantalla (okv-motion.js le pone .en-marcha;
   a <html> le pone .okv-motion). Tres estados:
     · sin JavaScript      → todo dibujado y quieto (estado final, sin reglas de animación);
     · movimiento normal   → viaje completo (transform, opacity, clip-path, offset-distance);
     · reducir movimiento  → solo fundidos escalonados, sin desplazamientos (menos movimiento, no ninguno). */
:root {
    --okv-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --okv-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --okv-viaje: 1.8s;
    --okv-fundido: .45s;
}

/* =============================================================== ESTADO FINAL (sin JS) */

/* ---- Ruta (carretera con hitos) */
.okv-ruta { position: relative; margin-top: 54px; }
.okv-ruta-via { position: relative; height: 40px; overflow: hidden; }
.okv-ruta-linea { position: absolute; left: 0; right: 0; bottom: 9px; height: 3px; transform-origin: left center;
    background: repeating-linear-gradient(90deg, var(--ink, #0C0F14) 0 18px, transparent 18px 30px); }
.okv-ruta-movil { position: absolute; inset: 0; }
.okv-camion { position: absolute; right: 0; bottom: 7px; width: 54px; height: 30px; }
.okv-rueda { transform-box: fill-box; transform-origin: center; }
.okv-ruta-hitos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); }
.okv-ruta-hitos li { position: relative; padding: 18px 24px 0 0; }
.okv-hito-punto { display: block; width: 14px; height: 14px; border-radius: 50%; margin-top: -36px; margin-bottom: 14px; box-sizing: border-box;
    background: var(--safety, #FFB627); border: 3px solid var(--ink, #0C0F14); }
.okv-hito-etq { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan-dark, #0081B2); }
.okv-hito-txt { display: block; margin-top: 6px; font-family: 'Archivo', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }

/* Variante «solo puntos»: hace de borde superior de las tarjetas de pasos y las enciende al pasar el camión */
.okv-ruta--puntos + .steps { margin-top: 0; }
.okv-ruta--puntos .okv-ruta-hitos { height: 0; }
.okv-ruta--puntos .okv-ruta-hitos li { padding: 0; }
.okv-ruta--puntos .okv-hito-punto { margin: -18px 0 0 34px; }
.okv-ruta--puntos + .steps > .step { position: relative; }
.okv-ruta--puntos + .steps > .step::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cyan, #00AEEF);
    transform: scaleX(0); transform-origin: left center; }
.okv-ruta--puntos.en-marcha + .steps > .step::after { transform: scaleX(1); }

@media (max-width: 1080px) {
    .okv-ruta-via { display: none; }
    .okv-ruta-hitos { grid-template-columns: 1fr; gap: 22px; padding-left: 30px; position: relative; }
    .okv-ruta-hitos::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 3px; transform-origin: top center;
        background: repeating-linear-gradient(180deg, var(--ink, #0C0F14) 0 14px, transparent 14px 24px); }
    .okv-ruta-hitos li { padding: 0; }
    .okv-hito-punto { position: absolute; left: -30px; top: 2px; margin: 0; }
    .okv-ruta--puntos { display: none; }
}

/* ---- Mapas (rutas hasta Madrid / expedición) */
.okv-mapa { position: relative; margin-top: 54px; border: 1px solid var(--line, rgba(12,15,20,.13)); background: var(--white, #fff); }
.okv-mapa-capas { position: relative; width: 100%; aspect-ratio: 1000 / 320;
    background-image: radial-gradient(rgba(12,15,20,.13) 1px, transparent 1.6px); background-size: 20px 20px; background-position: 10px 10px; }
.okv-mapa-capas > div, .okv-mapa-capas svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.okv-arco { fill: none; stroke: var(--ink, #0C0F14); stroke-width: 3; stroke-dasharray: 10 9; stroke-linecap: round; }
.okv-arco.carretera { stroke: var(--cyan-dark, #0081B2); stroke-width: 5; stroke-dasharray: 16 10; }
.okv-nodo { fill: var(--white, #fff); stroke: var(--ink, #0C0F14); stroke-width: 4; }
.okv-nodo.destino { fill: var(--safety, #FFB627); }
/* Mapa de Europa: muchas capitales, trazo más fino para que se lea */
.okv-estrella { fill: var(--safety, #FFB627); stroke: var(--ink, #0C0F14); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.okv-arco.fino { stroke-width: 1.6; stroke-dasharray: 5 5; stroke: rgba(12,15,20,.62); }
.okv-nodo.cap { stroke-width: 2.5; }
.okv-mapa-txt.cap { font-size: 11px; letter-spacing: .08em; fill: var(--ink, #0C0F14); }
.okv-pulso { fill: none; stroke: var(--cyan, #00AEEF); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.okv-mapa-txt { font-family: 'IBM Plex Mono', monospace; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-muted, rgba(12,15,20,.62)); }
.okv-mapa-txt.fuerte { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.01em; text-transform: none; fill: var(--ink, #0C0F14); }
.okv-mapa-txt.mar { font-size: 13px; letter-spacing: .5em; fill: rgba(12,15,20,.28); }
.okv-viajero { display: none; }
.okv-mapa-pie { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 16px 24px; border-top: 1px solid var(--line, rgba(12,15,20,.13));
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft, rgba(12,15,20,.45)); }
.okv-mapa-pie i { display: inline-block; width: 22px; height: 0; border-top: 3px dashed var(--ink, #0C0F14); vertical-align: middle; margin-right: 8px; }
.okv-mapa-pie i.carretera { border-top-color: var(--cyan-dark, #0081B2); }
@media (max-width: 700px) {
    .okv-mapa-capas { aspect-ratio: 1000 / 420; }
    .okv-mapa-txt { font-size: 24px; }
    .okv-mapa-txt.fuerte { font-size: 32px; }
    .okv-mapa-txt.mar, .okv-mapa-txt.cap { display: none; }
    .okv-mapa--europa .okv-mapa-txt { font-size: 20px; }
    .okv-mapa--europa .okv-mapa-txt.fuerte { font-size: 28px; }
    .okv-mapa--europa .okv-mapa-txt.sede { display: none; }
}

/* ---- Oferta por escrito (documento que se rellena solo) */
.okv-doc { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 48px; align-items: center; }
.okv-doc-hoja { position: relative; border: 1px solid var(--ink, #0C0F14); background: var(--white, #fff); padding: 26px 28px 34px;
    box-shadow: 10px 10px 0 var(--safety, #FFB627); }
.okv-doc-cab { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line, rgba(12,15,20,.13));
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft, rgba(12,15,20,.45)); }
.okv-doc ul { list-style: none; margin: 8px 0 0; padding: 0; }
.okv-doc li { display: grid; grid-template-columns: 9.5em 1fr 22px; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px dashed var(--line, rgba(12,15,20,.13)); }
.okv-doc-k { font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.okv-doc-barra { height: 9px; background: var(--surface-2, #F4F4F4); position: relative; overflow: hidden; }
.okv-doc-barra::after { content: ""; position: absolute; inset: 0; background: var(--ink, #0C0F14); opacity: .82; transform-origin: left center;
    transform: scaleX(var(--w, .7)); }
.okv-doc-ok { width: 22px; height: 22px; border-radius: 50%; background: var(--cyan, #00AEEF); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.okv-doc-sello { position: absolute; right: 22px; bottom: -26px; padding: 10px 14px; border: 3px solid var(--cyan-dark, #0081B2); background: var(--white, #fff);
    color: var(--cyan-dark, #0081B2); font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
    line-height: 1.15; text-align: center; transform: rotate(-6deg); }
.okv-doc-nota { font-size: 15px; line-height: 1.65; font-weight: 500; color: var(--ink-muted, rgba(12,15,20,.62)); max-width: 380px; margin: 0; }
@media (max-width: 1080px) { .okv-doc { grid-template-columns: 1fr; gap: 54px; } .okv-doc li { grid-template-columns: 7.5em 1fr 22px; } }

/* ---- Sello «0 € para ti» */
.pledge { position: relative; }
.okv-sello-gratis { position: absolute; top: 34px; right: 40px; width: 112px; height: 112px; border-radius: 50%; border: 3px solid var(--ink, #0C0F14);
    background: var(--safety, #FFB627); display: grid; place-content: center; text-align: center; transform: rotate(-10deg);
    font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 34px; letter-spacing: -.04em; line-height: .9; color: var(--ink, #0C0F14); }
.okv-sello-gratis small { display: block; margin-top: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 1080px) { .okv-sello-gratis { position: relative; top: auto; right: auto; margin: 22px 22px -4px auto; width: 92px; height: 92px; font-size: 28px; } }

/* ---- Embudo de selección (/empleadores, sobre las 4 fases) */
.okv-embudo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 54px; align-items: end; border: 1px solid var(--line, rgba(12,15,20,.13)); border-bottom: 0; }
.okv-embudo-col { display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-end; padding: 22px 30px 18px; min-height: 96px; }
.okv-embudo-col + .okv-embudo-col { border-left: 1px solid var(--line, rgba(12,15,20,.13)); }
.okv-embudo-col span { width: 12px; height: 12px; border-radius: 50%; background: var(--ink, #0C0F14); opacity: .28; }
.okv-embudo-col:last-child span { width: 26px; height: 26px; background: var(--cyan, #00AEEF); opacity: 1; box-shadow: 0 0 0 6px rgba(0,174,239,.18); }
.okv-embudo + .phases { margin-top: 0; }
@media (max-width: 1080px) { .okv-embudo { display: none; } }

/* ---- Barras de los paneles */
.okv-meter-i { transform-origin: left center; }

/* =============================================================== MOVIMIENTO NORMAL */
@media (prefers-reduced-motion: no-preference) {
    /* ruta */
    .okv-motion .okv-ruta-linea { transform: scaleX(0); transition: transform var(--okv-viaje) var(--okv-ease-in-out); }
    .okv-motion .okv-ruta-movil { transform: translateX(-100%); transition: transform var(--okv-viaje) var(--okv-ease-in-out); }
    .okv-motion .okv-hito-punto { opacity: .35; transform: scale(.7); background: var(--white, #fff);
        transition: opacity .45s var(--okv-ease-out), transform .45s var(--okv-ease-out), background-color .45s var(--okv-ease-out);
        transition-delay: calc((var(--i) + .5) / var(--n, 3) * var(--okv-viaje)); }
    .okv-motion .okv-hito-etq, .okv-motion .okv-hito-txt { opacity: .35; transform: translateY(6px);
        transition: opacity .5s var(--okv-ease-out), transform .5s var(--okv-ease-out);
        transition-delay: calc((var(--i) + .5) / var(--n, 3) * var(--okv-viaje)); }
    .okv-motion .okv-ruta.en-marcha .okv-ruta-linea, .okv-motion .okv-ruta.en-marcha .okv-ruta-movil { transform: none; }
    .okv-motion .okv-ruta.en-marcha .okv-hito-punto { opacity: 1; transform: scale(1); background: var(--safety, #FFB627); }
    .okv-motion .okv-ruta.en-marcha .okv-hito-etq, .okv-motion .okv-ruta.en-marcha .okv-hito-txt { opacity: 1; transform: none; }
    .okv-motion .okv-ruta.en-marcha .okv-rueda { animation: okv-rodar var(--okv-viaje) var(--okv-ease-in-out) both; }
    .okv-motion .okv-ruta--puntos + .steps > .step::after { transition: transform .6s var(--okv-ease-out); }
    .okv-motion .okv-ruta--puntos + .steps > .step:nth-child(1)::after { transition-delay: calc(.5 / 3 * var(--okv-viaje)); }
    .okv-motion .okv-ruta--puntos + .steps > .step:nth-child(2)::after { transition-delay: calc(1.5 / 3 * var(--okv-viaje)); }
    .okv-motion .okv-ruta--puntos + .steps > .step:nth-child(3)::after { transition-delay: calc(2.5 / 3 * var(--okv-viaje)); }

    /* mapas: las capas de arcos se destapan en el sentido del viaje; los viajeros recorren su trayectoria */
    /* --desde/--hasta (en el HTML) ajustan el destape al tramo que ocupan los arcos, para que la línea vaya justo detrás del viajero */
    .okv-motion .okv-capa-izq { --desde: inset(0 100% 0 0); clip-path: var(--desde); transition: clip-path var(--dur, var(--okv-viaje)) var(--okv-ease-in-out) var(--retraso, 0s); }
    .okv-motion .okv-capa-der { --desde: inset(0 0 0 100%); clip-path: var(--desde); transition: clip-path var(--dur, calc(var(--okv-viaje) * .6)) var(--okv-ease-in-out) var(--retraso, .45s); }
    .okv-motion .okv-capa-abajo { --desde: inset(100% 0 0 0); clip-path: var(--desde); transition: clip-path var(--dur, calc(var(--okv-viaje) * .5)) var(--okv-ease-in-out) var(--retraso, .8s); }
    .okv-motion .okv-capa-tarde { --desde: inset(100% 0 0 0); clip-path: var(--desde); transition: clip-path var(--dur, calc(var(--okv-viaje) * .8)) var(--okv-ease-in-out) var(--retraso, var(--okv-viaje)); }
    .okv-motion .okv-capa-arco { clip-path: var(--desde); transition: clip-path var(--dur, .8s) var(--okv-ease-in-out) var(--retraso, 0s); }
    .okv-motion .okv-mapa.en-marcha .okv-mapa-capas > div { clip-path: var(--hasta, inset(0 0 0 0)); }
    .okv-motion.okv-con-recorrido .okv-viajero { display: inline; offset-path: var(--ruta); offset-rotate: auto; offset-distance: 0%; opacity: 0;
        transition: offset-distance var(--dur, var(--okv-viaje)) var(--okv-ease-in-out) var(--retraso, 0s); }
    .okv-motion.okv-con-recorrido .okv-mapa.en-marcha .okv-viajero { offset-distance: 100%;
        animation: okv-vuelo var(--dur, var(--okv-viaje)) linear var(--retraso, 0s) both; }
    .okv-motion .okv-mapa.en-marcha .okv-pulso { animation: okv-pulso 1.6s var(--okv-ease-out) var(--pulso, calc(var(--okv-viaje) * .9)) 3; }
    .okv-motion .okv-nodo.origen { transform-box: fill-box; transform-origin: center; transform: scale(.4); opacity: 0;
        transition: transform .4s var(--okv-ease-out), opacity .4s var(--okv-ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
    .okv-motion .okv-nodo.cap { transition-delay: calc(.2s + var(--i, 0) * 35ms); }
    .okv-motion .okv-mapa.en-marcha .okv-nodo.origen { transform: none; opacity: 1; }
    /* aro de la UE: las 12 estrellas aparecen una tras otra, como un reloj */
    .okv-motion .okv-estrella { opacity: 0; transform: scale(.3); transition: opacity .3s var(--okv-ease-out), transform .3s var(--okv-ease-out);
        transition-delay: calc(.5s + var(--e, 0) * 50ms); }
    .okv-motion .okv-mapa.en-marcha .okv-estrella { opacity: 1; transform: none; }

    /* oferta por escrito: cada línea se escribe, se marca y al final cae el sello */
    .okv-motion .okv-doc li { opacity: 0; transform: translateY(8px);
        transition: opacity .4s var(--okv-ease-out), transform .4s var(--okv-ease-out); transition-delay: calc(.2s + var(--i) * .42s); }
    .okv-motion .okv-doc-barra::after { transform: scaleX(0); transition: transform .5s var(--okv-ease-out); transition-delay: calc(.32s + var(--i) * .42s); }
    .okv-motion .okv-doc-ok { opacity: 0; transform: scale(.6); transition: opacity .25s var(--okv-ease-out), transform .25s var(--okv-ease-out);
        transition-delay: calc(.7s + var(--i) * .42s); }
    .okv-motion .okv-doc-sello { opacity: 0; transform: rotate(-6deg) scale(1.3); transition: opacity .18s var(--okv-ease-out), transform .22s var(--okv-ease-out);
        transition-delay: calc(.9s + var(--n, 5) * .42s); }
    .okv-motion .okv-doc.en-marcha li { opacity: 1; transform: none; }
    .okv-motion .okv-doc.en-marcha .okv-doc-barra::after { transform: scaleX(var(--w, .7)); }
    .okv-motion .okv-doc.en-marcha .okv-doc-ok { opacity: 1; transform: none; }
    .okv-motion .okv-doc.en-marcha .okv-doc-sello { opacity: 1; transform: rotate(-6deg) scale(1); }

    /* sello 0 € */
    .okv-motion .okv-sello-gratis { opacity: 0; transform: rotate(-10deg) scale(1.35);
        transition: opacity .2s var(--okv-ease-out) .25s, transform .24s var(--okv-ease-out) .25s; }
    .okv-motion .okv-sello-gratis.en-marcha { opacity: 1; transform: rotate(-10deg) scale(1); }

    /* embudo: cada fase aparece y deja atrás a los que no pasan */
    .okv-motion .okv-embudo-col span { opacity: 0; transform: scale(.6);
        transition: opacity .35s var(--okv-ease-out), transform .35s var(--okv-ease-out);
        transition-delay: calc(var(--c) * .55s + var(--d, 0) * 14ms); }
    .okv-motion .okv-embudo.en-marcha .okv-embudo-col span { opacity: .28; transform: none; }
    .okv-motion .okv-embudo.en-marcha .okv-embudo-col:last-child span { opacity: 1; animation: okv-latido 1.4s var(--okv-ease-out) 2.3s 2; }

    /* barras de los paneles */
    .okv-motion .okv-meter-i { transform: scaleX(0); transition: transform .9s var(--okv-ease-out); transition-delay: calc(.15s + var(--i, 0) * .12s); }
    .okv-motion .en-marcha .okv-meter-i { transform: none; }
}
@media (max-width: 1080px) and (prefers-reduced-motion: no-preference) {
    .okv-motion .okv-ruta-hitos::before { transform: scaleY(0); transition: transform var(--okv-viaje) var(--okv-ease-in-out); }
    .okv-motion .okv-ruta.en-marcha .okv-ruta-hitos::before { transform: none; }
}
@keyframes okv-rodar { to { transform: rotate(720deg); } }
@keyframes okv-vuelo { 0% { opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes okv-pulso { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3); } }
@keyframes okv-latido { 50% { box-shadow: 0 0 0 14px rgba(0,174,239,0); } }

/* =============================================================== REDUCIR MOVIMIENTO: solo fundidos escalonados */
@media (prefers-reduced-motion: reduce) {
    .okv-motion .okv-hito-punto, .okv-motion .okv-hito-etq, .okv-motion .okv-hito-txt {
        opacity: .2; transition: opacity var(--okv-fundido) ease; transition-delay: calc(var(--i) * .3s); }
    .okv-motion .okv-ruta.en-marcha .okv-hito-punto, .okv-motion .okv-ruta.en-marcha .okv-hito-etq, .okv-motion .okv-ruta.en-marcha .okv-hito-txt { opacity: 1; }
    .okv-motion .okv-ruta-movil, .okv-motion .okv-viajero { display: none; }
    .okv-motion .okv-ruta--puntos + .steps > .step::after { opacity: 0; transform: none; transition: opacity var(--okv-fundido) ease; }
    .okv-motion .okv-ruta--puntos + .steps > .step:nth-child(2)::after { transition-delay: .3s; }
    .okv-motion .okv-ruta--puntos + .steps > .step:nth-child(3)::after { transition-delay: .6s; }
    .okv-motion .okv-ruta--puntos.en-marcha + .steps > .step::after { opacity: 1; }
    .okv-motion .okv-mapa-capas > div { opacity: 0; transition: opacity .6s ease; }
    .okv-motion .okv-capa-der, .okv-motion .okv-capa-abajo { transition-delay: .35s; }
    .okv-motion .okv-capa-tarde { transition-delay: .7s; }
    .okv-motion .okv-capa-arco { transition-delay: calc(var(--retraso, 0s) * .5); }
    .okv-motion .okv-estrella { opacity: 0; transition: opacity var(--okv-fundido) ease .3s; }
    .okv-motion .okv-mapa.en-marcha .okv-estrella { opacity: 1; }
    .okv-motion .okv-mapa.en-marcha .okv-mapa-capas > div { opacity: 1; }
    .okv-motion .okv-doc li, .okv-motion .okv-doc-ok, .okv-motion .okv-doc-sello { opacity: 0; transition: opacity var(--okv-fundido) ease; }
    .okv-motion .okv-doc li { transition-delay: calc(var(--i) * .25s); }
    .okv-motion .okv-doc-ok { transition-delay: calc(.2s + var(--i) * .25s); }
    .okv-motion .okv-doc-sello { transition-delay: calc(.3s + var(--n, 5) * .25s); }
    .okv-motion .okv-doc.en-marcha li, .okv-motion .okv-doc.en-marcha .okv-doc-ok, .okv-motion .okv-doc.en-marcha .okv-doc-sello { opacity: 1; }
    .okv-motion .okv-sello-gratis { opacity: 0; transition: opacity var(--okv-fundido) ease .2s; }
    .okv-motion .okv-sello-gratis.en-marcha { opacity: 1; }
    .okv-motion .okv-embudo-col { opacity: 0; transition: opacity var(--okv-fundido) ease; transition-delay: calc(var(--c) * .3s); }
    .okv-motion .okv-embudo.en-marcha .okv-embudo-col { opacity: 1; }
    .okv-motion .okv-meter-i { opacity: 0; transition: opacity var(--okv-fundido) ease; transition-delay: calc(var(--i, 0) * .15s); }
    .okv-motion .en-marcha .okv-meter-i { opacity: 1; }
}

/* =============================================================== PRESENTACIÓN EN VÍDEO, A MITAD DE LA LANDING
   Un apartado propio (ni cabecera ni ventana flotante). La pantalla es un motion graphic: visor de cámara, rótulo, carretera con el
   camión y el botón de play. La página NO lleva el vídeo ni su portada: okv-motion.js lo crea dentro de la pantalla al pulsar. */
.okv-cine { position: relative; background: var(--ink, #0C0F14); color: #fff; padding: 112px 0; overflow: hidden; }
.okv-cine-in { max-width: 1400px; margin: 0 auto; padding: 0 56px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.okv-cine-k { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 12px; color: var(--safety, #FFB627); }
.okv-cine-k::before { content: ""; width: 30px; height: 7px; flex: none; background: repeating-linear-gradient(135deg, var(--safety, #FFB627) 0 6px, transparent 6px 12px); }
.okv-cine-h { margin: 22px 0 0; font-family: 'Archivo', sans-serif; font-size: clamp(34px, 4.4vw, 60px); line-height: 1; font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; color: #fff; }
.okv-cine-p { margin: 20px 0 0; max-width: 520px; font-size: 17px; line-height: 1.65; font-weight: 500; color: rgba(255,255,255,.72); }
.okv-cine-p b { color: var(--safety, #FFB627); }
.okv-cine-cta { all: unset; box-sizing: border-box; cursor: pointer; margin-top: 32px; display: inline-flex; align-items: center; gap: 12px; padding: 19px 30px;
    background: var(--cyan, #00AEEF); color: #fff; font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    transition: background-color .2s var(--okv-ease-out), transform .16s var(--okv-ease-out); }
.okv-cine-cta i { font-style: normal; font-size: 11px; }
.okv-cine-cta:focus-visible { outline: 3px solid var(--safety, #FFB627); outline-offset: 3px; }
.okv-cine-cta:active { transform: scale(.97); }
.okv-cine-cta[hidden] { display: none; }

/* La pantalla: estado final (sin JS o ya animada) */
.okv-cine-pantalla { position: relative; aspect-ratio: 16 / 9; background: #fff; border: 1px solid rgba(255,255,255,.18); box-shadow: 14px 14px 0 var(--safety, #FFB627); }
.okv-cine-play { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; inset: 0; display: block; overflow: hidden; color: var(--ink, #0C0F14); }
.okv-cine-play:focus-visible { outline: 3px solid var(--cyan, #00AEEF); outline-offset: 4px; }
.okv-cine-rejilla { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,129,178,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(0,129,178,.09) 1px, transparent 1px);
    background-size: 40px 40px; background-position: -1px -1px; }
.okv-cine-barrido { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(0,174,239,.14), transparent); transform: translateX(-100%); }
.okv-cine-play .okv-esq { position: absolute; width: 26px; height: 26px; border: 3px solid var(--ink, #0C0F14); }
.okv-cine-play .e1 { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.okv-cine-play .e2 { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.okv-cine-play .e3 { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.okv-cine-play .e4 { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.okv-cine-rec, .okv-cine-marca { position: absolute; top: 24px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; color: rgba(12,15,20,.62); }
.okv-cine-rec { left: 54px; }
.okv-cine-rec b { color: #E5372C; font-weight: 400; }
.okv-cine-marca { right: 54px; }
.okv-cine-rotulo { position: absolute; left: 54px; top: 64px; font-family: 'Archivo', sans-serif; font-size: clamp(22px, 3.1vw, 44px); font-weight: 900; line-height: .95;
    text-transform: uppercase; letter-spacing: -.04em; }
.okv-cine-rotulo small { display: block; margin-bottom: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--cyan-dark, #0081B2); }
.okv-cine-boton { position: absolute; left: 66%; top: 42%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--cyan, #00AEEF);
    box-shadow: 6px 6px 0 var(--ink, #0C0F14); display: grid; place-items: center; transition: transform .2s var(--okv-ease-out); }
.okv-cine-boton::after { content: ""; margin-left: 7px; border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.okv-cine-anillo { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cyan, #00AEEF); opacity: 0; }
.okv-cine-carril { position: absolute; left: 54px; right: 54px; bottom: 34px; height: 64px; }
.okv-cine-via { position: absolute; left: 0; right: 0; bottom: 12px; height: 3px; transform-origin: left center;
    background: repeating-linear-gradient(90deg, var(--ink, #0C0F14) 0 18px, transparent 18px 30px); }
.okv-cine-hito { position: absolute; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translateX(-50%);
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-dark, #0081B2); }
.okv-cine-hito i { order: 2; width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; background: var(--safety, #FFB627); border: 3px solid var(--ink, #0C0F14); margin-bottom: -18px; }
.okv-cine-movil { position: absolute; left: 0; right: 0; bottom: 10px; height: 34px; transform: translateX(62%); }
.okv-cine-movil .okv-camion { position: absolute; left: 0; right: auto; bottom: 0; width: 62px; height: 34px; }
@media (hover: hover) and (pointer: fine) {
    .okv-cine-play:hover .okv-cine-boton { transform: scale(1.07); }
    .okv-cine-cta:hover { background: var(--cyan-dark, #0081B2); }
}
.okv-cine-play:active .okv-cine-boton { transform: scale(.95); }

/* Reproduciendo: el vídeo ocupa la pantalla, en la propia página */
.okv-cine-pantalla video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
.okv-cine-pantalla.reproduciendo { background: #000; }

@media (max-width: 1080px) {
    .okv-cine { padding: 72px 0 80px; }
    .okv-cine-in { grid-template-columns: 1fr; gap: 40px; padding: 0 20px; }
    .okv-cine-pantalla { box-shadow: 8px 8px 0 var(--safety, #FFB627); margin-right: 8px; }
    .okv-cine-cta { margin-top: 24px; }
}
@media (max-width: 640px) {
    .okv-cine-play .okv-esq { width: 16px; height: 16px; border-width: 2px; }
    .okv-cine-play .e1, .okv-cine-play .e2 { top: 10px; }
    .okv-cine-play .e3, .okv-cine-play .e4 { bottom: 10px; }
    .okv-cine-play .e1, .okv-cine-play .e3 { left: 10px; }
    .okv-cine-play .e2, .okv-cine-play .e4 { right: 10px; }
    .okv-cine-rec { left: 32px; top: 14px; font-size: 9px; }
    .okv-cine-marca { display: none; }
    .okv-cine-rotulo { left: 32px; top: 38px; }
    .okv-cine-rotulo small { font-size: 9px; margin-bottom: 6px; }
    .okv-cine-boton { width: 56px; height: 56px; margin: -28px 0 0 -28px; left: 74%; top: 40%; box-shadow: 4px 4px 0 var(--ink, #0C0F14); }
    .okv-cine-boton::after { margin-left: 4px; border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
    .okv-cine-carril { left: 24px; right: 24px; bottom: 14px; height: 46px; }
    .okv-cine-hito { font-size: 8.5px; letter-spacing: .1em; bottom: 20px; }
    .okv-cine-movil .okv-camion { width: 42px; height: 23px; }
}
@media print { .okv-cine { display: none; } }

/* Movimiento normal: al entrar en pantalla, se monta el plano */
@media (prefers-reduced-motion: no-preference) {
    .okv-motion .okv-cine-rejilla { opacity: 0; transition: opacity .6s var(--okv-ease-out); }
    .okv-motion .okv-cine-play .okv-esq { opacity: 0; transition: opacity .4s var(--okv-ease-out), transform .5s var(--okv-ease-out); }
    .okv-motion .okv-cine-play .e1 { transform: translate(-14px, -14px); }
    .okv-motion .okv-cine-play .e2 { transform: translate(14px, -14px); }
    .okv-motion .okv-cine-play .e3 { transform: translate(-14px, 14px); }
    .okv-motion .okv-cine-play .e4 { transform: translate(14px, 14px); }
    .okv-motion .okv-cine-rec, .okv-motion .okv-cine-marca { opacity: 0; transition: opacity .4s var(--okv-ease-out) .3s; }
    .okv-motion .okv-cine-rotulo { opacity: 0; transform: translateY(14px); clip-path: inset(0 0 100% 0);
        transition: opacity .5s var(--okv-ease-out) .5s, transform .6s var(--okv-ease-out) .5s, clip-path .6s var(--okv-ease-out) .5s; }
    .okv-motion .okv-cine-via { transform: scaleX(0); transition: transform 1.4s var(--okv-ease-in-out) .4s; }
    .okv-motion .okv-cine-hito { opacity: 0; transition: opacity .4s var(--okv-ease-out); transition-delay: calc(.7s + var(--i) * .45s); }
    .okv-motion .okv-cine-hito i { transform: scale(.6); background: #fff; transition: transform .4s var(--okv-ease-out), background-color .4s var(--okv-ease-out);
        transition-delay: calc(.9s + var(--i) * .45s); }
    .okv-motion .okv-cine-movil { transform: translateX(-20%); transition: transform 2s var(--okv-ease-in-out) .4s; }
    .okv-motion .okv-cine-boton { opacity: 0; transform: scale(.4); transition: opacity .3s var(--okv-ease-out) 1.6s, transform .55s cubic-bezier(.34, 1.56, .64, 1) 1.6s; }

    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-rejilla,
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-rec, .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-marca,
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-hito { opacity: 1; }
    .okv-motion .okv-cine-pantalla.en-marcha .okv-esq { opacity: 1; transform: none; }
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-rotulo { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-via { transform: none; }
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-hito i { transform: none; background: var(--safety, #FFB627); }
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-movil { transform: translateX(62%); }
    .okv-motion .okv-cine-pantalla.en-marcha .okv-rueda { animation: okv-rodar 2s var(--okv-ease-in-out) .4s both; }
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-boton { opacity: 1; transform: none; }
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-barrido { animation: okv-barrido 1.6s var(--okv-ease-in-out) .2s both; }
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-anillo { animation: okv-pulso 2.4s var(--okv-ease-out) 2.2s 4; }
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-anillo.a2 { animation-delay: 3.4s; }
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-rec b { animation: okv-rec 1s steps(1) .6s 6; }
}
@keyframes okv-barrido { 0% { opacity: 0; transform: translateX(-100%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(340%); } }
@keyframes okv-rec { 50% { opacity: 0; } }

/* Reducir movimiento: el plano aparece por fundidos escalonados, sin desplazamientos */
@media (prefers-reduced-motion: reduce) {
    .okv-motion .okv-cine-rejilla, .okv-motion .okv-cine-play .okv-esq, .okv-motion .okv-cine-rotulo, .okv-motion .okv-cine-via,
    .okv-motion .okv-cine-hito, .okv-motion .okv-cine-movil, .okv-motion .okv-cine-boton { opacity: 0; transition: opacity var(--okv-fundido) ease; }
    .okv-motion .okv-cine-rotulo { transition-delay: .25s; }
    .okv-motion .okv-cine-via, .okv-motion .okv-cine-movil { transition-delay: .5s; }
    .okv-motion .okv-cine-hito { transition-delay: calc(.6s + var(--i) * .2s); }
    .okv-motion .okv-cine-boton { transition-delay: 1.2s; }
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-rejilla, .okv-motion .okv-cine-pantalla.en-marcha .okv-esq,
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-rotulo, .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-via,
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-hito, .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-movil,
    .okv-motion .okv-cine-pantalla.en-marcha .okv-cine-boton { opacity: 1; }
}

/* =============================================================== /EMPLEADORES: FRONTERA Y IDIOMA (v6)
   Frontera: la barrera de OKV entre el candidato y tu empresa (salario, fechas y condiciones se quedan en nuestro lado;
   a ti te llega su posición, clara). Idioma: la entrevista en su lengua se convierte en tu informe. */

/* ---- Frontera: estado final */
.okv-frontera { margin-top: 54px; }
.okv-fr-pista { position: relative; height: 220px; container-type: inline-size; border: 1px solid var(--line, rgba(12,15,20,.1)); overflow: hidden;
    background: var(--surface, #FAFAFA) linear-gradient(90deg, transparent 50%, rgba(0,174,239,.05) 50%); }
.okv-fr-linea { position: absolute; top: 50%; height: 3px; margin-top: -1px; transform-origin: left center;
    background: repeating-linear-gradient(90deg, var(--ink, #0C0F14) 0 14px, transparent 14px 24px); opacity: .35; }
.okv-fr-linea.izq { left: 9%; width: 41%; }
.okv-fr-linea.dch { left: 50%; width: 41%; background: repeating-linear-gradient(90deg, var(--cyan, #00AEEF) 0 14px, transparent 14px 24px); opacity: 1; }
.okv-fr-nodo, .okv-fr-barrera { position: absolute; top: 50%; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translate(-50%, -32px); }
.okv-fr-cand { left: 9%; }
.okv-fr-emp { left: 91%; }
.okv-fr-nodo svg { width: 64px; height: 64px; background: var(--surface, #FAFAFA); }
.okv-fr-etq { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted, rgba(12,15,20,.62)); white-space: nowrap; }
.okv-fr-etq.fuerte { color: var(--ink, #0C0F14); font-weight: 700; }
.okv-fr-barrera { left: 50%; top: 18px; transform: translateX(-50%); gap: 0; }
.okv-fr-brazo { display: block; width: 16px; height: 150px; transform-origin: bottom center; border: 2px solid var(--ink, #0C0F14);
    background: repeating-linear-gradient(-45deg, var(--safety, #FFB627) 0 10px, var(--ink, #0C0F14) 10px 20px); }
.okv-fr-poste { display: block; width: 44px; height: 10px; background: var(--ink, #0C0F14); margin-bottom: 8px; }
.okv-fr-chip, .okv-fr-sale { position: absolute; left: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; white-space: nowrap;
    font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.okv-fr-chip { top: calc(26% + var(--i) * 24%); transform: translate(calc(-100% - 22px), -50%); background: #fff; color: var(--ink, #0C0F14); border: 1px solid var(--line-strong, rgba(12,15,20,.24)); }
.okv-fr-sale { top: 50%; transform: translate(22px, -50%); background: var(--cyan, #00AEEF); color: #fff; box-shadow: 4px 4px 0 var(--ink, #0C0F14); }
.okv-fr-sale i { font-style: normal; }
.okv-fr-pie { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border: 1px solid var(--line, rgba(12,15,20,.1)); border-top: 0; }
.okv-fr-pie span { padding: 12px 18px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted, rgba(12,15,20,.62)); }
.okv-fr-pie span + span { border-left: 1px solid var(--line, rgba(12,15,20,.1)); color: var(--cyan-dark, #0081B2); text-align: right; }

@media (max-width: 760px) {
    .okv-fr-pista { height: 250px; }
    .okv-fr-nodo svg { width: 42px; height: 42px; }
    .okv-fr-nodo { transform: translate(-50%, -22px); gap: 6px; }
    .okv-fr-cand { left: 11%; } .okv-fr-emp { left: 89%; }
    .okv-fr-linea.izq { left: 11%; width: 39%; } .okv-fr-linea.dch { width: 39%; }
    .okv-fr-etq { font-size: 9px; letter-spacing: .08em; }
    .okv-fr-brazo { height: 170px; width: 12px; }
    .okv-fr-chip, .okv-fr-sale { font-size: 10px; padding: 6px 8px; letter-spacing: .02em; }
    .okv-fr-chip { transform: translate(calc(-100% - 14px), -50%); }
    .okv-fr-sale { transform: translate(14px, -50%); white-space: normal; max-width: 27cqw; line-height: 1.2; }
    .okv-fr-pie span { padding: 10px 12px; font-size: 9.5px; letter-spacing: .08em; }
}

/* ---- Idioma: estado final */
.okv-idioma { margin-top: 54px; display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: center; }
.okv-id-tarjeta { padding: 22px 24px 20px; border: 1px solid var(--line-strong, rgba(12,15,20,.24)); }
.okv-id-entrevista { background: var(--ink, #0C0F14); color: #fff; border-color: var(--ink, #0C0F14); }
.okv-id-informe { background: #fff; box-shadow: 10px 10px 0 var(--safety, #FFB627); }
.okv-id-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid currentColor;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.okv-id-entrevista .okv-id-cab { border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.7); }
.okv-id-informe .okv-id-cab { border-color: var(--line, rgba(12,15,20,.1)); color: var(--ink-muted, rgba(12,15,20,.62)); }
.okv-id-cab b { padding: 3px 8px; font-weight: 700; letter-spacing: .1em; color: var(--ink, #0C0F14); background: var(--safety, #FFB627); }
.okv-id-informe .okv-id-cab b { background: var(--cyan, #00AEEF); color: #fff; }
.okv-id-bocadillo { margin: 20px 0 16px; font-family: 'Archivo', sans-serif; font-size: clamp(18px, 1.9vw, 24px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.okv-id-bocadillo span { display: inline-block; }
.okv-id-onda { display: flex; align-items: center; gap: 4px; height: 34px; }
.okv-id-onda i { flex: 1; max-width: 6px; height: 100%; background: var(--cyan, #00AEEF); transform: scaleY(.35); transform-origin: center; }
.okv-id-onda i:nth-child(3n) { transform: scaleY(.7); } .okv-id-onda i:nth-child(4n+1) { transform: scaleY(.5); } .okv-id-onda i:nth-child(5n+2) { transform: scaleY(.9); }
.okv-id-pie { margin-top: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.okv-id-entrevista .okv-id-pie { color: rgba(255,255,255,.6); }
.okv-id-informe .okv-id-pie { color: var(--cyan-dark, #0081B2); }
.okv-id-rec { color: #E5372C; }
.okv-id-informe ul { list-style: none; margin: 8px 0 0; padding: 0; }
.okv-id-informe li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line, rgba(12,15,20,.1)); }
.okv-id-informe li span { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted, rgba(12,15,20,.62)); }
.okv-id-informe li b { font-family: 'Archivo', sans-serif; font-size: 16px; font-weight: 800; color: var(--ink, #0C0F14); }
.okv-id-flecha { position: relative; height: 60px; margin: 0 14px; }
.okv-id-traza { position: absolute; left: 0; right: 10px; top: 29px; height: 3px; transform-origin: left center;
    background: repeating-linear-gradient(90deg, var(--ink, #0C0F14) 0 10px, transparent 10px 16px); }
.okv-id-punta { position: absolute; right: 0; top: 23px; width: 0; height: 0; border-left: 12px solid var(--ink, #0C0F14); border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent; }
.okv-id-flecha small { position: absolute; left: 0; right: 0; top: 40px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-dark, #0081B2); line-height: 1.3; }
@media (max-width: 900px) {
    .okv-idioma { grid-template-columns: 1fr; }
    .okv-id-flecha { height: 74px; margin: 0; }
    .okv-id-traza { left: 50%; right: auto; top: 6px; bottom: 16px; width: 3px; height: auto; transform-origin: center top;
        background: repeating-linear-gradient(180deg, var(--ink, #0C0F14) 0 10px, transparent 10px 16px); }
    .okv-id-punta { right: auto; left: 50%; top: auto; bottom: 4px; margin-left: -6px; border-left: 7.5px solid transparent; border-right: 7.5px solid transparent; border-top: 12px solid var(--ink, #0C0F14); border-bottom: 0; }
    .okv-id-flecha small { left: calc(50% + 18px); right: auto; top: 28px; text-align: left; }
    .okv-id-informe { margin-right: 10px; }
}

/* ---- Movimiento normal */
@media (prefers-reduced-motion: no-preference) {
    .okv-motion .okv-frontera:not(.en-marcha) .okv-fr-chip, .okv-motion .okv-frontera:not(.en-marcha) .okv-fr-sale { opacity: 0; }
    .okv-motion .okv-fr-linea { transform: scaleX(0); transition: transform .9s var(--okv-ease-in-out); }
    .okv-motion .okv-fr-linea.dch { transition-delay: 2s; }
    .okv-motion .okv-fr-brazo { transform: scaleY(0); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) .35s; }
    .okv-motion .okv-frontera.en-marcha .okv-fr-linea, .okv-motion .okv-frontera.en-marcha .okv-fr-brazo { transform: none; }
    .okv-motion .okv-frontera.en-marcha .okv-fr-chip { animation: okv-fr-llega 1s var(--okv-ease-out) both; animation-delay: calc(.8s + var(--i) * .28s); }
    .okv-motion .okv-frontera.en-marcha .okv-fr-sale { animation: okv-fr-sale .7s var(--okv-ease-out) 2.3s both; }
    .okv-motion .okv-frontera.en-marcha .okv-fr-emp svg { animation: okv-fr-recibe .5s var(--okv-ease-out) 2.9s; }

    .okv-motion .okv-idioma:not(.en-marcha) .okv-id-informe li { opacity: 0; }
    .okv-motion .okv-id-bocadillo span { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s steps(30, end) .3s; }
    .okv-motion .okv-idioma.en-marcha .okv-id-bocadillo span { clip-path: inset(0 0 0 0); }
    .okv-motion .okv-idioma.en-marcha .okv-id-onda i { animation: okv-id-onda .6s ease-in-out 5 alternate both; animation-delay: calc(.3s + var(--i) * 45ms); }
    .okv-motion .okv-idioma.en-marcha .okv-id-rec { animation: okv-rec 1s steps(1) .3s 4; }
    .okv-motion .okv-id-traza { transform: scaleX(0); transition: transform .7s var(--okv-ease-in-out) 1.7s; }
    .okv-motion .okv-id-punta, .okv-motion .okv-id-flecha small { opacity: 0; transition: opacity .3s var(--okv-ease-out) 2.3s; }
    .okv-motion .okv-idioma.en-marcha .okv-id-traza { transform: none; }
    .okv-motion .okv-idioma.en-marcha .okv-id-punta, .okv-motion .okv-idioma.en-marcha .okv-id-flecha small { opacity: 1; }
    .okv-motion .okv-idioma.en-marcha .okv-id-informe li { animation: okv-id-fila .5s var(--okv-ease-out) both; animation-delay: calc(2.4s + var(--i) * .22s); }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    .okv-motion .okv-id-traza { transform: scaleY(0); }
    .okv-motion .okv-idioma.en-marcha .okv-id-traza { transform: none; }
}
@keyframes okv-fr-llega {
    0% { opacity: 0; transform: translate(calc(-100% - 22px - 30cqw), -50%); }
    20% { opacity: 1; }
    78% { transform: translate(calc(-100% - 8px), -50%); }
    100% { opacity: 1; transform: translate(calc(-100% - 22px), -50%); }
}
@keyframes okv-fr-sale { from { opacity: 0; transform: translate(0, -50%) scale(.9); } to { opacity: 1; transform: translate(22px, -50%); } }
@keyframes okv-fr-recibe { 50% { transform: scale(1.12); } }
@keyframes okv-id-onda { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@keyframes okv-id-fila { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
    @keyframes okv-fr-llega {
        0% { opacity: 0; transform: translate(calc(-100% - 14px - 26cqw), -50%); }
        20% { opacity: 1; }
        78% { transform: translate(calc(-100% - 6px), -50%); }
        100% { opacity: 1; transform: translate(calc(-100% - 14px), -50%); }
    }
    @keyframes okv-fr-sale { from { opacity: 0; transform: translate(0, -50%) scale(.9); } to { opacity: 1; transform: translate(14px, -50%); } }
}

/* ---- Reducir movimiento: fundidos escalonados */
@media (prefers-reduced-motion: reduce) {
    .okv-motion .okv-fr-linea, .okv-motion .okv-fr-brazo, .okv-motion .okv-fr-chip, .okv-motion .okv-fr-sale,
    .okv-motion .okv-id-bocadillo span, .okv-motion .okv-id-onda, .okv-motion .okv-id-flecha, .okv-motion .okv-id-informe li { opacity: 0; transition: opacity var(--okv-fundido) ease; }
    .okv-motion .okv-fr-brazo { transition-delay: .2s; }
    .okv-motion .okv-fr-chip { transition-delay: calc(.5s + var(--i) * .2s); }
    .okv-motion .okv-fr-linea.dch, .okv-motion .okv-fr-sale { transition-delay: 1.3s; }
    .okv-motion .okv-id-bocadillo span { transition-delay: .2s; }
    .okv-motion .okv-id-onda { transition-delay: .4s; }
    .okv-motion .okv-id-flecha { transition-delay: .8s; }
    .okv-motion .okv-id-informe li { transition-delay: calc(1.1s + var(--i) * .2s); }
    .okv-motion .okv-frontera.en-marcha .okv-fr-linea, .okv-motion .okv-frontera.en-marcha .okv-fr-brazo, .okv-motion .okv-frontera.en-marcha .okv-fr-chip,
    .okv-motion .okv-frontera.en-marcha .okv-fr-sale, .okv-motion .okv-idioma.en-marcha .okv-id-bocadillo span, .okv-motion .okv-idioma.en-marcha .okv-id-onda,
    .okv-motion .okv-idioma.en-marcha .okv-id-flecha, .okv-motion .okv-idioma.en-marcha .okv-id-informe li { opacity: 1; }
}