:root { --xum-accent: #0b4f9c; --xum-dark: #192027; --xum-muted: #68717b; --xum-line: #e2e6eb; --xum-soft: #f6f8fb; --xum-green: #168a4c; --xum-whatsapp: #25d366; --xum-danger: #c3222a; }
.xum-fleet-page { min-height: 65vh; }
.xum-fleet-wrap { box-sizing: border-box; margin: 0 auto; max-width: 1240px; padding: clamp(32px, 6vw, 76px) 20px; color: var(--xum-dark); }
.xum-fleet-wrap * { box-sizing: border-box; }
.xum-inside-account { padding: 0; }
.xum-eyebrow { color: var(--xum-accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; margin: 0 0 8px; text-transform: uppercase; }
.xum-fleet-header { align-items: end; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 30px; }
.xum-fleet-header h1, .xum-vehicle-summary h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; margin: 0 0 10px; }
.xum-fleet-header p:last-child { color: var(--xum-muted); margin: 0; max-width: 650px; }
.xum-button { align-items: center; background-color: var(--xum-accent) !important; border: 1px solid var(--xum-accent) !important; border-radius: 5px; box-shadow: none !important; color: #fff !important; cursor: pointer; display: inline-flex !important; font-size: 14px; font-weight: 800; gap: 9px; justify-content: center; min-height: 46px; opacity: 1 !important; padding: 11px 20px; text-decoration: none !important; text-transform: uppercase; visibility: visible !important; transition: filter .15s ease, transform .15s ease; }
.xum-button:hover { color: #fff !important; filter: brightness(.9); transform: translateY(-1px); }
.xum-button-secondary { background-color: var(--xum-accent) !important; flex: 0 0 auto; }
.xum-vehicle-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xum-vehicle-card { align-items: center; background: #fff; border: 1px solid var(--xum-line); border-radius: 8px; color: inherit !important; display: grid; gap: 16px; grid-template-columns: 48px 1fr auto; min-height: 180px; padding: 24px; text-decoration: none !important; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.xum-vehicle-card:hover { border-color: var(--xum-accent); box-shadow: 0 12px 30px rgba(20,26,32,.09); transform: translateY(-2px); }
.xum-vehicle-icon { align-items: center; background: color-mix(in srgb, var(--xum-accent) 10%, #fff); border-radius: 50%; color: var(--xum-accent); display: flex; height: 52px; justify-content: center; width: 52px; }
.xum-vehicle-icon svg { fill: none; height: 27px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 27px; }
.xum-card-label { color: var(--xum-muted); display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.xum-vehicle-card h2 { font-size: 25px; margin: 2px 0 15px; }
.xum-vehicle-card dl { display: flex; gap: 20px; margin: 0; }
.xum-vehicle-card dl div { min-width: 70px; }
.xum-vehicle-card dt, .xum-vehicle-summary dt { color: var(--xum-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.xum-vehicle-card dd, .xum-vehicle-summary dd { font-weight: 700; margin: 2px 0 0; }
.xum-card-arrow { align-items: center; background: color-mix(in srgb, var(--xum-accent) 9%, #fff); border-radius: 50%; color: var(--xum-accent); display: flex; height: 34px; justify-content: center; transition: background .2s ease, color .2s ease, transform .2s ease; width: 34px; }
.xum-card-arrow svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 18px; }
.xum-vehicle-card:hover .xum-card-arrow { background: var(--xum-accent); color: #fff; transform: translateX(3px); }
.xum-status { background: #fff0c2; border-radius: 20px; color: #795600; display: inline-block; font-size: 11px; font-weight: 800; margin-top: 14px; padding: 5px 9px; text-transform: uppercase; }
.xum-new-vehicle, .xum-empty { background: var(--xum-soft); border: 1px solid var(--xum-line); border-radius: 8px; margin: 24px 0; padding: clamp(22px,4vw,34px); }
.xum-new-vehicle[hidden] { display: none !important; }
.xum-new-vehicle h2, .xum-empty h2 { margin-top: 0; }
.xum-form-grid { display: grid; gap: 16px 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0; }
.xum-form-grid p { margin: 0; }
.xum-form-grid label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 7px; }
.xum-form-grid input { background: #fff; border: 1px solid #cfd3d7; border-radius: 4px; min-height: 46px; padding: 8px 12px; width: 100%; }
.xum-notice { border-radius: 5px; margin: 20px 0; padding: 15px 18px; }
.xum-notice-success { background: #eaf7ef; border-left: 4px solid var(--xum-green); }
.xum-notice-error { background: #fff0f0; border-left: 4px solid var(--xum-danger); }
.xum-back { color: var(--xum-muted) !important; display: inline-block; font-weight: 700; margin-bottom: 24px; text-decoration: none !important; }
.xum-vehicle-summary { background: var(--xum-accent) !important; border-radius: 9px; box-shadow: 0 14px 35px color-mix(in srgb, var(--xum-accent) 24%, transparent); color: #fff !important; display: grid; gap: 40px; grid-template-columns: 1fr 1.5fr; padding: clamp(28px,5vw,48px); }
.xum-vehicle-summary .xum-eyebrow { color: rgba(255,255,255,.72) !important; }
.xum-vehicle-summary h1 { color: #fff !important; }
.xum-vehicle-summary h1 span { color: rgba(255,255,255,.7); display: block; font-size: 13px; letter-spacing: .09em; margin-bottom: 8px; text-transform: uppercase; }
.xum-vehicle-summary dl { align-content: center; display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); margin: 0; }
.xum-vehicle-summary dt { color: rgba(255,255,255,.7); }
.xum-vehicle-summary dd { color: #fff !important; }
.xum-products-section { margin-top: clamp(38px, 6vw, 70px); }
.xum-products-section .xum-eyebrow { color: var(--xum-green); }
.xum-section-heading { margin-bottom: 24px; }
.xum-section-heading h2 { font-size: clamp(26px,4vw,38px); margin: 0; }
.xum-product-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xum-product-card { background: #fff; border: 1px solid var(--xum-line); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.xum-product-image { align-items: center; aspect-ratio: 1/1; background: #fff; display: flex; justify-content: center; padding: 18px; }
.xum-product-image img { height: 100%; object-fit: contain; width: 100%; }
.xum-product-content { align-items: center; border-top: 1px solid var(--xum-line); display: flex; flex: 1; flex-direction: column; padding: 20px 18px; text-align: center; }
.xum-product-category { color: var(--xum-green); font-size: 11px; font-weight: 800; letter-spacing: .05em; line-height: 1.55; margin: 0 0 9px; text-transform: uppercase; }
.xum-product-card h3 { font-size: 19px; margin: 0 0 12px; }
.xum-product-card h3 a { color: var(--xum-dark) !important; text-decoration: none !important; }
.xum-product-price { font-size: 17px; font-weight: 800; margin: 0 0 15px; }
.xum-product-card .xum-button { margin-top: auto; width: 100%; }
.xum-whatsapp { background-color: var(--xum-whatsapp) !important; border-color: var(--xum-whatsapp) !important; }
.xum-whatsapp img { display: block; height: 21px; object-fit: contain; width: 21px; }
.xum-login-overlay { align-items: center; background: rgba(13,17,21,.78); display: flex; justify-content: center; min-height: 70vh; padding: 32px 20px; }
.xum-login-modal { background: #fff; border-radius: 10px; box-shadow: 0 24px 80px rgba(0,0,0,.3); max-width: 470px; padding: clamp(28px,5vw,48px); width: 100%; }
.xum-login-modal h1 { font-size: 30px; line-height: 1.15; margin: 0 0 12px; }
.xum-login-modal > p { color: var(--xum-muted); }
.xum-login-modal label { display: block; font-weight: 700; }
.xum-login-modal input[type="text"], .xum-login-modal input[type="password"] { min-height: 46px; width: 100%; }
.xum-login-modal .login-submit input { background: var(--xum-accent); border: 0; color: #fff; cursor: pointer; font-weight: 800; min-height: 46px; width: 100%; }
.xum-login-help { margin-bottom: 0; text-align: center; }
@media (max-width: 1024px) { .xum-vehicle-grid, .xum-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .xum-fleet-header { align-items: stretch; flex-direction: column; } .xum-vehicle-grid, .xum-product-grid, .xum-form-grid, .xum-vehicle-summary { grid-template-columns: 1fr; } .xum-vehicle-summary dl { grid-template-columns: repeat(2, 1fr); } .xum-vehicle-card { grid-template-columns: 42px 1fr auto; padding: 20px 16px; } }