/* La línea de las operaciones (página «Operaciones»): el hilo de un lote en zigzag, de la viña a la salida, y debajo cada
   operación con su marca. Dos marcas (Iñaki, 20-10): el punto y la banda. Desde 860 px el nombre va a la izquierda de su pista;
   por debajo, encima, para que su frase se lea sin ratón. */
.linea-pag{--lo-panel:color-mix(in srgb,var(--tinta) 4.5%,var(--fondo));--lo-uva-suave:color-mix(in srgb,var(--uva) 15%,var(--fondo));
  --lo-uva-borde:color-mix(in srgb,var(--uva) 50%,var(--fondo));--lo-guia:color-mix(in srgb,var(--filete) 70%,var(--fondo));
  --lo-ease-out:cubic-bezier(.23,1,.32,1);--lo-ease-in-out:cubic-bezier(.77,0,.175,1)}
.linea-pag .solo-toque{display:none}
@media (hover:none),(pointer:coarse){.linea-pag .solo-raton{display:none}.linea-pag .solo-toque{display:inline}}

/* Leyenda y ayuda, discretas */
.lo-claves{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 28px;margin:4px 0 6px;font-size:13.5px;line-height:1.3;color:var(--tinta-suave)}
.linea-pag .leyenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.linea-pag .leyenda li{display:flex;align-items:center;gap:9px}
.linea-pag .g{flex:none;display:inline-block}
.g-punto{width:11px;height:11px;border-radius:50%;background:var(--uva)}
.g-tramo{width:30px;height:11px;border-radius:999px;background:var(--lo-uva-suave);border:1.5px solid var(--lo-uva-borde)}
.lo-claves .ayuda{margin:0}

/* La línea */
.linea{--col-nombre:15.5rem;--alto-hilo:132px;--alto-carril:50px;position:relative;display:grid}
.lo-eje,.carril{display:grid;grid-template-columns:var(--col-nombre) minmax(0,1fr);column-gap:20px;align-items:stretch}
.carril{color:inherit;text-decoration:none;min-height:var(--alto-carril);border-radius:8px;transition:background-color 160ms ease}
a.carril{cursor:pointer}
.carril:focus-visible{outline:2px solid var(--uva);outline-offset:-2px}
.carril.activa{background:var(--lo-panel)}
a.carril.activa .c-n{text-decoration:underline;text-decoration-color:var(--uva);text-decoration-thickness:1px;text-underline-offset:3px}

.lo-eje-rotulo{display:flex;flex-direction:column;justify-content:center;padding-left:12px}
.lo-marca-eje{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;line-height:1.2}
.lo-marca-eje .num{font:500 13px/1 var(--f-mono);color:var(--tinta-suave)}
.lo-marca-eje .barra{width:3px;height:16px;border-radius:2px;background:var(--raspon)}

.lo-hilo{position:relative;height:var(--alto-hilo)}
.lo-hilo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.entra .lo-hilo svg{animation:lo-revela-h 1100ms var(--lo-ease-in-out) 120ms backwards}
@keyframes lo-revela-h{from{clip-path:inset(-20px 100% -20px 0)}to{clip-path:inset(-20px 0 -20px 0)}}
.hilo{fill:none;stroke:var(--raspon);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hilo-luz{fill:none;stroke:var(--uva);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity 200ms ease}
.linea.con-luz .hilo-luz{opacity:1}

.parada{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--raspon);border:3px solid var(--fondo);box-shadow:0 0 0 1px var(--filete);
  transition:transform 200ms var(--lo-ease-out),box-shadow 200ms ease,background-color 200ms ease}
.entra .parada{animation:lo-aparece-p 420ms var(--lo-ease-out) backwards}
.parada.tocada{background:var(--uva);box-shadow:0 0 0 1.5px var(--uva);transform:scale(1.2)}
@keyframes lo-aparece-p{from{opacity:0;transform:scale(.5)}}
.parada-n{position:absolute;font:700 14px/1.2 var(--f-sans);white-space:nowrap;translate:-50% 0;transition:color 200ms ease}
.entra .parada-n{animation:lo-aparece-t 500ms var(--lo-ease-out) backwards}
.parada-n.tocada{color:var(--uva)}
@keyframes lo-aparece-t{from{opacity:0}}

