/* ============================================================
   Caacupe-mí · capa de identidad sobre el motor (app.css)
   azul #333D61 (texto blanco 10,4:1) · rojo #E4142F (blanco 4,6:1) · gris #606062 · celeste río #008BCB
   ============================================================ */
:root{
  --rojo:#333D61; --rojo-900:#232B48; --rojo-700:#2B3456; --rojo-50:#EAECF3; --rojo-100:#D3D7E6;
  --negro:#151A2E; --negro-2:#1C2340; --negro-3:#26305A;
  --amarillo:#008BCB; --amarillo-50:#E1F2FA;
  --carmin:#E4142F; --naranja:#E07B1F; --naranja-50:#FCEEDD;
  --fondo:#F5F6FA; --fondo-2:#E9EBF2; --linea:#E1E4EC; --linea-fuerte:#C9CEDB;
  --disp:"Barlow Condensed","Inter",sans-serif;
}
.gate__t,.hub-cab h2,.boot__k b{letter-spacing:.4px}
.hub-cab h2 span{color:var(--carmin)}
.chip--rojo{background:var(--carmin);color:#fff}
.chip--amarillo{background:var(--amarillo-50);color:#005F8C;border-color:#B5DDF0}
.tag--amarillo{background:var(--amarillo-50);color:#005F8C}
/* gate: barridos en los tres colores del logo; logo a color sobre placa blanca (fiel al original) */
.gate__bg i:nth-child(1){background:linear-gradient(90deg,transparent,#4A5687 40%,#4A5687 60%,transparent);opacity:.22}
.gate__bg i:nth-child(2){background:linear-gradient(90deg,transparent,var(--carmin) 40%,var(--carmin) 60%,transparent);opacity:.14}
.gate__bg i:nth-child(3){background:linear-gradient(90deg,transparent,var(--amarillo) 40%,var(--amarillo) 60%,transparent);opacity:.16}
.gate__logo{width:min(400px,84vw);filter:drop-shadow(0 18px 44px rgba(0,139,203,.28))}
.gate__placa{background:#fff;border-radius:18px;padding:22px 26px;width:100%;animation:placaIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes placaIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.gate__logo .wm-svg{width:100%}
.wm-svg.trazok path{stroke:#333D61}
.wm-svg.trazok path[fill="#E4142F"]{stroke:#E4142F}
.wm-svg.trazok path[fill="#FEFEFE"]{stroke:none}
/* emblemas sobre placa blanca (el logo es azul sobre blanco) */
.wipe{background:var(--negro)}
.wipe__emb{width:280px;height:auto;background:#fff;border-radius:14px;padding:14px 18px}
.wipe__emb .wm-svg{width:244px}
.marca__emb{width:74px;height:44px;flex:0 0 74px;background:#fff;border-radius:8px;padding:3px 5px;display:grid;place-items:center}
.marca__emb .wm-svg{width:64px}
.boot__emb{width:min(320px,70vw);background:#fff;border-radius:16px;padding:16px 20px}
.boot__k b{color:#5FB6E0}
.boot__barra i{background:var(--carmin)}
.g>*,.card,.lienzo-chart{min-width:0}
.h280{height:280px}.h300{height:300px}.h320{height:320px}
.kpi__spark{position:static;display:block;width:100%;height:26px;margin-top:8px}
.mapa-real .pt .et{font-size:30px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:6px;stroke-linejoin:round}
.mapa-real .pt .ev{font-size:24px;font-weight:600;fill:var(--tinta-45);paint-order:stroke;stroke:#fff;stroke-width:6px;stroke-linejoin:round}
.mapa-real .reg{font-size:30px}
@media(max-width:700px){.mapa-real .pt .et{font-size:36px}.mapa-real .pt .ev{font-size:29px}}
/* el río Paraguay corre: trazo que fluye y un convoy que sube */
.rio-vivo{stroke:#008BCB!important;stroke-width:7!important;stroke-dasharray:18 12;animation:fluye 2.6s linear infinite;opacity:.85}
@keyframes fluye{to{stroke-dashoffset:-60}}
.barquito{fill:var(--carmin);stroke:#fff;stroke-width:3}
/* patio de la Torre */
.patio{width:100%;height:auto;display:block;border-radius:10px;background:linear-gradient(#EEF3FA,#fff)}
.patio .cx{animation:cxIn .4s ease both}
@keyframes cxIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.patio .grua{animation:grua 7s ease-in-out infinite alternate}
@keyframes grua{from{transform:translateX(8px)}to{transform:translateX(320px)}}
.patio .agua,.rio-corte .ola1{animation:ola 3s ease-in-out infinite alternate}
@keyframes ola{to{transform:translateX(-25px)}}
/* simulador de bajante: corte del río */
.rio-corte{width:100%;height:auto;display:block;border-radius:12px;overflow:hidden;background:#DCEAF5}
.rio-corte #bj-agua,.rio-corte #bj-barco{transition:all .45s cubic-bezier(.2,.8,.2,1)}
.card--sim{background:linear-gradient(180deg,#fff,#F3F5FA)}
/* portal: tres direcciones que se unen */
.tres-a-uno svg{width:100%;height:auto;display:block}
.tres-a-uno .une{stroke-dasharray:200;stroke-dashoffset:200;animation:une 1.4s ease forwards}
@keyframes une{to{stroke-dashoffset:0}}
.cont-ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cont-ficha>div{background:var(--fondo);border:1px solid var(--linea);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.cont-ficha b{font-size:14px;overflow-wrap:anywhere}.cont-ficha span{font-size:12px;color:var(--tinta-70)}
/* turnos: camiones hacia el portón */
.porton{width:100%;height:auto;display:block;margin-bottom:12px;overflow:hidden}
.porton .camion{animation:camion 4.4s linear infinite both}
@keyframes camion{0%{transform:translate(-80px,40px)}70%{transform:translate(262px,40px)}100%{transform:translate(262px,40px);opacity:0}}
.porton .barrera{transform-origin:336px 28px;animation:barrera 4.4s ease infinite}
@keyframes barrera{0%,55%{transform:rotate(0)}65%,85%{transform:rotate(-70deg)}100%{transform:rotate(0)}}
/* factura viva */
.factura{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:14px 16px;font-size:13px;max-width:560px;margin-inline:auto;box-shadow:var(--sombra-2)}
.factura__cab{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:2px solid var(--carmin);padding-bottom:8px;margin-bottom:6px}
.factura__cab b{color:var(--rojo)}.factura__cab span{color:var(--tinta-45);font-size:12px}
.factura__l{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;padding:5px 0;border-bottom:1px dashed var(--linea)}
.factura__l span:nth-child(2){color:var(--tinta-45)}
.factura__t{display:flex;justify-content:space-between;padding-top:8px;font-size:15px}.factura__t b{color:var(--rojo)}
/* propuesta por módulo */
.modp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:16px 0}
.modp{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sombra-1);animation:modIn .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * .08s);min-width:0}
.modp__cab{display:flex;gap:12px;align-items:center}
.modp__cab .ic{width:40px;height:40px;border-radius:10px;background:var(--rojo);color:#fff;display:grid;place-items:center;flex:0 0 40px}
.modp__cab .ic svg{width:20px;height:20px}
.modp h3{margin:0;font-size:17px}.modp__cab span{font-size:12px;color:var(--tinta-45)}
.modp p{margin:0;font-size:13px;line-height:1.55;color:var(--tinta-70);flex:1}
.modp .precios{grid-template-columns:1fr;gap:8px}
.modp .pblo{text-align:center}
.modp .pblo b{font-size:20px}
.modp__cta{align-self:center}
.btn--grande{font-size:15px;padding:12px 26px;background:var(--carmin);border-color:var(--carmin)}
.card--rojo .pblo span,.card--rojo .pblo small{color:rgba(255,255,255,.85)}
@media (prefers-reduced-motion:reduce){.rio-vivo,.patio .grua,.patio .cx,.porton .camion,.porton .barrera,.tres-a-uno .une,.agua,.ola1{animation:none!important}.tres-a-uno .une{stroke-dashoffset:0}}
.tour-invita__emb{background:#fff;border-radius:12px;padding:10px 14px;display:inline-block}
.tour-invita__emb svg{width:180px;height:auto;display:block}