/* ============================================================
   Grafic Sport · piezas SVG animadas (assets/js/anim.js)
   ============================================================ */
.pieza{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-l);box-shadow:var(--sombra-1);overflow:hidden}
.pieza__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px 0}
.pieza__cab h3{margin:0;font-size:14px;font-weight:700}
.pieza__cab p{margin:2px 0 0;font-size:12px;color:var(--tinta-70)}
.pieza__cab .chip{flex:0 0 auto}
.pieza--negro{background:var(--negro);border-color:var(--negro-3);color:#fff}
.pieza--negro .pieza__cab p{color:rgba(255,255,255,.72)}
.vivo{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FF8A8E}
.vivo i{width:7px;height:7px;border-radius:50%;background:#FF3B41;box-shadow:0 0 0 0 rgba(255,59,65,.6);animation:vivoLat 1.6s ease-out infinite}
.pieza:not(.pieza--negro) .vivo{color:var(--rojo)}
@keyframes vivoLat{70%{box-shadow:0 0 0 7px rgba(255,59,65,0)}100%{box-shadow:0 0 0 0 rgba(255,59,65,0)}}

/* ---------- 1 · línea de la planta ---------- */
.lp{padding:6px 12px 16px}
.lp__svg{display:block;width:100%;height:auto}
.lp-t{font:800 13px var(--disp);letter-spacing:.12em;fill:#7A1215}
.lp-t2{font:600 11px var(--sans);fill:#6E6E7C}
.lp-t3{font:800 11px var(--disp);letter-spacing:.14em;fill:#fff}
.lp-t4{font:800 13px var(--disp);fill:#FFFFFF}
.lp__pasos{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.lp__pasos li{border-top:2px solid rgba(255,255,255,.16);padding-top:8px;min-width:0;counter-increment:lp}
.lp__pasos{counter-reset:lp}
.lp__pasos b{display:block;font:700 15px var(--disp);text-transform:uppercase;letter-spacing:.04em;color:#fff}
.lp__pasos b::before{content:counter(lp,decimal-leading-zero) " ";color:#FF6B6F}
.lp__pasos span{display:block;font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.7)}
.lp-harina{fill:#fff;opacity:0;animation:lpCae 1.9s ease-in infinite}
@keyframes lpCae{0%{opacity:0;transform:translateY(54px)}15%{opacity:.9}100%{opacity:0;transform:translateY(102px) translateX(70px)}}
.lp-rod{animation:lpGira 1.4s linear infinite}
.lp-rod--inv{animation-direction:reverse}
@keyframes lpGira{to{transform:rotate(360deg)}}
.lp-cinta{animation:lpCintaBg 1s linear infinite}
@keyframes lpCintaBg{to{transform:translateX(0)}}
.lp-troq{animation:lpTroq .75s cubic-bezier(.6,0,.4,1) infinite}
@keyframes lpTroq{0%,100%{transform:translateY(0)}45%{transform:translateY(12px)}}
.lp-ck{animation:lpAvanza 9s linear infinite;animation-delay:var(--d)}
.lp-ck .ck{animation:lpDorar 9s linear infinite;animation-delay:var(--d)}
@keyframes lpAvanza{0%{transform:translateX(0);opacity:0}3%{opacity:1}84%{opacity:1}88%{transform:translateX(458px);opacity:0}100%{transform:translateX(520px);opacity:0}}
@keyframes lpDorar{0%,26%{fill:#F4E3BC}58%,100%{fill:#D99A3E}}
.lp-fuego{animation:lpFuego 1.3s ease-in-out infinite alternate}
@keyframes lpFuego{from{opacity:.82}to{opacity:1}}
.lp-rayo{animation:lpRayo 2.6s ease-in-out infinite}
@keyframes lpRayo{0%,86%,100%{opacity:1}90%{opacity:.35}94%{opacity:1}}
.lp-onda{fill:none;stroke:#FFB547;stroke-width:3;stroke-linecap:round;opacity:0;animation:lpOnda 1.8s ease-out infinite}
@keyframes lpOnda{0%{opacity:0;transform:translateY(6px)}40%{opacity:.7}100%{opacity:0;transform:translateY(-14px)}}
.lp-led{animation:lpLed 1s steps(2) infinite}
@keyframes lpLed{50%{fill:#7CFF8A}}
.lp-paq{opacity:0;animation:lpPaq 3s ease-in infinite}
@keyframes lpPaq{0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:1;transform:translate(8px,-4px) scale(1)}55%{opacity:1;transform:translate(42px,10px) rotate(8deg)}70%,100%{opacity:0;transform:translate(60px,36px) rotate(14deg) scale(.7)}}
.lp-caja{animation:lpCaja 1.8s ease-in-out infinite}
@keyframes lpCaja{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.lp-camion{animation:lpBache .5s ease-in-out infinite alternate}
@keyframes lpBache{to{transform:translateY(-1.5px)}}
.camion .rueda{transform-box:fill-box;transform-origin:center;animation:lpGira .6s linear infinite}
.lp-ruta{animation:lpRuta .8s linear infinite}
@keyframes lpRuta{to{stroke-dashoffset:26}}

/* ---------- 2 · escáner ---------- */
.esc{display:grid;grid-template-columns:380px minmax(0,1fr);gap:0 6px;align-items:start;padding:8px 18px 18px}
.esc__svg{width:380px;height:auto;display:block}
.esc-logo{font:italic 800 24px var(--disp);fill:#A01B1E}
.esc-t{font:800 20px var(--disp);letter-spacing:.1em;fill:#7A1215}
.esc-ean{font:600 9.5px var(--mono);fill:#141414}
.esc-g{font:700 11px var(--sans);fill:#2E2E2E}
.esc-laser{filter:drop-shadow(0 0 4px #FF2A2A);animation:escLaser 2.2s ease-in-out infinite}
@keyframes escLaser{0%,100%{transform:translateX(0)}50%{transform:translateX(86px)}}
.esc-cam{fill:none;stroke:#A01B1E;stroke-width:1.6;stroke-opacity:.45}
.esc__lista{list-style:none;margin:26px 0 0;padding:0}
.esc__lista li{height:52px;display:flex;flex-direction:column;justify-content:center;border-bottom:1px dashed var(--linea);min-width:0}
.esc__lista li:last-child{border-bottom:0}
.esc-cad{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--rojo)}
.esc-n{font-size:13px;font-weight:600;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esc-mal{background:#FDE8E8;color:#7A1215;border-radius:4px;padding:0 4px}
.esc-ok{background:#E2F3EB;color:#1E6B34;border-radius:4px;padding:0 4px}
.anim-intro{animation:introSube .55s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--d,0s)}
.anim-intro.ya,.sin-anim .anim-intro{animation:none}
@keyframes introSube{from{opacity:0;transform:translateY(8px)}}
@media(max-width:900px){.esc{grid-template-columns:1fr}.esc__svg{width:100%;max-width:380px;margin:0 auto}.esc__lista{margin-top:4px}}

/* ---------- 3 · radar ---------- */
.rd{width:100%;max-width:340px;height:auto;display:block;margin:0 auto}
.rd-barrido{animation:lpGira 4s linear infinite}
.rd-t{font:700 13px var(--sans);fill:#fff}
.rd-hora{font:800 14px var(--disp);fill:#fff;letter-spacing:.04em}
.rd-halo{opacity:0;transform-box:fill-box;transform-origin:center;animation:rdPing 4s ease-out infinite;animation-delay:var(--d)}
@keyframes rdPing{0%{opacity:.75;transform:scale(.4)}35%{opacity:0;transform:scale(1.6)}100%{opacity:0}}
.rd-wrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:22px;align-items:center;padding:14px 20px 20px}
.rd-ley{display:grid;gap:10px}
.rd-ley div{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:rgba(255,255,255,.82);line-height:1.45}
.rd-ley i{flex:0 0 10px;height:10px;border-radius:50%;margin-top:4px}
.rd-ley b{color:#fff}
.rd-anillos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
.rd-anillos>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 10px;text-align:center;min-width:0}
.rd-anillos .anillo{margin:0 auto 6px}
.rd-anillos .anillo .bg{stroke:rgba(255,255,255,.12)}
.rd-anillos .anillo b{color:#fff;font-size:14px;letter-spacing:-.02em}
.rd-anillos small{display:block;font-size:10.5px;line-height:1.35;color:rgba(255,255,255,.7)}
@media(max-width:820px){.rd-wrap{grid-template-columns:1fr}}

/* ---------- 4 · ficha del alfajor ---------- */
.fa{width:100%;height:auto;display:block}
.fa-env{fill:none;stroke:#8A8F98;stroke-width:2.5}
.fa-relleno{animation-delay:1s}
.fa-logo{animation-delay:1.25s}
.fa-sello{animation:faSello .5s cubic-bezier(.3,1.6,.5,1) 1.55s backwards;transform-box:fill-box;transform-origin:center}
.fa-sello.ya,.sin-anim .fa-sello{animation:none}
@keyframes faSello{from{opacity:0;transform:scale(2.2) rotate(-20deg)}}
.fa-l{font:italic 800 22px var(--disp);fill:#A01B1E}
.fa-s{font:800 9.5px var(--disp);letter-spacing:.14em;fill:#8C5A1E}
.fa-50{font:800 13px var(--disp);fill:#fff}
.fa-ean{font:600 11px var(--mono);fill:#6E6E7C}
.fa-cam{fill:none;stroke:#8A8F98;stroke-width:1.5;stroke-dasharray:3 4;stroke-opacity:.8}
.fa-cad{font:700 13.5px var(--sans);fill:#141414}
.fa-g{font:800 13px var(--disp);letter-spacing:.03em}
.fa-g--mal{fill:#7A1215}.fa-g--ok{fill:#1E6B34}
.fa-mal{animation:faMal 6s steps(1) infinite}
.fa-bien{animation:faBien 6s steps(1) infinite}
@keyframes faMal{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes faBien{0%,55%{opacity:0}56%,100%{opacity:1}}

/* ---------- 5 · portal ---------- */
.pe{width:100%;height:auto;display:block;padding:4px 10px 0}
.pe-t{font:600 7.6px var(--sans);fill:#141414}
.pe-h{font:800 10px var(--disp);letter-spacing:.06em;fill:#fff}
.pe-cd{font:800 9.5px var(--disp);letter-spacing:.12em;fill:#fff}
.pe-lin{animation:peLin 5.4s ease infinite;animation-delay:var(--d)}
@keyframes peLin{0%{opacity:0;transform:translateX(-6px)}8%,88%{opacity:1;transform:none}100%{opacity:0}}
.pe-ok{animation:peOk 5.4s steps(1) infinite}
@keyframes peOk{0%,40%{opacity:0}41%,92%{opacity:1}93%,100%{opacity:0}}
.pe-cam{fill:none;stroke:#D9474A;stroke-width:2;stroke-dasharray:6 6}
.pe-ruta{fill:none;stroke:#141414;stroke-width:3;stroke-dasharray:14 10}
.pe-porton{animation:pePorton 2.6s ease-in-out infinite}
@keyframes pePorton{0%,100%{opacity:1}50%{opacity:.35}}
.pe__pie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:6px 20px 18px}
.pe__pie div{border-top:2px solid var(--linea);padding-top:8px;min-width:0}
.pe__pie b{display:block;font:700 15px var(--disp);text-transform:uppercase;letter-spacing:.03em}
.pe__pie span{display:block;font-size:11.5px;color:var(--tinta-70);line-height:1.4}
@media(max-width:820px){.pe__pie{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pl{width:100%;max-width:320px;height:auto;display:block;margin:6px auto 0}
.pl-c{fill:#ECEAE6;stroke:#E6DCD2;stroke-width:1}
.pl-c.on{stroke:rgba(0,0,0,.18)}
.pl-c.cae{animation:plCae .45s cubic-bezier(.3,1.4,.5,1) backwards}
@keyframes plCae{from{transform:translateY(-26px);opacity:0}}
.pl-ley{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-size:10.5px;color:var(--tinta-45);margin-top:6px}
.pl-ley i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}

/* ---------- 6 · ruta ---------- */
.ra{padding:6px 16px 16px}
.ra__svg{width:100%;height:auto;display:block}
.ra-hecho{fill:none;stroke:#A01B1E;stroke-width:5;stroke-linecap:round;stroke-opacity:.35}
.ra-pin{fill:#B5B8BE;transition:fill .3s}
.ra-par.on .ra-pin{fill:#2E7D32}
.ra-par.on circle{fill:#fff}
.ra-t{font:700 13px var(--sans);fill:#3E3E4A}
.ra__est{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:4px}
.ra__est div{background:var(--fondo);border:1px solid var(--linea);border-radius:12px;padding:9px 12px;min-width:0}
.ra__est small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-45);font-weight:700}
.ra__est b{display:block;font:700 22px var(--disp);font-variant-numeric:tabular-nums;color:var(--tinta)}

/* ---------- 7 · contenedor ---------- */
.ct{width:100%;max-width:330px;height:auto;display:block;margin:4px auto 0}
.ct-carga{transition:width .45s cubic-bezier(.2,.8,.2,1)}
.ct-t{font:800 15px var(--disp);letter-spacing:.04em;fill:#141414}

/* ---------- 8 · roadmap ---------- */
.rm{width:100%;height:auto;display:block}
.rm-a{fill:none;stroke:#A01B1E;stroke-width:6;stroke-linecap:round}
.rm-b{fill:none;stroke:#D9474A;stroke-width:6;stroke-linecap:round}
.rm-t{font:800 13px var(--disp);letter-spacing:.1em;fill:#141414}
.rm-s{font:500 11.5px var(--sans);fill:#6E6E7C}
.rm-n{font:800 18px var(--disp);fill:#141414}
.rm-n--b{fill:#fff}

/* ---------- mapa: rutas que se trazan, camiones y nodos que laten ---------- */
.mapa-py .ruta2{fill:none;stroke:var(--rojo);stroke-width:4;stroke-linecap:round;stroke-opacity:.55}
.mapa-py .pt circle.halo{animation:ptLate 2.6s ease-out infinite;transform-box:fill-box;transform-origin:center;opacity:.16}
@keyframes ptLate{0%{transform:scale(.7);opacity:.32}80%,100%{transform:scale(1.5);opacity:0}}
.mapa-py .bg-pt{animation:bgPop .45s cubic-bezier(.3,1.5,.5,1) backwards;transform-box:fill-box;transform-origin:center}
@keyframes bgPop{from{transform:scale(0)}}
.mapa-py .camion-m circle{fill:#fff;stroke:var(--rojo);stroke-width:5}
.sin-anim .mapa-py .bg-pt{animation:none}

/* ---------- mundo ---------- */
.mundo .arco2{fill:none;stroke:#A01B1E;stroke-width:1.8;stroke-opacity:.7}
.mundo .arco2.prev{stroke:#8A8F98;stroke-dasharray:4 4;stroke-opacity:.6}
.mundo .cont rect{fill:#A01B1E;stroke:#fff;stroke-width:1.2}
.mundo .py-late{transform-box:fill-box;transform-origin:center;animation:ptLate 2.4s ease-out infinite;fill:#A01B1E}

/* ---------- flujo en vivo con riel ---------- */
.flujo2{position:relative;padding-left:0}
.flujo2__riel{position:absolute;left:0;top:0;width:34px;overflow:visible;pointer-events:none}
.flujo2__riel .riel-bg{stroke:var(--linea-fuerte);stroke-width:3;fill:none;stroke-linecap:round}
.flujo2__riel .riel-on{stroke:var(--rojo);stroke-width:3;fill:none;stroke-linecap:round}
.flujo2 ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.flujo2 .paso{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;border:0;background:none;padding:6px 0;opacity:.5;box-shadow:none;border-radius:0;transition:opacity .3s}
.flujo2 .paso .num{position:relative;top:auto;left:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--linea-fuerte);color:var(--tinta-45);font:800 14px var(--disp);z-index:1;transition:all .3s}
.flujo2 .paso.on{opacity:1;box-shadow:none}
.flujo2 .paso.on .num{border-color:var(--rojo);color:var(--rojo);box-shadow:0 0 0 5px var(--rojo-50)}
.flujo2 .paso.ok{opacity:1}
.flujo2 .paso.ok .num{background:var(--verde);border-color:var(--verde);color:#fff}
.flujo2 .paso b{display:block;font:700 15px var(--disp);text-transform:uppercase;letter-spacing:.03em;margin:0;line-height:1.2;padding-top:2px}
.flujo2 .paso span{display:block;font-size:12px;color:var(--tinta-70);line-height:1.4}
.flujo2 .riel-ficha{transition:none}

/* ---------- íconos del hub: microanimación al pasar el mouse ---------- */
.mod__ico svg{transition:transform .3s}
.mod:hover .mod__ico[data-ico="radar"] svg{animation:lpGira 1.6s linear infinite}
.mod:hover .mod__ico[data-ico="mundo"] svg{animation:icoMundo 1.2s ease-in-out infinite alternate}
.mod:hover .mod__ico[data-ico="ruta"] svg,.mod:hover .mod__ico[data-ico="dist"] svg{animation:icoAnda .5s ease-in-out infinite alternate}
.mod:hover .mod__ico[data-ico="caja"] svg{animation:icoSalta .55s ease-in-out infinite alternate}
.mod:hover .mod__ico[data-ico="diag"] svg{animation:icoLupa 1.1s ease-in-out infinite}
.mod:hover .mod__ico[data-ico="cat"] svg,.mod:hover .mod__ico[data-ico="plan"] svg,.mod:hover .mod__ico[data-ico="ia"] svg{animation:icoSalta .6s ease-in-out infinite alternate}
@keyframes icoMundo{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
@keyframes icoAnda{to{transform:translateX(3px)}}
@keyframes icoSalta{to{transform:translateY(-3px)}}
@keyframes icoLupa{0%,100%{transform:translate(0,0)}25%{transform:translate(2px,-2px)}75%{transform:translate(-2px,1px)}}

/* ---------- fotos reales de la planta ---------- */
.fotos{display:grid;grid-template-columns:2fr 1.2fr 1.2fr;grid-template-rows:170px 170px;gap:10px}
.foto{position:relative;margin:0;border-radius:14px;overflow:hidden;background:var(--fondo-2);min-width:0}
.foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.foto:hover img{transform:scale(1.05)}
.foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(180deg,transparent,rgba(20,8,7,.85));color:#fff;font-size:11.5px;line-height:1.35}
.foto figcaption b{display:block;font:700 14px var(--disp);text-transform:uppercase;letter-spacing:.04em}
.foto--alta{grid-row:span 2}
@media(max-width:820px){.fotos{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:150px}.foto--alta{grid-row:span 1;grid-column:span 2}}

/* ---------- estado vacío: glifo del producto en vez de un cuadro gris ---------- */
.fo--vacia{display:inline-grid;place-items:center;color:#8A8F98;background:var(--fondo-2)}
.fo--vacia svg{width:24px;height:24px}

@media(max-width:820px){.lp__pasos{grid-template-columns:repeat(2,minmax(0,1fr))}.lp__pasos li:last-child{grid-column:span 2}}

/* ---------- movimiento reducido: todo queda quieto en una pose legible ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .lp-paq,.lp-harina,.lp-onda,.rd-halo{opacity:0!important}
  .lp-ck{opacity:1!important}
  .fa-mal{opacity:0!important}.fa-bien{opacity:1!important}
  .pe-lin,.pe-ok{opacity:1!important}
}

/* ---------- acabado del hub y ajustes ---------- */
.mod__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-right:40px}
.mod__kpis div{min-width:0;line-height:1.3}
.fotos--2{grid-template-columns:1fr 1fr;grid-template-rows:150px;margin-top:14px}
.kpi .anillo b:empty{display:none}
.anillo .fg{stroke-dasharray:0 1000}
.pieza + .hoy{margin-top:18px}
.lp-pieza .pieza__cab h3{color:#fff;font-family:var(--disp);font-size:20px;text-transform:uppercase;letter-spacing:.04em}
.pieza__cab h3{font-family:var(--disp);font-size:19px;text-transform:uppercase;letter-spacing:.03em;line-height:1.1}
.pieza--negro .pieza__cab h3{color:#fff}

/* piezas anchas: en el celular se deslizan con el dedo en vez de achicarse */
.desliza{min-width:0}
@media(max-width:700px){.desliza{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin:0 -4px;padding-bottom:4px}.desliza .lp__svg{min-width:760px}.desliza .pe{min-width:640px}.desliza .ra__svg{min-width:620px}.desliza .rm{min-width:620px}.desliza::after{content:"";display:block}}
.desliza-pista{display:none;font-size:10.5px;color:var(--tinta-45);text-align:right;padding:0 16px}
@media(max-width:700px){.desliza-pista{display:block}}