/* Fondo limpio independiente; el panel y los hitos siguen siendo HTML/SVG.
   Conserva los controles, sonidos y transiciones del Journey existente. */
.scene-approved{overflow:hidden;display:block}
.control-icon[hidden]{display:none!important}
.route-stop-entrega .node-copy{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);width:100px;text-align:center}
.scene-shade{background:linear-gradient(90deg,rgba(0,0,0,.035),transparent 58%,rgba(0,0,0,.1))}
.panel-inner{padding-left:48px;padding-right:24px}
.state-panel h1{font-size:clamp(32px,2.8vw,46px);line-height:1;letter-spacing:-.025em;text-wrap:balance}
.state-kicker{line-height:1.5;letter-spacing:.18em}
.state-intro{font-size:clamp(14px,1.08vw,17px);line-height:1.48}
.order-step{display:block;padding:12px 0}
.order-step h2{font-size:clamp(20px,1.6vw,25px);line-height:1.14;text-wrap:pretty}
.order-step p{font-size:clamp(12px,.96vw,15px);line-height:1.4;overflow-wrap:anywhere}
.state-stack{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c5b393 transparent}
.state-panel{display:none;position:relative;inset:auto;min-height:100%}
.state-panel.is-active{display:flex}
.state-content{min-width:0;padding-bottom:6px}
.panel-actions{flex-shrink:0;gap:10px}
.panel-actions .cta{gap:7px;padding:10px;font-size:13px}
.panel-actions .cta-icon{width:20px;min-width:20px}
.tracking-summary{flex-shrink:0;padding:12px 14px}
.web-alert-toggle{position:static;margin-top:9px}
.tracking-summary strong,.tracking-products p,.state-intro{overflow-wrap:anywhere}
.story-copy{padding:18px 0}
.story-copy p{font-size:clamp(16px,1.16vw,20px);line-height:1.55}

@media(min-width:1051px){
 .journey-shell{grid-template-columns:minmax(0,1fr) max(300px,calc(31% - 100px))}
 .order-step{padding:8px 0}
 .state-panel h1{font-size:clamp(32px,2.65vw,46px)}
}
@media(max-height:760px) and (min-width:801px){
 .panel-inner{padding-top:24px;padding-bottom:20px}
 .state-panel h1{font-size:clamp(34px,3vw,48px)}
 .state-intro{font-size:13px;margin-bottom:10px}
 .order-step{padding:9px 0;grid-template-columns:36px minmax(0,1fr);gap:10px}
 .order-step .step-icon{width:34px;height:34px}
 .order-step h2{font-size:21px}
 .order-step p{font-size:12px}
 .state-kicker{margin-bottom:9px}
}
@media(max-width:1050px) and (min-width:801px){
 .journey-shell{grid-template-columns:minmax(0,1fr) 300px}
 .panel-inner{padding-left:48px;padding-right:22px}
 .state-panel h1{font-size:34px}
}
@media(max-width:800px){
 html,body{height:auto;min-height:100%;overflow-x:hidden}
 .journey-visual{height:clamp(350px,80vw,580px);min-height:0}
 .journey-panel,.panel-inner{height:auto;min-height:0}
 .panel-inner{padding:30px max(22px,env(safe-area-inset-right)) 30px max(22px,env(safe-area-inset-left))}
 .state-stack{min-height:0;overflow:visible}
 .state-panel{min-height:0}
 .state-panel h1{font-size:clamp(35px,7.2vw,48px);max-width:620px}
 .state-intro{font-size:15px}
 .order-step h2{font-size:23px}
 .order-step p{font-size:14px}
 .panel-actions{margin-top:24px}
 .route-stop .node-copy{position:absolute;top:100%;left:50%;transform:translate(-50%,7px);text-align:center;white-space:normal;width:88px}
 .node-copy small{font-size:9px}
 .node-copy strong{font-size:15px;line-height:1}
 .scene-controls{left:14px;right:auto;top:14px;bottom:auto;transform:none;width:auto}
 .scene-control{height:40px;min-width:0;padding:0 12px;flex:none}
 .control-label{font-size:15px}
 .fullscreen-control{top:14px;right:14px}
 .tracking-summary{padding-right:14px}
}
@media(max-width:420px){
 .node-copy strong{font-size:13px}
 .route-stop .node-copy{width:68px}
 .node-wrap{width:42px;height:42px}
 .node-marker{width:36px;height:36px}
 .route-stop.is-active .node-marker{width:40px;height:40px}
 .node-icon svg{width:18px;height:18px}
}

