/* ============================================================
   ATLAS CHILE — barra de ruta · viaje (gifs) · Toby guía
   ============================================================ */

/* ---------- BARRA DE RUTA (pie de sección) ---------- */
.sv-route{
  position:fixed; left:0; right:0; bottom:0; z-index:45; pointer-events:none;
  padding:0 clamp(20px,4vw,52px) clamp(54px,8vh,70px);
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
  opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--ease), transform .6s var(--cinema);
}
.sv-route.show{ opacity:1; transform:none; }
.route-next{
  pointer-events:auto; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:16px;
  background:var(--glass-2); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:6px; padding:13px 18px;
  transition:transform .5s var(--cinema), border-color .3s;
}
.route-next:hover{ transform:translateY(-3px); border-color:var(--gold); }
.route-next .mode{ width:40px; height:40px; border-radius:8px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--gold) 16%, transparent); color:var(--gold-lt); flex-shrink:0; }
.route-next .mode svg{ width:21px; height:21px; }
.route-next .meta{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.route-next .meta .lbl{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan); }
.route-next .meta .dst{ font-family:var(--f-display); font-weight:600; font-size:1.1rem; letter-spacing:-.01em;
  display:flex; align-items:center; gap:8px; }
.route-next .meta .dst em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--gold-lt); }
.route-next .meta .sub{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.08em; color:var(--paper-dim); }
.route-next .meta .sub b{ color:var(--paper-mut); font-weight:500; }
.route-next .arr{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--paper-mut); margin-left:6px;
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--cinema); flex-shrink:0; }
.route-next:hover .arr{ border-color:var(--gold); color:var(--gold); transform:translateX(3px); }
.route-next .arr svg{ width:14px; height:14px; }

.route-orbit{ pointer-events:auto; }

/* ---------- OVERLAY DE VIAJE ---------- */
#travel{ z-index:42; background:#000; }
.travel-gif{ position:absolute; inset:0; background-position:center; background-size:cover;
  filter:saturate(1.05); transform:scale(1.08); animation:travelPush 6s linear infinite alternate; }
@keyframes travelPush{ from{ transform:scale(1.08);} to{ transform:scale(1.16);} }

.travel-tint{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,6,12,.5) 0%, transparent 30%, transparent 50%, rgba(4,6,12,.92) 100%); }

/* tarjeta de progreso de ruta */
.travel-panel{ position:absolute; left:50%; bottom:clamp(60px,12vh,120px); transform:translateX(-50%);
  width:min(92vw,720px); }
.tp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.tp-mode{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono);
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); }
.tp-mode svg{ width:18px; height:18px; }
.tp-eta{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; color:var(--paper-mut); }
.tp-eta b{ color:var(--paper); }

/* línea de progreso geográfica */
.tp-line{ position:relative; height:46px; margin:4px 0 14px; }
.tp-rail{ position:absolute; top:50%; left:0; right:0; height:2px; transform:translateY(-50%);
  background:var(--line); border-radius:2px; overflow:hidden; }
.tp-fill{ position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt));
  box-shadow:0 0 14px var(--gold); transition:right .1s linear; }
.tp-end{ position:absolute; top:50%; transform:translate(-50%,-50%); width:11px; height:11px; border-radius:50%;
  background:var(--ink); border:2px solid var(--paper-dim); }
.tp-end.a{ left:0; } .tp-end.b{ left:100%; border-color:var(--gold); }
.tp-end.b.reached{ background:var(--gold); box-shadow:0 0 16px var(--gold); }
.tp-veh{ position:absolute; top:50%; left:0; transform:translate(-50%,-50%); color:var(--gold-lt);
  filter:drop-shadow(0 0 10px var(--gold)); transition:left .1s linear; }
.tp-veh svg{ width:26px; height:26px; display:block; }
.tp-labels{ display:flex; justify-content:space-between; font-family:var(--f-mono);
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; }
.tp-labels .from{ color:var(--paper-dim); }
.tp-labels .to{ color:var(--gold-lt); }
.tp-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:16px;
  font-family:var(--f-mono); font-size:.66rem; color:var(--paper-mut); }
.tp-dist b{ color:var(--paper); font-size:1.3rem; font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; }
.tp-quip{ color:var(--paper-mut); font-style:italic; font-family:var(--f-serif); font-size:.92rem; }

/* ---------- TOBY — guía ---------- */
.toby{ position:fixed; z-index:48; pointer-events:none;
  left:clamp(18px,3.5vw,46px); bottom:clamp(50px,8vh,70px);
  display:flex; align-items:flex-end; gap:12px;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--cinema); }
.toby.show{ opacity:1; transform:none; }
.toby-av{ width:62px; height:62px; flex-shrink:0; position:relative; }
.toby-svg{ width:100%; height:100%; overflow:visible; }
.toby-svg .t-body{ animation:tBreathe 3.6s var(--ease) infinite; transform-box:fill-box; transform-origin:50% 90%; }
.toby-svg .t-head{ animation:tBob 3.6s var(--ease) infinite; transform-box:fill-box; transform-origin:50% 90%; }
.toby-svg .t-tail{ animation:tWag .7s var(--ease) infinite; transform-box:fill-box; transform-origin:10% 90%; }
.toby-svg .t-ear{ animation:tEar 3.2s var(--ease) infinite; transform-box:fill-box; transform-origin:50% 0; }
@keyframes tBreathe{ 0%,100%{ transform:scaleY(1);} 50%{ transform:scaleY(1.03) translateY(-1px);} }
@keyframes tBob{ 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-1.5px) rotate(1.5deg);} }
@keyframes tWag{ 0%,100%{ transform:rotate(-18deg);} 50%{ transform:rotate(22deg);} }
@keyframes tEar{ 0%,100%{ transform:rotate(0);} 50%{ transform:rotate(-7deg);} }

/* pointer-events:none — la burbuja flotaba SOBRE los CTAs en móvil y se
   comía los taps (elementFromPoint devolvía el texto de Toby, no el botón) */
.toby-bubble{ pointer-events:none; max-width:min(60vw,340px); margin-bottom:10px;
  background:var(--glass-2); backdrop-filter:blur(10px); border:1px solid var(--line);
  border-left:2px solid var(--gold); border-radius:4px 10px 10px 4px; padding:11px 15px;
  position:relative; transition:opacity .4s var(--ease), transform .5s var(--cinema); }
.toby-bubble .who{ font-family:var(--f-mono); font-size:.54rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:4px; display:flex; align-items:center; gap:7px; }
.toby-bubble .who::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.toby-bubble p{ font-size:.86rem; line-height:1.5; color:var(--paper); text-wrap:pretty; }
.toby-bubble.swap{ opacity:0; transform:translateY(6px); }

/* Toby en modo conducción (durante viaje) */
.toby.driving{ left:50%; bottom:auto; top:clamp(70px,16vh,150px); transform:translateX(-50%); }
.toby.driving .toby-av{ width:72px; height:72px; }
.toby.driving .toby-svg .t-body{ animation:tBounce .34s ease-in-out infinite; }
.toby.driving .toby-svg .t-head{ animation:tBounce .34s ease-in-out infinite; }
.toby.driving .toby-svg .t-tail{ animation:tWag .3s ease-in-out infinite; }
@keyframes tBounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-2.5px);} }

@media (max-width:860px){
  .toby{ left:12px; bottom:96px; }
  .toby-bubble{ max-width:62vw; }
  .sv-route{ flex-direction:column; align-items:stretch; }
  .route-orbit{ align-self:flex-end; }
  .travel-panel{ width:94vw; }
}
@media (max-width:560px){
  .toby-av{ width:50px; height:50px; }
}