:root{--ink:#151515;--muted:#777;--line:#e2e2e2;--paper:#fafafa;--green:#161616;--accent:#151515;--white:#fff;--dark:#121212;--canvas:#f7f7f7;--faint:#eee;--green-bg:#eee;--green-pale:#eee;--orange:#555;--orange-bg:#f0f0f0;--navy:#151515;--ink-soft:#444}
body{font-family:Arial,Helvetica,sans-serif}.header{background:#fff}.brand{font-family:Arial,Helvetica,sans-serif;font-size:25px;font-weight:600;letter-spacing:-1px}.suto-logo{width:110px;height:62px;object-fit:contain;mix-blend-mode:multiply}.header-right{gap:30px}.intro h1,.operator h2,.mobile-body h3,.shop-hero strong{font-family:Arial,Helvetica,sans-serif}.intro h1{font-size:36px;font-weight:500;letter-spacing:-1.2px}.operator h2{font-weight:500}.scope-note{display:none}.customer{background:#eee}.phone-caption,.live-dot,.connection,.connection-arrow,.mobile-copy,.mobile-kicker,.client-registration,.client-track-step small,.client-eta>span,.client-eta>small,.client-budget-lines>div,.client-budget-total,.mobile-link,.client-budget-lines b,.cap-meta{color:#777}.live-dot{background:#777}.primary,.mobile-button{background:#171717;border-color:#171717}.primary:hover{background:#333}.primary:disabled,.status-chip,.status-chip.ready,.ready-mark,.client-phase,.client-budget-head>span,.slot.selected{background:#ededed;border-color:#aaa;color:#333}.avatar,.person-row .avatar{background:#eee;color:#555}.primary:disabled{border-color:#eee}.connection-line{background:#bbb}.demo-secondary,.rule-line,.reset,.mobile-header small,.mobile-back{color:#666}.phone{background:#141414;border-color:#444;box-shadow:0 24px 40px #00000018}.phone-screen{background:#fff}.lock-screen{background:#e8e8e8}.notification{background:#ffffffed;border-color:white}.notification p,.notification strong,.notification button{color:#222}.notification-top{color:#777}.notification button{border-color:#ddd}.waiting{border-color:#bbb;color:#777}.chat{background:#f0f0f0}.chat .mobile-header{background:#fff}.chat-date,.chat-empty,.chat-bubble time{color:#888}.chat-bubble strong,.chat-bubble button{color:#222}.chat-bubble button{border-color:#eee}.whatsapp-icon{width:20px;height:20px;display:inline-block;object-fit:contain;vertical-align:middle;flex:none}.mobile-header .whatsapp-icon{width:28px;height:28px}.mobile-header{background:#fff;border-color:#eee}.mobile-header>.app-icon{display:none}.mobile-repair{border-color:#ddd}.mobile-repair small,.mobile-row{color:#777}.mobile-row b{color:#333}.mobile-row{border-color:#eee}.client-track-step.reached>span,.client-track-step.reached:before{background:#333}.client-track-step>span,.client-track-step:before{background:#ccc}.client-budget,.client-budget-total{border-color:#ddd}.client-budget-total strong{color:#151515}.client-budget-head>span{color:#555}.client-budget-lines b{color:#444}.client-eta strong{color:#111}.shop-hero{background:#eee}.shop-hero p,.shop-hero strong{color:#333}.slot{color:#444;border-color:#ddd}.toast-inline{color:#444}.brand-mark,.brand-symbol,.sidebar .mark{display:none}.sidebar{background:#141414}.nav button.active{background:#333}.sidebar .brand{font-size:18px}.sidebar-bottom{border-color:#333}.nav-count{background:#444}.step.done:before,.milestone.done:before{background:#333;box-shadow:0 0 0 1px #333}.step.active:before,.milestone.active:before{background:#111;box-shadow:0 0 0 1px #111}.detail-car,.order-car,.order.selected .order-car,.detail-car,.order.selected{background:#eee;color:#333}.state,.feedback,.metric-note.good{color:#333}.state-dot,.progress-fill,.step-fill{background:#333}.state-dot{box-shadow:0 0 0 4px #eee}.side-panel,.pickup{background:#f8f8f8}.btn:hover,.button-dark:hover{background:#333}.pill,.pill.ready,.quote-state.accepted,.quote-state.sent,.quote-badge.accepted,.quote-badge.sent{background:#eee;color:#444}.order.selected{border-left-color:#222}.mobile-price small{color:#777}@media(max-width:680px){.suto-logo{width:83px;height:47px}.header-right{gap:17px}.intro h1{font-size:29px}}
:root .connection{display:none}
/* Composición compacta de la demo: controles y móvil comparten el arranque. */
.header{height:70px;padding-left:max(28px,calc((100vw - 1152px)/2));padding-right:max(28px,calc((100vw - 1152px)/2))}
.suto-logo{width:96px;height:52px}
main{padding-top:24px}
.intro{margin-bottom:16px;align-items:center}
.intro .eyebrow{margin-bottom:5px;font-size:8px}
.intro h1{font-size:29px;line-height:1.15;letter-spacing:-1px}
.scene{padding-top:10px;padding-bottom:12px}
.experience{align-items:start;min-height:0;padding-top:23px;padding-bottom:28px;gap:48px;grid-template-columns:minmax(0,1fr) 390px}
.operator{align-self:start;padding-top:5px}
.section-tag{margin-bottom:10px}
.operator h2{font-size:26px;line-height:1.15;margin-bottom:7px}
.operator-description{margin-bottom:18px;line-height:1.5;font-size:12px;max-width:none}
.control-surface{max-width:none}
.surface-title{padding:12px 16px}
.surface-body{padding:16px}
.person-row{margin-bottom:16px}
.schedule{margin-bottom:14px}
.customer{padding-top:14px;padding-bottom:9px;border-radius:8px}
.phone-caption{margin-bottom:10px}
.reset{margin-top:8px}
footer{padding-top:13px;padding-bottom:17px}
@media(min-width:1500px){main{padding-top:26px}.experience{gap:48px}}
@media(max-width:900px){.experience{grid-template-columns:minmax(0,1fr) 340px;gap:25px}.header{padding-left:25px;padding-right:25px}.operator h2{font-size:24px}}
@media(max-width:680px){.header{height:62px;padding:0 19px}.suto-logo{width:79px;height:44px}main{padding-top:19px}.intro{margin-bottom:12px}.intro h1{font-size:26px}.scene{padding-top:9px;padding-bottom:10px}.experience{grid-template-columns:1fr;gap:20px;padding-top:20px}.operator{padding-top:0}.operator h2{font-size:23px}.operator-description{margin-bottom:14px}.section-tag{margin-bottom:8px}.customer{padding-top:15px}.surface-body{padding:14px}}