/* Keep the rider clear and separate the interactive route from the streets. */
.route-stop-ruta{left:52%;top:59%}
.route-stop-ruta .node-copy{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);width:106px;text-align:center}
.route-stop .node-copy strong,.route-stop .node-copy small{
 text-shadow:-1px -1px 0 #06100e,1px -1px 0 #06100e,-1px 1px 0 #06100e,1px 1px 0 #06100e,2px 2px 0 #06100e,3px 3px 0 rgba(0,0,0,.95),0 0 7px #000,0 2px 13px #000;
}
.route-svg:not([data-aligned="true"]){visibility:hidden}
.route-svg path{vector-effect:non-scaling-stroke}
.route-casing{fill:none;stroke:rgba(3,16,16,.88);stroke-width:7px;stroke-linecap:round;stroke-linejoin:round}
.route-halo{stroke:rgba(255,194,54,.08);stroke-width:9px;filter:none}
.route-base{stroke:rgba(224,190,107,.42);stroke-width:2.35px;filter:none}
.route-progress{stroke:#ff7a45;stroke-width:3.15px;filter:drop-shadow(0 0 3px rgba(255,122,69,.34))}
.route-flow{stroke:#fff3c4;stroke-width:2.6px;stroke-dasharray:26 64;filter:drop-shadow(0 0 2px rgba(255,229,158,.34));opacity:.38;animation:journeyFlow 1.2s linear infinite}
@keyframes journeyFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-90}}
.route-brake,.route-speed{display:none}
@media(max-width:800px){
 .route-stop-ruta{left:51%;top:59%}
 .route-stop-ruta .node-copy{width:68px}
 .route-stop-horneado .node-copy{top:auto;bottom:100%;transform:translate(-50%,-7px)}
 .panel-actions .cta{font-size:15px;min-height:54px}
}
@media(prefers-reduced-motion:reduce){.route-flow{animation:none}}

/* Restore the original brand asset; only the inner icon beats on hover. */
.pizza-brand{position:absolute;left:2.2%;top:67.5%;width:31.5%;max-width:360px;height:auto;z-index:1;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.85))}
#journey .route-stop .node-orbit{display:none!important;animation:none!important}
.route-stop .node-marker,.route-stop .node-icon{animation:none!important}
.route-stop .node-marker{transition:background .28s ease,border-color .28s ease,box-shadow .28s ease}
.route-stop .node-marker,.route-stop:hover .node-marker,.route-stop:focus-visible .node-marker{transform:none}
.route-stop.is-active .node-marker,.route-stop.is-active:hover .node-marker,.route-stop.is-active:focus-visible .node-marker{transform:rotate(-45deg)}
.route-stop .node-icon,.route-stop:hover .node-icon,.route-stop:focus-visible .node-icon{transform:none;transition:none}
.route-stop.is-active .node-icon,.route-stop.is-active:hover .node-icon,.route-stop.is-active:focus-visible .node-icon{transform:rotate(45deg)}
.route-stop:hover .node-icon svg,.route-stop:focus-visible .node-icon svg{transform-origin:center;transform-box:fill-box;animation:journeyIconBeat .95s ease-in-out infinite}
@keyframes journeyIconBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.route-stop .node-icon svg{animation:none!important}}