/* ============================================================
   KAMPITO · identidad y piezas SVG animadas
   navy #1D3B71 y hoja #62A13B del logo; packs: citrus #F39A1E,
   durazno #3E6FB5, green #B9C61F, manzana #D8282F
   ============================================================ */
:root{--k-navy:#1D3B71;--k-hoja:#62A13B;--k-hoja-osc:#3F7F22;--k-citrus:#F39A1E;--k-durazno:#3E6FB5;--k-green:#B9C61F;--k-manzana:#D8282F;--k-alerta:#C8102E;--fondo:#F4F6FA}

/* tipografía display: Fraunces sin mayúsculas forzadas (la del logo es de caja baja) */
.gate__t,.hub-cab h2,.mod h3,.paso b,.fase__cab h3,.tour-card h4,.tour-invita h3,.pista b,.hito b,.sec h2,.prop__it h4,.nivel b,.tl b{text-transform:none;letter-spacing:-.01em}
.mod h3{font-size:23px;font-weight:800}
.hub-cab h2{font-weight:900;font-size:46px}
.gate__t{font-size:32px;font-weight:800}
.kpi__val,.hoy__k b,.simx__big,.pblo b{font-variant-numeric:tabular-nums;font-weight:800}
.top h1{font-family:var(--disp);font-weight:800;letter-spacing:-.01em}

/* ---------- logo: trazo y relleno ---------- */
.wm-oscuro .k-l{fill:#fff}
.wm-svg.trazok .k-l,.wm-svg.trazok .k-h{stroke:#fff;stroke-width:3;stroke-dasharray:1 1;stroke-dashoffset:1;fill-opacity:0;animation:kTrazo 2.1s cubic-bezier(.5,.1,.3,1) forwards;animation-delay:calc(var(--i,0) * .09s)}
.wm-svg.trazok .k-h{stroke:#8BC34A;animation-delay:.75s}
@keyframes kTrazo{62%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0;fill-opacity:1;stroke-width:0}}
.gate__logo{filter:drop-shadow(0 14px 40px rgba(98,161,59,.28))}
.gate__logo .wm-svg{width:min(360px,74vw)}
.gate__bg i{background:linear-gradient(90deg,transparent,#1D3B71 35%,#62A13B 55%,#F39A1E 70%,transparent)}
.wipe{background:var(--k-navy)}
.wm-wipe .k-h{transform-box:fill-box;transform-origin:0% 100%;animation:kHoja 1s ease-in-out infinite alternate}
@keyframes kHoja{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}
.marca__emb{width:92px;flex:0 0 92px;display:flex;align-items:center}
.marca__emb .wm-svg{width:92px}
.wipe__emb .wm-svg{width:280px}

/* frutas que caen detrás del PIN */
.gate__frutas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gate__frutas span{position:absolute;top:-40px;left:var(--x);width:22px;height:22px;border-radius:50%;background:var(--c);opacity:.5;animation:kCaeGate 7s linear infinite;animation-delay:var(--d)}
.gate__frutas span::after{content:"";position:absolute;width:10px;height:6px;border-radius:0 8px 0 8px;background:#62A13B;top:-4px;left:10px}
@keyframes kCaeGate{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(110vh) rotate(260deg)}}

/* apertura */
.boot__fila{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:16px}
.boot__tetra{width:78px;flex:0 0 78px}
.boot__emb{width:min(300px,56vw)}
.boot__k b{color:#fff}
@media(max-width:560px){.boot__fila{gap:12px}.boot__tetra{width:54px;flex-basis:54px}}

/* ---------- Tetra que se llena ---------- */
.kx-tetra{display:block;height:auto}
.kx-liq{animation:kLlenar 3.2s cubic-bezier(.4,.1,.3,1) infinite;animation-delay:var(--dl,0s)}
@keyframes kLlenar{0%{transform:translateY(80px)}55%,85%{transform:translateY(-14px)}100%{transform:translateY(80px)}}
.kx-ola{animation:kOla 1.6s linear infinite}
@keyframes kOla{from{transform:translateX(0)}to{transform:translateX(30px)}}

/* ---------- línea de la fruta al Tetra ---------- */
.card--linea .card__cuerpo{padding-top:4px}
.kx-linea,.kx-envasado,.kx-qr,.kx-ruta3{width:100%;height:auto;display:block}
.kx-fruta{transform:translate(var(--x),-30px);opacity:0;animation:kFruta 4.4s cubic-bezier(.5,0,.8,.6) infinite;animation-delay:var(--d)}
@keyframes kFruta{0%{transform:translate(var(--x),-24px);opacity:0}10%{opacity:1}55%{transform:translate(var(--x),88px) scale(1,1);opacity:1}64%{transform:translate(var(--x),96px) scale(1.3,.35);opacity:.9}72%,100%{transform:translate(var(--x),100px) scale(1.4,.1);opacity:0}}
.kx-prensa{animation:kPrensa 1.1s ease-in-out infinite}
@keyframes kPrensa{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
.kx-tubo{stroke-dasharray:8 12;animation:kFluye .9s linear infinite}
@keyframes kFluye{to{stroke-dashoffset:-20}}
.kx-cinta .kx-viaja{animation:kViaja 6.5s linear infinite;animation-delay:var(--d)}
@keyframes kViaja{0%{transform:translate(352px,120px);opacity:0}6%{opacity:1}90%{opacity:1}100%{transform:translate(640px,120px);opacity:0}}
.kx-rodillo{transform-box:fill-box;transform-origin:center;animation:kGira 1s linear infinite}
@keyframes kGira{to{transform:rotate(360deg)}}
.kx-camion .kx-rueda{transform-box:fill-box;transform-origin:center}
.kx-linea .kx-camion{animation:kVaiven 2.4s ease-in-out infinite}
@keyframes kVaiven{0%,100%{transform:translate(668px,120px) scale(1.15)}50%{transform:translate(672px,119px) scale(1.15)}}

/* ---------- mapa: rutas que se dibujan, nodos que laten, camiones ---------- */
.mapa-py .kx-ruta{fill:none;stroke:var(--k-durazno);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:.75;animation:kDibuja 1.6s ease forwards;animation-delay:calc(.4s + var(--d))}
.mapa-py .kx-ruta--troncal{stroke:var(--k-navy);stroke-width:5;opacity:.9}
@keyframes kDibuja{to{stroke-dashoffset:0}}
.mapa-py .pt .halo{fill:var(--c);opacity:.18;transform-box:fill-box;transform-origin:center;animation:kLate 2.2s ease-out infinite}
.mapa-py .pt--planta .halo{opacity:.3}
.mapa-py .pt--alerta .halo{fill:var(--k-alerta);opacity:.3}
@keyframes kLate{0%{transform:scale(.6);opacity:.45}100%{transform:scale(1.6);opacity:0}}
.mapa-py .pt .nucleo{fill:var(--c);stroke:#fff;stroke-width:3}
.mapa-py .pt--alerta .nucleo{fill:var(--k-alerta)}
.mapa-py .kx-big{fill:var(--k-alerta);opacity:.32}
.mapa-py .pais-real{fill:#EAF0F7;stroke:#B8C6DC;stroke-width:2}
.kx-camion-mapa{pointer-events:none}

/* ---------- góndola SVG ---------- */
.kx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.kx-gondola{width:100%;min-width:520px;height:auto;display:block}
.kx-g-cad{font-family:var(--disp);font-weight:800;font-size:14px;fill:var(--tinta)}
.kx-g-sub{font-size:10.5px;font-weight:700;fill:#6B7487}
.kx-repisa{fill:#C9D3E6}
.kx-hueco{fill:rgba(200,16,46,.05);stroke:var(--k-alerta);stroke-width:1.4;stroke-dasharray:4 4;animation:kHueco 1.8s ease-in-out infinite}
@keyframes kHueco{0%,100%{stroke-opacity:.35}50%{stroke-opacity:1}}
.kx-cae{animation:kCae .7s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d)}
@keyframes kCae{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}
.kx-fantasma{opacity:.28;filter:grayscale(1);animation:kSeVa 3s ease-in-out infinite}
@keyframes kSeVa{0%,100%{opacity:.4}50%{opacity:.15}}
.kx-lupa{animation:kLupa 7s ease-in-out infinite alternate}
@keyframes kLupa{from{transform:translateX(0)}to{transform:translateX(var(--w))}}
.diag-kpis{display:grid;gap:16px;align-content:start}

/* ---------- flujo con objeto que viaja ---------- */
.flujo-k{margin:-4px 0 8px}
.flujo-k__svg{width:100%;height:auto;display:block;overflow:visible}
.flujo-k__base{fill:none;stroke:#DCE3EE;stroke-width:6;stroke-linecap:round}
.flujo-k__hecho{fill:none;stroke:var(--k-hoja);stroke-width:6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.flujo-k__nodo{fill:#fff;stroke:#C9D3E6;stroke-width:4;transition:fill .3s,stroke .3s}
.flujo-k__nodo.on{fill:var(--k-hoja);stroke:var(--k-navy)}
.flujo{grid-template-columns:repeat(var(--n,6),1fr)}
@media(max-width:1180px){.flujo{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.flujo{grid-template-columns:repeat(2,1fr)}}

/* ---------- envasado ---------- */
.kx-env{animation:kCintaEnv 15s linear infinite;animation-delay:var(--d)}
@keyframes kCintaEnv{from{transform:translate(-30px,108px)}to{transform:translate(750px,108px)}}
.kx-env-halo{fill:rgba(98,161,59,.0);stroke:var(--k-hoja);stroke-width:0;animation:kSensor 15s linear infinite;animation-delay:var(--d)}
@keyframes kSensor{0%,44%,56%,100%{fill:rgba(98,161,59,0);stroke-width:0}50%{fill:rgba(98,161,59,.25);stroke-width:3}}
.kx-sensor circle{animation:kParpadea 1.2s ease-in-out infinite}
@keyframes kParpadea{50%{opacity:.25}}
.kx-bandas{animation:kBanda 1s linear infinite}
@keyframes kBanda{to{transform:translateX(30px)}}

/* ---------- lonchera ---------- */
.lon-svg{max-width:440px;margin:0 auto 12px}
.kx-lonchera{width:100%;height:auto;display:block}
.kx-tapa{transform-box:fill-box;transform-origin:0% 100%;animation:kTapa .9s cubic-bezier(.3,1.3,.5,1) both}
@keyframes kTapa{from{transform:rotate(0)}to{transform:rotate(-14deg) translate(-4px,-6px)}}
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.packs__it{border:1px solid var(--linea);border-radius:14px;padding:12px;text-align:center;background:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.packs__it img{width:96px;height:96px;object-fit:contain}
.packs__it b{font-family:var(--disp);font-size:17px}
.packs__it span{font-size:11.5px;color:var(--tinta-45)}
.packs__it--k{border:2px dashed var(--k-alerta);background:#FFF7F8}
.packs__vacio{display:flex;gap:6px;height:96px;align-items:center;opacity:.55}
@media(max-width:700px){.packs{grid-template-columns:repeat(2,1fr)}}
.lon-feed{max-height:520px;overflow:auto}

/* ---------- matriz de los Amigazos ---------- */
.ami-matriz td{vertical-align:middle;text-align:center}
.ami-matriz td:first-child{text-align:left}
.ami-matriz td b{display:block;font-family:var(--disp);font-size:16px;color:var(--tinta)}
.ami-matriz td small{display:block;font-size:10.5px;color:var(--tinta-45)}
.ami-mini{display:inline-block;animation:kCae .6s cubic-bezier(.3,1.4,.5,1) both}
.ami-mini svg{display:block;margin:0 auto 2px}
.ami-cab{display:flex;align-items:center;gap:10px;min-width:150px}
.ami-cab img{width:46px;height:46px;object-fit:contain;flex:0 0 46px}
.ami-cab b{font-family:var(--disp);font-size:17px;display:block}
.ami-falta{background:#FFF5F6}
.ami-hueco{display:block;width:22px;height:36px;margin:0 auto 4px;border:1.6px dashed var(--k-alerta);border-radius:4px;animation:kHuecoB 1.8s ease-in-out infinite}
@keyframes kHuecoB{50%{border-color:rgba(200,16,46,.25)}}
.ami-falta small{color:var(--k-alerta)!important;font-weight:800}

/* figuritas */
.ami-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ami-fig{text-align:center;padding:14px 10px;border-radius:16px;background:linear-gradient(180deg,#fff,#F6F8FB);border:1px solid var(--linea);display:flex;flex-direction:column;align-items:center;gap:3px;animation:kCae .7s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d);transition:transform .25s}
.ami-fig:hover{transform:translateY(-4px) rotate(-1.5deg)}
.ami-fig__img{position:relative;width:120px;height:120px;display:grid;place-items:center}
.ami-fig__img img{width:86px;height:86px;object-fit:contain;position:relative}
.ami-fig__aro{position:absolute;inset:0;width:120px;height:120px;transform:rotate(-90deg)}
.ami-fig__aro circle{fill:none;stroke:var(--c);stroke-width:6;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340;animation:kAro 1.4s ease forwards;animation-delay:calc(var(--d) + .3s)}
@keyframes kAro{to{stroke-dashoffset:0}}
.ami-fig b{font-family:var(--disp);font-size:22px;color:var(--k-navy)}
.ami-fig span{font-size:12px;color:var(--tinta-45)}
.ami-fig em{font-style:normal;font-size:11px;font-weight:800;color:#fff;background:var(--c);border-radius:99px;padding:2px 10px;margin-top:4px}
.ami-fig:nth-child(1) em{color:#2B3300}
@media(max-width:820px){.ami-grid{grid-template-columns:repeat(2,1fr)}}

/* QR del Club */
.club-hero{max-width:640px;margin:0 auto}
.kx-haz{animation:kHaz 1.6s ease-in-out infinite}
@keyframes kHaz{0%,100%{transform:translateY(0)}50%{transform:translateY(76px)}}
.kx-anillo{transition:stroke-dasharray 1.1s cubic-bezier(.2,.8,.2,1);animation:kAnillo 1.4s ease both}
@keyframes kAnillo{from{stroke-dasharray:0 var(--L)}}
.ficha-club{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ficha-club div{background:var(--fondo);border:1px solid var(--linea);border-radius:10px;padding:10px;min-width:0}
.ficha-club small{display:block;font-size:10.5px;color:var(--tinta-45);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ficha-club b{font-size:13px}
@media(max-width:560px){.ficha-club{grid-template-columns:repeat(2,1fr)}}

/* catálogo maestro */
.clasif{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.clasif__it{border:1px solid var(--linea);border-radius:14px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:8px;min-width:0}
.clasif__cab{display:flex;align-items:center;gap:10px}
.clasif__cab img{width:54px;height:54px;object-fit:contain}
.clasif__cab b{font-family:var(--disp);font-size:17px}
.clasif__f{display:grid;grid-template-columns:70px 1fr auto;gap:8px;align-items:center;font-size:12px;padding:6px 0;border-top:1px dashed var(--linea)}
.clasif__f small{font-weight:800;color:var(--tinta-70)}
.clasif__f span{overflow-wrap:anywhere;color:var(--tinta-70)}
.cat{font-style:normal;font-size:10.5px;font-weight:800;border-radius:99px;padding:2px 8px;white-space:nowrap}
.cat--agua{background:#E3F2FB;color:#0B5C8A}.cat--jugo{background:#FEF1DE;color:#8A4B00}.cat--otra{background:#EEF0F4;color:#4E5A6E}
.clasif__sol{margin-top:auto;font-size:12px;background:#EAF4E2;color:#2F5A17;border-radius:10px;padding:8px 10px}
@media(max-width:1180px){.clasif{grid-template-columns:1fr}}

/* tablas */
.t-prod{display:flex;align-items:center;gap:10px;min-width:160px}
.t-prod .fo{width:36px;height:36px;object-fit:contain;flex:0 0 36px}
.t-prod b{display:block}
.t-prod small{display:block;color:var(--tinta-45);font-size:11px}
.fila-k td{background:#EEF3FA;font-weight:800}
.tag--rojo{background:#FDE8E8;color:#A1121A}
.stack--alerta{background:#FFF5F6!important;border-color:#F5C2C9!important}
.stack--alerta small{color:var(--k-alerta)!important;font-weight:800!important}

/* tarjetas de marca: texto siempre blanco sobre navy */
.card--rojo{background:linear-gradient(135deg,#1D3B71 0%,#142A54 100%);border-color:#10234A}
.hub-cab h2 span{color:var(--k-hoja)}
.hallazgo .num{color:var(--k-hoja-osc)}
.kpi__spark{width:80px;height:28px}
.h260{height:260px}.h300{height:300px}
.hoy__k{justify-content:center}
.mod__ico svg{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.mod:hover .mod__ico svg{transform:rotate(-10deg) scale(1.12)}
.tour-spot{box-shadow:0 0 0 9999px rgba(15,31,61,.72),0 0 0 3px #62A13B}
.feed__it .ic.verde{background:#EAF4E2;color:#2F6B1A}
.feed__it .ic.azul{background:#E8EDF6;color:#1D3B71}
.medidor,.kx-medidor{width:130px}

/* ---------- movimiento reducido: todo quieto ---------- */
@media (prefers-reduced-motion: reduce){
  .kx-liq,.kx-ola,.kx-fruta,.kx-prensa,.kx-tubo,.kx-viaja,.kx-rodillo,.kx-linea .kx-camion,.kx-env,.kx-env-halo,.kx-sensor circle,.kx-bandas,.kx-hueco,.kx-cae,.kx-fantasma,.kx-lupa,.kx-tapa,.kx-haz,.kx-anillo,.ami-mini,.ami-hueco,.ami-fig,.ami-fig__aro circle,.gate__frutas span,.wm-wipe .k-h,.mapa-py .pt .halo{animation:none!important}
  .kx-liq{transform:translateY(-10px)}
  .kx-fruta{opacity:1}
  .mapa-py .kx-ruta,.ami-fig__aro circle{stroke-dashoffset:0;animation:none!important}
  .wm-svg.trazok .k-l,.wm-svg.trazok .k-h{animation:none;stroke-width:0;fill-opacity:1}
  .kx-env{transform:translate(360px,108px)}
  .gate__frutas{display:none}
}

/* reglas del motor que vivían en el bloque de identidad anterior */
.sin-anim .mod,.sin-anim .card,.sin-anim .fase,.sin-anim .hallazgo{opacity:1}
.pblo b span{font-size:inherit;color:inherit;display:inline;font-family:inherit}
.wipe{overflow:hidden}
.mapa-real .pt .et{font-size:30px;font-weight:800;fill:var(--tinta)}
.mapa-real .pt .ev{font-size:22px;font-weight:600;fill:var(--tinta-45)}
@media(max-width:700px){.mapa-real .pt .et{font-size:38px}.mapa-real .pt .ev{font-size:28px}}
.mapa-py .reg{fill:#9FB0C8;font-size:20px}
.h320{height:320px}.h360{height:360px}
.card--rojo .card__cab p{color:rgba(255,255,255,.92)}
.card--negro .card__cab p,.card--negro .card__pie{color:rgba(255,255,255,.8)}
.fo--vacia{display:inline-block;width:36px;height:36px;border-radius:8px;background:var(--fondo-2);flex:0 0 auto}
small.of,b.of{color:#8A6A00;font-weight:800}
.hallazgo p.imp{margin-top:6px;font-size:12px;color:var(--tinta-70)}
.hallazgo p.imp b{color:var(--tinta)}
/* ajustes de revisión visual */
.clasif__f{grid-template-columns:64px 1fr}
.clasif__f em{grid-column:2;justify-self:start;white-space:normal}
.clasif__f span{overflow-wrap:break-word;word-break:normal}
.barras-k .barra i.rojo{background:#C8102E}
.barras-k .barra i.naranja{background:#F39A1E}
#cam-mapa .mapa-py{min-height:0}
#cam-mapa .mapa-py svg{width:100%;height:620px;display:block}
#cam-mapa .mapa-real .pt .et{font-size:24px}
@media(max-width:820px){#cam-mapa .mapa-py svg{height:auto}}