.c-nombre{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:7px 0 7px 12px;min-width:0}
.c-n{font-weight:650;font-size:15px;line-height:1.25}
.c-donde{font-size:13px;line-height:1.35;color:var(--tinta-suave)}
.c-pista{position:relative;min-height:var(--alto-carril);background-repeat:repeat-x;background-size:calc(100% / 7) 100%;
  background-image:linear-gradient(90deg,transparent calc(50% - .5px),var(--lo-guia) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px))}
.entra .c-pista{animation:lo-aparece-c 460ms var(--lo-ease-out) backwards;animation-delay:calc(560ms + var(--i) * 45ms)}
@keyframes lo-aparece-c{from{opacity:0}}
.c-nombre,.c-pista>*{transition:opacity 200ms ease}
.linea.con-foco .carril:not(.activa) .c-pista>*{opacity:.18}
.linea.con-foco .carril:not(.activa) .c-nombre{opacity:.45}

/* Las marcas: --a y --b en paradas (0 = viña … 6 = salida). Todas las bandas, iguales: la frase da el matiz */
.marca{position:absolute;--p:calc((var(--a) + .5) * 100% / 7);--l:calc((var(--b) - var(--a)) * 100% / 7);left:var(--p);top:50%}
.m-punto{width:14px;height:14px;translate:-50% -50%;border-radius:50%;background:var(--uva);box-shadow:0 0 0 3px var(--fondo)}
.carril.activa .m-punto{box-shadow:0 0 0 3px var(--lo-panel)}
.m-tramo{width:var(--l);height:14px;translate:0 -50%;border-radius:999px;background:var(--lo-uva-suave);border:1.5px solid var(--lo-uva-borde)}
.m-etq{position:absolute;font-size:12px;line-height:1;color:var(--tinta-suave);white-space:nowrap;top:50%;translate:0 -50%}
.m-etq.arriba{top:3px;translate:-50% 0;font-size:11.5px}
.m-etq.izq{translate:-100% -50%;margin-left:-12px}
.m-etq.dentro{margin-left:10px;color:var(--uva);font-weight:600;font-size:11.5px}

/* También en tu bodega: lo que no va con un lote */
.lo-bodega{margin-top:36px;padding:18px 20px;border-radius:var(--radio-m);background:var(--panel);border:1px solid var(--filete)}
.lo-bodega h2{margin:0;font-size:18px;line-height:1.3}
.lo-bodega>p{margin:4px 0 14px;font-size:14.5px;color:var(--tinta-suave)}
.lo-bodega ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px}
.lo-bodega li{display:grid;gap:2px}
.lo-bodega b{font-weight:650;font-size:15px}
.lo-bodega li span{font-size:13.5px;line-height:1.35;color:var(--tinta-suave)}

/* Con GrapeIQ: la promesa va aquí y en ningún otro sitio de la página */
.lo-giq{margin-top:28px;display:flex;gap:20px;align-items:flex-start;padding:22px 24px;border-radius:var(--radio-m);
  background:var(--uva-suave);border-left:4px solid var(--uva)}
.lo-giq-racimo{flex:none;width:34px}
.lo-giq-racimo svg{display:block;width:34px;height:auto}
.lo-giq-marca{margin:0;font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--uva)}
.lo-giq h2{margin:4px 0 8px;font-size:22px;line-height:1.25}
.lo-giq p:not(.lo-giq-marca){margin:0 0 12px;max-width:62ch;font-size:15.5px;line-height:1.5}
.lo-giq a{display:inline-flex;align-items:center;gap:6px;font-weight:650;font-size:15px;padding:4px 0}

@media (max-width:859.98px){
  .lo-claves{flex-direction:column;align-items:flex-start}
  .linea{--alto-hilo:120px;--alto-carril:30px}
  .lo-eje,.carril{grid-template-columns:minmax(0,1fr);column-gap:0}
  .lo-eje-rotulo{padding:0 0 4px}
  .parada-n{font-size:12.5px}
  .carril{margin-top:6px}
  .c-nombre{padding:6px 8px 0}
  .c-n{font-size:14.5px}
  .m-punto{width:12px;height:12px}
  .m-tramo{height:12px}
  .m-etq.arriba,.m-etq.izq{display:none}
  .lo-bodega{padding:16px}
  .lo-bodega ul{grid-template-columns:1fr}
  .lo-giq{flex-direction:column;gap:12px;padding:18px}
  .lo-giq h2{font-size:20px}
}

@media (prefers-reduced-motion:reduce){
  .entra .lo-hilo svg,.entra .parada,.entra .parada-n,.entra .c-pista{animation:none}
}