/* Jornada ilustrativa: componente isolado da navegação e das unidades. */
.journey{font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;background:#fff;color:#031521}
.journey-heading{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:8%;margin-bottom:40px}
.journey .journey-heading h2{margin:22px 0 0;font-weight:500;line-height:1.08;letter-spacing:-.045em}
.journey .journey-heading h2 span{color:#087AFF}
.journey-intro{font-size:18px;line-height:1.75;color:#536b7a;max-width:460px;margin:0 0 5px}
.journey-experience{overflow:hidden;border:1px solid #DCE7ED;border-radius:24px;background:#fff}
.journey-scene{background:radial-gradient(ellipse at 50% 75%,#fff 10%,#F3F8FB 70%,#EDF4F8 100%);padding:24px 28px 18px;overflow:hidden;position:relative}
.journey-scene-top{display:flex;align-items:center;justify-content:space-between;min-height:32px;gap:16px}
.journey-scene-top>span{font-size:10px;font-weight:600;letter-spacing:1.6px;color:#587181;display:flex;align-items:center;gap:10px}
.journey-scene-top i{width:3px;height:3px;border-radius:50%;background:#087AFF}
.journey-pause{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #CCDCE5;border-radius:50%;background:transparent;color:#24485E;cursor:pointer}
.journey [hidden]{display:none!important}
.journey-play-glyph{display:none}.journey-pause[aria-pressed="true"] .journey-pause-glyph{display:none}.journey-pause[aria-pressed="true"] .journey-play-glyph{display:block}
.journey button:focus-visible{outline:2px solid #087AFF;outline-offset:4px}
.journey-illustration{display:block;width:100%;height:auto;max-height:420px;margin:6px auto 0;overflow:hidden}
.journey-person,.journey-connection,.journey-energy-flow,.journey-charge-indicator{opacity:0}
.journey[data-step="1"] .journey-person,.journey[data-step="1"] .journey-connection,.journey[data-step="2"] .journey-connection,.journey[data-step="2"] .journey-charge-indicator,.journey[data-step="2"] .journey-energy-flow{opacity:1}
.journey[data-step="1"] .journey-resting-cable,.journey[data-step="2"] .journey-resting-cable{opacity:0}
.journey.is-enhanced[data-step="0"] .journey-car{animation:journey-arrive 2.2s cubic-bezier(.2,.65,.3,1) both}
.journey.is-enhanced[data-step="1"] .journey-cable{stroke-dasharray:100;animation:journey-connect 1.3s ease-out both}
.journey.is-enhanced[data-step="1"] .journey-person{animation:journey-person-in .7s ease-out both}
.journey.is-enhanced[data-step="2"] .journey-energy-flow{animation:journey-flow 1.7s linear infinite}
.journey.is-enhanced[data-step="2"] .journey-battery-level{animation:journey-charge 6.5s ease-in-out both}
.journey.is-enhanced[data-step="3"] .journey-car{animation:journey-depart 4.2s cubic-bezier(.55,.05,.75,.5) both}
.journey.is-enhanced[data-step="3"] .journey-person{animation:journey-person-out 1.4s ease-out both}
.journey.is-enhanced[data-step="3"] .journey-connection{animation:journey-unplug .6s ease-out both}
.journey.is-enhanced .journey-illustration *{animation-play-state:var(--journey-play-state,running)!important}
.journey.is-paused,.journey.is-out-of-view{--journey-play-state:paused}
.journey-scene-caption{display:flex;justify-content:space-between;gap:12px;color:#738C9C;font-size:11px;line-height:1.5;margin-top:4px}
.journey-status{color:#3A6178}
.journey-navigation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #DCE7ED;border-bottom:1px solid #DCE7ED;padding:0 28px;gap:22px}
.journey-navigation button{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;padding:20px 0;border:0;background:transparent;color:#657C8B;font:inherit;font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap}
.journey-navigation button span{font-size:11px;letter-spacing:.4px;color:#8CA1AE}
.journey-navigation button[aria-pressed="true"]{color:#087AFF;font-weight:600}
.journey-navigation button[aria-pressed="true"] span{color:#087AFF}
.journey-navigation button:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#087AFF;opacity:0}
.journey-navigation button[aria-pressed="true"]:after{opacity:1}
.journey-copy{padding:32px 36px 36px}
.journey-copy-panel{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7%}
.journey-copy-panel+ .journey-copy-panel{margin-top:28px}
.journey.is-enhanced .journey-copy-panel{margin:0;min-height:88px}
.journey-copy-panel h3{font-size:clamp(23px,2.3vw,32px);font-weight:500;line-height:1.3;letter-spacing:-.025em;margin:0}
.journey-copy-panel p{font-size:17px;line-height:1.75;color:#536b7a;margin:0;max-width:490px}
.journey-footnote{font-size:12px;line-height:1.8;color:#6E8391;margin:20px 0 0;max-width:820px}
@keyframes journey-arrive{from{transform:translateX(-700px)}to{transform:translateX(0)}}
@keyframes journey-connect{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes journey-person-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@keyframes journey-flow{to{stroke-dashoffset:-44}}
@keyframes journey-charge{from{width:12px}to{width:41px}}
@keyframes journey-depart{0%,36%{transform:translateX(0)}100%{transform:translateX(850px)}}
@keyframes journey-unplug{from{opacity:1}to{opacity:0}}
@keyframes journey-person-out{0%,35%{opacity:1}100%{opacity:0}}
@media(max-width:700px){
.journey-heading{grid-template-columns:1fr;gap:22px;margin-bottom:28px}
.journey-intro{font-size:16px;line-height:1.7}
.journey-experience{border-radius:18px}
.journey-scene{padding:16px 12px 12px}
.journey-scene-top>span{font-size:8px;letter-spacing:1px;gap:7px}
.journey-illustration{margin-top:14px;min-height:175px}
.journey-scene-caption{font-size:10px;gap:8px}
.journey-navigation{padding:0 12px;gap:8px}
.journey-navigation button{flex-direction:column;gap:5px;font-size:12px;padding:14px 0;white-space:normal;line-height:1.4}
.journey-navigation button span{font-size:10px}
.journey-copy{padding:24px 22px 28px}
.journey-copy-panel{grid-template-columns:1fr;align-content:start;gap:12px}
.journey.is-enhanced .journey-copy-panel{min-height:150px}
.journey-copy-panel h3{font-size:24px}
.journey-copy-panel p{font-size:16px;line-height:1.7}
.journey-footnote{font-size:11px;margin-top:16px}
}
@media(prefers-reduced-motion:reduce){.journey.is-enhanced .journey-illustration *{animation:none!important}.journey[data-step="3"] .journey-connection,.journey[data-step="3"] .journey-person{opacity:0}.journey-pause{display:none!important}}

/* Amostra wireframe aprovada: camadas de imagem independentes sobre piso vetorial. */
.journey-scene{background:radial-gradient(ellipse at 50% 85%,#073253 0%,#041D31 48%,#031521 85%)}
.journey-scene-top>span{color:#A4C2D4}
.journey-pause{border-color:#335B73;color:#C6E7F4}
.journey-scene-caption{color:#8BADBF}.journey-status{color:#ABD9EE}
.journey-illustration{max-height:none}
.journey.is-enhanced[data-step="1"] .journey-cable-highlight{stroke-dasharray:100;animation:journey-connect 1.3s ease-out both}
.journey[data-step="2"] .journey-person{opacity:1}
.journey.is-enhanced[data-step="2"] .journey-battery-level{animation-name:journey-wire-charge}
@keyframes journey-arrive{from{transform:translateX(1500px)}to{transform:translateX(0)}}
@keyframes journey-depart{0%,36%{transform:translateX(0)}100%{transform:translateX(-1800px)}}
@keyframes journey-wire-charge{from{width:12px}to{width:60px}}
@media(max-width:700px){.journey-scene{padding:16px 8px 12px}.journey-illustration{min-height:0;margin-top:14px}.journey-scene-caption{padding:0 4px}}

/* Bateria com maior presença e separação do teto do carro. */
.journey.is-enhanced[data-step="2"] .journey-battery-level{animation-duration:1.8s}
.journey.is-enhanced[data-step="2"] .journey-battery-sweep{animation:journey-battery-sweep 1s linear infinite}
@keyframes journey-battery-sweep{from{transform:translateX(0)}to{transform:translateX(60px)}}
@media(max-width:700px){.journey-battery-body{transform:matrix(3,0,0,3,-2056.5,-494)}}