:root{--bg:#F2F5FB;--card:#fff;--ink:#0F1F3D;--mut:#55627A;--line:#D8E0EE;--tape:#FF7A00;--route:#1456D9;--soft:#E6EEFF;--green:#0E7A4F;--navy:#0A2150;--onnavy:#fff;--onnavy-mut:#B8C6E3;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0A1428;--card:#12203D;--ink:#EAF0FB;--mut:#9FB0CC;--line:#243557;--tape:#FF8A1F;--route:#6AA2FF;--soft:#172A50;--green:#3DD598;--navy:#07142E}}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "Bricolage Grotesque",system-ui,sans-serif}
.wrap{max-width:var(--w,1280px);margin:0 auto;padding:28px 18px;display:grid;grid-template-columns:1fr 440px;gap:32px;align-items:start}
h1{font-size:clamp(30px,4.4vw,50px);line-height:1.05;margin:8px 0 14px;font-weight:800;letter-spacing:-.02em}
.lead{color:var(--mut);max-width:46ch;margin:0 0 22px}
.map{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;position:relative;overflow:hidden}
.map svg{width:100%;height:auto;display:block}
.map .grid{stroke:var(--line);stroke-width:1}
.route{fill:none;stroke:var(--route);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s ease}
.pin{transform-box:fill-box;transform-origin:50% 100%;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(0);opacity:0}}
.pin text{font:700 13px "Bricolage Grotesque",sans-serif;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:4px}
.kmbadge{position:absolute;right:14px;bottom:14px;background:var(--tape);color:#0F1F3D;border-radius:12px;padding:8px 14px;font-weight:800;font-size:22px}
.kmbadge small{font-weight:600;font-size:12px;display:block;opacity:.75}
.legs{margin:14px 0 0;padding:0;list-style:none;color:var(--mut);font-size:14px}
.legs li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:5px 0}
form{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;position:sticky;top:16px}
form h2{margin:0 0 4px;font-size:22px}
.sub{margin:0 0 16px;color:var(--mut);font-size:14px}
label{display:block;font-weight:600;font-size:14px;margin:14px 0 5px}
input[type=text],input[type=tel],input[type=date],textarea{width:100%;font:inherit;color:inherit;background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:11px 12px}
textarea{min-height:76px;resize:vertical}
input:focus,textarea:focus,button:focus-visible,.opt:focus-within{outline:3px solid var(--route);outline-offset:1px}
.fld{position:relative}
.dd{position:absolute;z-index:5;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);max-height:210px;overflow:auto}
.dd li{padding:8px 10px;border-radius:8px;cursor:pointer}.dd li:hover,.dd li.on{background:var(--soft)}.dd span{color:var(--mut)}
.chip{display:flex;align-items:center;gap:8px;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s,opacity .4s,margin .4s;background:var(--soft);border-radius:10px;font-weight:600;font-size:14px}
.chip.show{max-height:50px;opacity:1;margin-top:8px;padding:7px 10px}
.chip svg{width:20px;height:20px;flex:none;fill:var(--route)}
.chip em{margin-left:auto;font-style:normal;color:var(--mut);font-weight:400}
.rm{border:0;background:none;color:var(--mut);cursor:pointer;float:right;font:inherit;font-size:13px;margin-top:14px}
.link{background:none;border:0;color:var(--route);font:inherit;font-weight:600;cursor:pointer;padding:8px 0}
.photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.photos img{width:60px;height:60px;object-fit:cover;border-radius:8px}
.drop{display:block;border:2px dashed var(--line);border-radius:10px;padding:14px;text-align:center;color:var(--mut);cursor:pointer;margin:0}
.drop:hover{border-color:var(--route)}
.opts{display:flex;gap:8px}.opt{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:9px;text-align:center;font-weight:600;cursor:pointer;margin:0}
.opt:has(input:checked){border-color:var(--route);background:var(--soft)}.opt input{position:absolute;opacity:0}
#calc{display:none;border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:10px}
#calc.open{display:block;animation:pop .3s}
.tabs{display:flex;gap:6px;margin-bottom:8px}.tabs button{flex:1;border:1.5px solid var(--line);background:none;color:inherit;border-radius:8px;padding:6px;font:inherit;font-weight:600;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.it{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.it b{flex:1;font-weight:600}.it small{color:var(--mut);display:block;font-weight:400}
.q button{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);background:none;color:inherit;font-size:16px;cursor:pointer}
.q span{display:inline-block;min-width:22px;text-align:center}
.tot{margin-top:10px;background:var(--ink);color:var(--bg);border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;font-weight:600}
.cta{width:100%;margin-top:18px;border:0;border-radius:12px;background:var(--tape);color:#0F1F3D;font:800 17px inherit;font-family:inherit;padding:15px;cursor:pointer}
.ok{display:none;text-align:center;padding:20px 0}.ok.show{display:block;animation:pop .4s}
@media (max-width:900px){.wrap{grid-template-columns:1fr}form{position:static;order:-1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* v2.13.0: red de ciudades con camiones en marcha mientras el mapa está vacío */
#idle{transition:opacity .45s ease,visibility .45s}
#idle.off{opacity:0;visibility:hidden}
.idl-r{fill:none;stroke:var(--route);stroke-width:1.5;stroke-dasharray:3 5;opacity:.5;animation:idlflow 1.8s linear infinite}
@keyframes idlflow{to{stroke-dashoffset:-16}}
.idl-c{fill:var(--route)}
.idl-p{fill:var(--route);opacity:0;transform-box:fill-box;transform-origin:center;animation:idlpulse 2.6s ease-out infinite}
@keyframes idlpulse{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
.idl-t{font:700 9.5px "Bricolage Grotesque",system-ui,sans-serif;fill:var(--mut);paint-order:stroke;stroke:var(--card);stroke-width:3px}
.idl-k .kb{fill:var(--tape)}.idl-k .kc{fill:var(--route)}.idl-k .kw{fill:var(--ink)}
.idl-k{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
@media (prefers-reduced-motion:reduce){.idl-r,.idl-p{animation:none}.idl-p{opacity:0}}

/* v2.13.0: comprobación «no soy un robot» (paso 4) */
.human{margin:14px 0 4px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.hm-b{display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;font-weight:700;min-width:230px}
.hm-b:has(input:checked){border-color:var(--green);background:var(--soft)}
.hm-b input{width:22px;height:22px;margin:0;accent-color:var(--route)}
.hm-b svg{margin-left:auto;color:var(--mut);flex:none}
.hm-s{font-size:13px;font-weight:700;color:var(--mut)}.hm-s.good{color:var(--green)}.hm-s.bad{color:var(--err,#B3261E)}
#tsw{min-height:65px}