.tracking-body { min-height: 100vh; background: radial-gradient(circle at 50% -10%, rgba(217,154,24,.13), transparent 34%), #080705; }
.tracking-header { height: 78px; display: flex; align-items: center; justify-content: space-between; width: min(1180px, calc(100% - 40px)); margin: 0 auto; border-bottom: 1px solid rgba(255,213,111,.12); }
.back-menu { color: #cfc5b6; font-size: 12px; font-weight: 700; }
.back-menu:hover { color: var(--gold-2); }
.tracking-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 70px 0 100px; }
.tracking-search { max-width: 650px; margin: 50px auto; padding: 42px; text-align: center; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg, #18130d, #0b0907); box-shadow: var(--shadow); }
.tracking-search h1 { margin: 12px 0; font: 800 clamp(36px, 6vw, 58px)/1.05 var(--font-display); }
.tracking-search h1 em { font-style: normal; color: var(--gold-2); }
.tracking-search > p { color: var(--muted); line-height: 1.7; font-size: 12px; }
.tracking-search form { display: grid; gap: 5px; margin-top: 25px; text-align: left; }
.tracking-search button { margin-top: 12px; border: 0; border-radius: 13px; padding: 14px; color: #180f03; background: linear-gradient(135deg, #f4c84d, #b96f08); font-weight: 900; text-transform: uppercase; letter-spacing: .07em; cursor: pointer; }
.tracking-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.tracking-topline span:first-child { color: var(--gold-2); text-transform: uppercase; letter-spacing: .18em; font-size: 9px; font-weight: 900; }
.tracking-topline h1 { margin: 6px 0 0; font: 800 34px/1 var(--font-display); }
.live-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(34,197,94,.28); background: rgba(34,197,94,.08); color: #76e89a !important; letter-spacing: .08em !important; }
.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #34d06c; box-shadow: 0 0 14px #34d06c; animation: livePulse 1.4s infinite; }
@keyframes livePulse { 50% { opacity: .35; transform: scale(.8); } }
.tracking-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr); gap: 20px; align-items: start; }
.status-card, .order-summary-card { border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(150deg, #17120c, #0c0a07); box-shadow: 0 24px 60px rgba(0,0,0,.34); overflow: hidden; }
.status-hero { padding: 32px; border-bottom: 1px solid rgba(255,255,255,.07); background: radial-gradient(circle at 80% 0, rgba(217,154,24,.13), transparent 42%); }
.status-hero > span { color: var(--gold-2); text-transform: uppercase; letter-spacing: .18em; font-size: 9px; font-weight: 900; }
.status-hero h2 { margin: 10px 0 9px; font: 800 clamp(28px, 4vw, 44px)/1.08 var(--font-display); }
.status-hero p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 12px; }
.order-timeline { padding: 25px 32px 34px; }
.timeline-step { position: relative; display: grid; grid-template-columns: 42px 1fr auto; gap: 13px; align-items: center; min-height: 72px; }
.timeline-step:not(:last-child)::after { content:""; position: absolute; left: 20px; top: 52px; width: 2px; height: 39px; background: rgba(255,255,255,.09); }
.timeline-step.done:not(:last-child)::after { background: linear-gradient(var(--gold), rgba(217,154,24,.2)); }
.timeline-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: #15110c; color: #6e665b; font-size: 17px; }
.timeline-step.done .timeline-icon { color: #180f03; border-color: #f2c246; background: linear-gradient(135deg, #f5ca51, #b9700a); box-shadow: 0 0 24px rgba(217,154,24,.18); }
.timeline-step.current .timeline-icon { animation: currentGlow 1.8s infinite; }
@keyframes currentGlow { 50% { box-shadow: 0 0 34px rgba(247,201,79,.45); } }
.timeline-copy b { display: block; font-size: 12px; }
.timeline-copy small { display: block; margin-top: 5px; color: #746c61; font-size: 9px; }
.timeline-step.done .timeline-copy small { color: var(--muted); }
.timeline-time { color: #7b7368; font-size: 9px; }
.order-summary-card { padding: 24px; position: sticky; top: 20px; }
.summary-heading > span { color: var(--gold-2); text-transform: uppercase; letter-spacing: .17em; font-size: 8px; font-weight: 900; }
.summary-heading h3 { margin: 7px 0 20px; font: 800 21px/1.1 var(--font-display); }
.tracking-items { display: grid; gap: 10px; }
.tracking-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 9px; align-items: center; padding: 8px; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; background: #13100c; }
.tracking-item img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; }
.tracking-item b { display: block; font-size: 10px; }
.tracking-item small { color: var(--muted); font-size: 8px; }
.tracking-item > strong { color: var(--gold-2); font-size: 10px; }
.tracking-total { display: flex; justify-content: space-between; margin-top: 18px; padding: 15px 0; border-block: 1px solid rgba(255,255,255,.08); }
.tracking-total span { color: var(--muted); font-size: 11px; }
.tracking-total b { color: var(--gold-2); }
.tracking-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.tracking-meta div { padding: 11px; border-radius: 11px; background: #13100c; border: 1px solid rgba(255,255,255,.06); }
.tracking-meta span, .tracking-meta b { display: block; }
.tracking-meta span { color: #81796d; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.tracking-meta b { margin-top: 4px; font-size: 10px; }
.notification-button { width: 100%; margin-top: 14px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: transparent; color: var(--gold-2); font-size: 9px; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.courier-scene { position: relative; overflow: hidden; min-height: 250px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, #1d1409 0%, #100c08 70%); }
.city-silhouette { position: absolute; inset: 25px 0 72px; display: flex; align-items: end; gap: 8px; opacity: .17; padding: 0 25px; }
.city-silhouette span { flex: 1; background: #f5c84e; border-radius: 4px 4px 0 0; }
.city-silhouette span:nth-child(1) { height: 45%; }.city-silhouette span:nth-child(2) { height: 72%; }.city-silhouette span:nth-child(3) { height: 55%; }.city-silhouette span:nth-child(4) { height: 86%; }
.road { position: absolute; left: 0; right: 0; bottom: 62px; height: 68px; background: #0b0907; border-block: 1px solid rgba(255,213,111,.12); }
.road-line { position: absolute; top: 33px; left: 0; width: 200%; height: 3px; background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(247,201,79,.55) 30px 64px); animation: roadMove 1.1s linear infinite; }
@keyframes roadMove { to { transform: translateX(-64px); } }
.courier-bike { position: absolute; left: 12%; bottom: 16px; width: 125px; height: 62px; animation: bikeRide 3.4s ease-in-out infinite; }
@keyframes bikeRide { 0%,100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(calc(min(42vw, 330px))) translateY(-2px); } }
.delivery-box { position: absolute; left: 18px; top: 1px; width: 42px; height: 34px; display: grid; place-items: center; border-radius: 7px; color: #1a1003; background: linear-gradient(135deg, #f6cc52, #b97008); font-size: 18px; font-weight: 900; box-shadow: 0 0 22px rgba(247,201,79,.25); }
.rider-head { position: absolute; left: 66px; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: #d49a5f; border: 5px solid #b41c20; }
.bike-body { position: absolute; left: 45px; top: 23px; width: 55px; height: 22px; border: 6px solid #d8a02c; border-top: 0; transform: skewX(-18deg); }
.wheel { position: absolute; bottom: 0; width: 30px; height: 30px; border: 6px solid #2d2a26; border-radius: 50%; background: #080705; animation: wheelSpin .7s linear infinite; }
.wheel::after { content:""; position: absolute; inset: 7px; border-radius: 50%; background: #d99a18; }
.wheel-a { left: 35px; }.wheel-b { left: 91px; }
@keyframes wheelSpin { to { transform: rotate(360deg); } }
.courier-copy { position: absolute; left: 24px; right: 24px; bottom: 15px; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.courier-copy strong { color: var(--gold-2); font: 700 14px var(--font-display); }
.courier-copy span { color: var(--muted); font-size: 9px; text-align: right; }
.tracking-error { max-width: 520px; margin: 80px auto; text-align: center; padding: 40px; border: 1px solid rgba(226,56,46,.3); border-radius: 24px; background: #1a0d0b; }
.tracking-error > span { width: 55px; height: 55px; display: grid; place-items: center; margin: auto; border-radius: 18px; background: rgba(226,56,46,.12); color: #ef6d64; font-size: 26px; }
.tracking-error h2 { font-family: var(--font-display); }
.tracking-error p { color: var(--muted); font-size: 11px; }
.tracking-error a { display: inline-block; margin-top: 10px; color: var(--gold-2); font-weight: 800; font-size: 11px; }
@media (max-width: 860px) { .tracking-grid { grid-template-columns: 1fr; } .order-summary-card { position: static; } }
@media (max-width: 620px) { .tracking-header, .tracking-main { width: calc(100% - 24px); } .tracking-header { height: 66px; } .back-menu { font-size: 9px; } .tracking-main { padding-top: 35px; } .tracking-search { margin: 20px auto; padding: 25px 18px; } .tracking-topline { align-items: flex-start; flex-direction: column; } .status-hero, .order-timeline { padding-inline: 20px; } .timeline-step { grid-template-columns: 40px 1fr; } .timeline-time { display: none; } .courier-copy { flex-direction: column; align-items: flex-start; } .courier-copy span { text-align: left; } @keyframes bikeRide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(48vw); } } }

/* SOBERANA V9 — rastreamento */
:root{--gold:#f08b1e;--gold-2:#e8b244;--gold-3:#f6de83;--red:#981306;--red-2:#be410d;--bg:#050201;--surface:#100b07;--line:rgba(240,139,30,.24);--line-strong:rgba(246,222,131,.5)}
.tracking-body{background:radial-gradient(circle at 50% -10%,rgba(240,139,30,.17),transparent 34%),#050201}
.status-card,.order-summary-card,.tracking-search{background:linear-gradient(150deg,#160b03,#070301);border-color:rgba(240,139,30,.25)}
.status-hero{background:radial-gradient(circle at 80% 0,rgba(240,139,30,.15),transparent 44%)}
.timeline-step.done .timeline-icon{background:linear-gradient(135deg,#f6de83,#f08b1e,#9b3c09);border-color:#f6de83}
.courier-scene{background:linear-gradient(180deg,#241105,#0b0502 72%)}
.tracking-payment-wide{grid-column:1/-1}.tracking-payment-wide b{color:var(--gold3);line-height:1.45}