/* Ruta Propia: app de viajes. Claro y cálido; coral de marca, verde azulado de apoyo. Letra mínima 12 px. */
:root{--w:#fff;--bg:#FBF6EF;--tx:#1F2430;--mu:#5B616E;--ln:rgba(31,36,48,.12);--co:#C8374B;--co2:#A52A3C;--te:#0B6468;--sand:#F1E7D8;--r:20px}
.vj-app{background:var(--bg);font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--tx)}
.vj-app .a-scr{padding:16px 16px 28px}
.vj-app .a-h1{font:700 28px/1.12 Georgia,"Times New Roman",serif;letter-spacing:-.01em}
.vj-app .a-h2{font-size:18px}
.vj-app .a-k{color:var(--mu)}
.vj-app .a-mu{color:var(--mu)}
.vj-app .a-bar{background:var(--w);border-top:1px solid var(--ln);padding:6px 4px calc(8px + env(safe-area-inset-bottom));justify-content:space-around}
.vj-app .a-bar button{font-size:12px;font-weight:600;padding:4px 6px;min-width:56px}
.vj-app .a-bar button.on{color:var(--co2)}.vj-app .a-bar button.on svg{stroke:var(--co)}
.vj-brand,.vj-side{display:none}
.vj-d{display:none!important}
.a-btn{background:var(--co);color:#fff;font-size:15px}.a-btn:hover{background:var(--co2)}
.a-btn.ghost{background:var(--w);color:var(--tx);border:1px solid var(--ln)}.a-btn.ghost:hover{background:var(--sand)}
.a-btn.sm{width:auto;padding:10px 18px;font-size:14px}
.vj-app :focus-visible{outline:3px solid var(--te);outline-offset:2px}
.a-chip{font-size:14px;padding:9px 16px;background:var(--w);color:var(--tx)}.a-chip.on{background:var(--tx);color:#fff;border-color:var(--tx)}
.a-tag{background:rgba(11,100,104,.12);color:var(--te);font-size:12px}.a-tag.ok{background:rgba(23,120,78,.14);color:#0f6a43}
.a-toast{bottom:84px;background:var(--tx);font-size:14px}
.a-sheet{background:var(--w);padding:22px 20px 26px}
.vj-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.vj-mark{width:34px;height:34px;border-radius:11px;background:var(--co);display:grid;place-items:center;flex:none}
.vj-mark svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vj-top b{font:700 18px Georgia,serif}
.vj-sub{margin:6px 0 14px;font-size:15px;color:var(--mu)}
.vj-search{display:flex;align-items:center;gap:10px;background:var(--w);border:1px solid var(--ln);border-radius:999px;padding:6px 6px 6px 16px;box-shadow:0 6px 18px rgba(31,36,48,.07);margin-bottom:12px}
.vj-search svg{width:20px;height:20px;stroke:var(--mu);fill:none;stroke-width:2;flex:none}
.vj-search input{flex:1;min-width:0;border:0;outline:0;font:600 15px inherit;font-family:inherit;background:none;color:var(--tx);height:40px}
.vj-search input::placeholder{color:var(--mu)}
.vj-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
.vj-card{position:relative;background:var(--w);border-radius:var(--r);overflow:hidden;border:1px solid var(--ln);text-align:left;display:block;width:100%;transition:transform .2s,box-shadow .2s}
.vj-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(31,36,48,.14)}
.vj-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.vj-card .in{padding:12px 14px 14px}
.vj-card h3{font-size:17px;font-weight:700}
.vj-card p{font-size:14px;color:var(--mu);margin-top:2px}
.vj-card .pr{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:14px}
.vj-heart{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.2);z-index:2;transition:transform .15s}
.vj-heart:active{transform:scale(.88)}
.vj-heart svg{width:20px;height:20px;fill:none;stroke:var(--tx);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vj-heart.on svg{fill:var(--co);stroke:var(--co)}
.vj-sk{height:250px;border-radius:var(--r);background:linear-gradient(100deg,#EFE5D6 30%,#F8F1E6 50%,#EFE5D6 70%);background-size:200% 100%;animation:vjsk 1.1s linear infinite}
@keyframes vjsk{to{background-position:-200% 0}}
.vj-empty{text-align:center;padding:36px 16px;background:var(--w);border:1px dashed rgba(31,36,48,.25);border-radius:var(--r);margin-top:16px}
.vj-empty svg{width:44px;height:44px;stroke:var(--co);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vj-empty h3{font:700 20px Georgia,serif;margin:10px 0 6px}.vj-empty p{color:var(--mu);font-size:15px;margin-bottom:16px}
.vj-empty .a-btn{width:auto;display:inline-flex;padding:12px 22px}
/* destino */
.vj-hero{position:relative;border-radius:var(--r);overflow:hidden;min-height:300px;display:flex;align-items:flex-end}
.vj-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vj-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(10,10,14,.72))}
.vj-hero .tx{position:relative;z-index:1;padding:18px;color:#fff}
.vj-hero h1{font:700 34px/1.05 Georgia,serif}.vj-hero p{font-size:15px;margin-top:4px}
.vj-hero .back{position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.95);width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.vj-hero .back svg{width:20px;height:20px;stroke:var(--tx);fill:none;stroke-width:2}
.vj-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.vj-facts div{background:var(--w);border:1px solid var(--ln);border-radius:16px;padding:12px}
.vj-facts b{display:block;font-size:17px}.vj-facts span{font-size:12px;color:var(--mu)}
.vj-dd{display:grid;gap:16px}
.vj-dd h2{margin:6px 0 8px}
.vj-li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--ln);font-size:15px}.vj-li:last-child{border:0}
.vj-li i{width:8px;height:8px;border-radius:50%;background:var(--co);margin-top:7px;flex:none}
.vj-acts{display:grid;gap:10px;margin-top:14px}
/* itinerario */
.vj-days{display:flex;gap:8px;margin:12px 0}
.vj-days button{flex:1;max-width:190px;padding:10px 6px;border-radius:14px;border:1px solid var(--ln);background:var(--w);font-weight:700;font-size:14px;text-align:center}
.vj-days button small{display:block;font-size:12px;font-weight:600;color:var(--mu)}
.vj-days button.on{background:var(--tx);color:#fff;border-color:var(--tx)}.vj-days button.on small{color:#e6e1d8}
.vj-it{display:block}
.vj-map{position:relative;height:230px;border-radius:var(--r);overflow:hidden;background:#EDE3D2;border:1px solid var(--ln);margin-bottom:14px}
.vj-map svg{position:absolute;inset:0;width:100%;height:100%}
.vj-in2{position:absolute;inset:0 0 38px 0}
.vj-map .cap{position:absolute;left:0;right:0;bottom:0;height:38px;display:flex;align-items:center;padding:0 12px;background:#fff;border-top:1px solid var(--ln);font-size:13px;font-weight:600;color:#3a2f2a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vj-pin{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:var(--co);border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.3);transition:scale .2s,background .2s;z-index:1;color:#fff;font-size:14px;font-weight:800}
.vj-pin.on{scale:1.25;background:var(--tx);z-index:3}
.vj-step{display:flex;gap:12px;width:100%;text-align:left;padding:12px;border-radius:16px;background:var(--w);border:1px solid var(--ln);margin-bottom:10px;transition:border-color .2s,box-shadow .2s}
.vj-step.on{border-color:var(--co);box-shadow:0 0 0 2px rgba(200,55,75,.18)}
.vj-step .n{width:30px;height:30px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}.vj-step.on .n{background:var(--tx);color:#fff}
.vj-step b{font-size:15px;display:block}.vj-step p{font-size:14px;color:var(--mu);margin-top:2px}
.vj-step .m{font-size:12px;font-weight:700;color:var(--te);margin-top:4px;display:block}
.vj-bar2{display:flex;gap:10px;margin-top:6px}.vj-bar2 .a-btn{flex:1}
.vj-tot{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--sand);border-radius:16px;margin:12px 0;font-size:15px}
.vj-tot b{font-size:19px}
/* chat */
.vj-chat{display:flex;flex-direction:column;height:100%;max-width:760px;margin:0 auto}
.vj-msgs{flex:1;overflow-y:auto;padding:4px 2px 10px;display:flex;flex-direction:column;gap:10px;scrollbar-width:none}
.vj-m{max-width:86%;padding:11px 14px;border-radius:18px;font-size:15px;line-height:1.45;animation:vjin .25s}
@keyframes vjin{from{opacity:0;transform:translateY(8px)}}
.vj-m.bot{background:var(--w);border:1px solid var(--ln);border-bottom-left-radius:6px;align-self:flex-start}
.vj-m.me{background:var(--co);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.vj-m .a-btn{margin-top:10px;width:auto;padding:9px 16px;font-size:14px}
.vj-dots{display:inline-flex;gap:4px;padding:4px 0}.vj-dots i{width:8px;height:8px;border-radius:50%;background:var(--mu);animation:vjd 1s infinite}.vj-dots i:nth-child(2){animation-delay:.15s}.vj-dots i:nth-child(3){animation-delay:.3s}
@keyframes vjd{50%{opacity:.25;transform:translateY(-3px)}}
.vj-sug{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:6px 0}
.vj-in{display:flex;gap:8px;align-items:center;background:var(--w);border:1px solid var(--ln);border-radius:999px;padding:5px 5px 5px 16px}
.vj-in input{flex:1;min-width:0;border:0;outline:0;background:none;font:600 15px inherit;font-family:inherit;height:40px;color:var(--tx)}
.vj-in input::placeholder{color:var(--mu)}
.vj-send{width:42px;height:42px;border-radius:50%;background:var(--co);display:grid;place-items:center;flex:none}.vj-send svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* reservas */
.vj-bk{display:grid;grid-template-columns:110px 1fr;background:var(--w);border:1px solid var(--ln);border-radius:var(--r);overflow:hidden;margin-top:14px;animation:vjin .35s}
.vj-bk img{width:100%;height:100%;object-fit:cover;min-height:130px}
.vj-bk .in{padding:12px 14px;border-left:2px dashed var(--ln)}
.vj-bk b{font-size:17px}.vj-bk p{font-size:14px;color:var(--mu);margin-top:3px}
.vj-ok{text-align:center;padding:6px 4px}
.vj-ok .c{width:64px;height:64px;border-radius:50%;background:#17784E;display:grid;place-items:center;margin:0 auto 12px;animation:vjpop .4s}
.vj-ok .c svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes vjpop{from{scale:.4;opacity:0}}
.vj-spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--sand);border-top-color:var(--co);margin:10px auto 14px;animation:vjr .8s linear infinite}@keyframes vjr{to{rotate:360deg}}
.vj-sheet-l{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--ln);font-size:15px}
@media(prefers-reduced-motion:reduce){.vj-sk,.vj-dots i,.vj-spin{animation:none}.vj-m,.vj-bk,.vj-ok .c{animation:none}}
/* ordenador: barra lateral con las mismas pantallas */
@media(min-width:900px){
 .vj-app{flex-direction:row}
 .vj-app .a-bar{order:-1;flex-direction:column;justify-content:flex-start;gap:4px;width:250px;border-top:0;border-right:1px solid var(--ln);padding:22px 14px}
 .vj-brand{display:flex;align-items:center;gap:10px;padding:0 10px 18px}.vj-brand b{font:700 20px Georgia,serif}
 .vj-app .a-bar button{flex-direction:row;gap:12px;font-size:15px;padding:12px 14px;border-radius:14px;min-width:0;justify-content:flex-start;width:100%}
 .vj-app .a-bar button:hover{background:var(--sand)}.vj-app .a-bar button.on{background:#FBE9EA}
 .vj-d{display:flex!important}
 .vj-side{display:block;margin-top:auto;padding:14px;border-radius:16px;background:var(--sand);font-size:13px;color:var(--mu)}.vj-side b{display:block;color:var(--tx);font-size:14px;margin-bottom:2px}
 .vj-app .a-scr{padding:28px 40px 36px}
 .vj-app .a-h1{font-size:38px}
 .vj-top.mo{display:none}
 .vj-grid{grid-template-columns:repeat(3,1fr);gap:22px}
 .vj-search{max-width:640px}
 .vj-hero{min-height:360px}.vj-hero h1{font-size:46px}
 .vj-dd{grid-template-columns:1.3fr 1fr;gap:32px;margin-top:6px}
 .a-scr[data-s=itinerario]{display:flex;flex-direction:column;overflow:hidden}
 .vj-it{display:grid;grid-template-columns:minmax(380px,470px) 1fr;gap:26px;flex:1;min-height:0}
 .vj-itl{overflow-y:auto;padding-right:8px;min-height:0;scrollbar-width:thin}
 .vj-map{height:100%;order:2;margin:0;min-height:0}
 .a-toast{bottom:28px}
 .a-sheet{left:50%;right:auto;bottom:auto;top:50%;width:460px;border-radius:24px;transform:translate(-50%,-40%) scale(.96);opacity:0;pointer-events:none;transition:transform .3s,opacity .3s}
 .a-sheet.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
 .vj-bk{grid-template-columns:180px 1fr;max-width:760px}
}
@media(min-width:900px) and (max-height:800px){.vj-hero{min-height:300px}.vj-app .a-bar{padding-top:16px}.vj-app .a-bar button{padding:10px 14px}}
@media(min-width:620px) and (max-width:899px){.vj-grid{grid-template-columns:repeat(2,1fr)}}
