:root { --ink:#301238; --muted:#716476; --line:#eaddef; --canvas:#fbf8fc; --navy:#59006b; --teal:#a313c6; --lime:#f4d44e; --orange:#f47648; --white:#fff; }
* { box-sizing:border-box; }
.location-consent { grid-column:1/-1; display:flex; align-items:flex-start; gap:9px; padding:10px 12px; border-radius:8px; color:#4b2457; background:#faf0fd; font-size:12px; font-weight:700; line-height:1.4; }.location-consent input { width:16px; height:16px; margin:0; accent-color:var(--teal); }.outline-button:disabled { cursor:not-allowed; opacity:.45; }
.location-guidance { grid-column:1/-1; display:grid; gap:3px; padding:12px; border-left:3px solid var(--teal); border-radius:7px; color:#542461; background:#f9edfc; font-size:12px; line-height:1.4; }.location-guidance strong { color:#7d0f97; }.location-guidance span { color:#755a7d; }
body { margin:0; min-width:320px; background:var(--canvas); color:var(--ink); font-family:"Trebuchet MS", "Segoe UI", sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { display:flex; min-height:100vh; }
.sidebar { width:310px; flex:0 0 310px; color:#f9effb; padding:36px 30px; background:radial-gradient(circle at 15% 8%, #c022dc 0 2%, transparent 23%), radial-gradient(circle at 93% 85%, #f4d44e 0 2%, transparent 19%), var(--navy); display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; width:178px; color:#fff; text-decoration:none; }.brand img { display:block; width:100%; height:auto; filter:brightness(0) invert(1); }
.eyebrow { margin:0 0 8px; color:var(--teal); font-size:11px; font-weight:900; letter-spacing:1.4px; }.sidebar .eyebrow { margin-top:60px; color:var(--lime); }.sidebar h1 { margin:0; max-width:220px; font-size:31px; line-height:1.05; letter-spacing:-1.4px; }.sidebar-copy { margin:17px 0 30px; color:#e7ccec; font-size:14px; line-height:1.5; }
.steps { list-style:none; padding:0; margin:0; }.step { display:flex; align-items:center; gap:12px; padding:11px 8px; border-left:2px solid rgba(255,255,255,.14); color:#d7b9dd; }.step span { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:rgba(255,255,255,.08); font-size:10px; font-weight:900; }.step strong,.step small { display:block; }.step strong { font-size:13px; }.step small { margin-top:2px; font-size:11px; }.step.active { border-color:var(--lime); color:#fff; }.step.active span { color:var(--navy); background:var(--lime); }.step.done { border-color:#3bd18a; color:#e7fff2; }.step.done span { color:#fff; background:#20ad6b; box-shadow:0 0 0 4px rgba(59,209,138,.14); }
.local-badge { margin-top:auto; padding:10px 12px; border:1px solid rgba(244,212,78,.42); border-radius:9px; color:#fff1bb; font-size:11px; font-weight:800; }.local-badge i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--lime); }.sidebar-note { margin:11px 2px 0; color:#d2b2d9; font-size:10px; line-height:1.4; }
.workspace { flex:1; min-width:0; }.topbar { min-height:86px; display:flex; align-items:center; justify-content:space-between; padding:19px clamp(24px,5vw,76px); background:#fff; border-bottom:1px solid var(--line); }.topbar .eyebrow { margin-bottom:4px; }.welcome { margin:0; color:#64717b; font-size:13px; }.welcome span { color:var(--teal); }.agent { display:flex; align-items:center; gap:9px; color:#52606a; font-size:13px; font-weight:800; }.avatar { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; color:#fff; background:#ee805c; font-size:10px; }.icon-button { width:27px; height:27px; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:#fff; font-weight:900; }
.content { width:min(910px, 100%); margin:0 auto; padding:45px clamp(22px,5vw,70px) 38px; }.progress-line { height:4px; overflow:hidden; margin-bottom:18px; border-radius:4px; background:#ecdff0; }.progress-line span { display:block; width:20%; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--navy),var(--teal)); transition:width .35s ease; }.journey-banner { display:flex; align-items:center; gap:11px; margin:0 0 25px; padding:12px 15px; border:1px solid #ead6ef; border-radius:12px; color:#5f286e; background:linear-gradient(90deg,#fcf3fe,#fff); }.journey-banner span { flex:0 0 auto; color:#9411b3; font-size:10px; font-weight:900; letter-spacing:.9px; }.journey-banner strong { font-size:13px; }
.panel { display:none; padding:clamp(25px,4vw,42px); border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 13px 34px rgba(10,48,55,.06); }.panel.is-active { display:block; animation:enter .25s ease; } @keyframes enter { from{opacity:.3; transform:translateY(8px)} to{opacity:1; transform:none} }
.stage-heading { display:flex; justify-content:space-between; gap:20px; margin-bottom:31px; }.stage-heading h2 { margin:0; color:#132a34; font-size:clamp(25px,4vw,36px); letter-spacing:-1.5px; line-height:1.08; }.stage-heading p:not(.eyebrow) { max-width:570px; margin:13px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }.stage-icon { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border-radius:15px; color:var(--teal); background:#e5f5f0; font-size:24px; }
.cep-layout { display:grid; grid-template-columns:minmax(260px,1fr) minmax(220px,.8fr); gap:18px; align-items:stretch; }.field { display:block; color:#394952; font-size:12px; font-weight:900; }.field-input { display:flex; margin-top:8px; }.field input,.field select { width:100%; height:46px; margin-top:8px; padding:0 13px; border:1px solid #cfdadd; border-radius:9px; outline:none; color:var(--ink); background:#fff; transition:border .2s, box-shadow .2s; }.field-input input { margin-top:0; border-radius:9px 0 0 9px; }.field input:focus,.field select:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(13,138,123,.1); }.field-input button { flex:0 0 auto; border:0; border-radius:0 9px 9px 0; padding:0 17px; color:#fff; background:var(--teal); font-size:12px; font-weight:900; }.field small { display:block; margin-top:8px; color:#8a969d; font-weight:500; }.coverage-card { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid #dce6e4; border-radius:12px; background:#f5faf8; }.coverage-dot { width:11px; height:11px; border-radius:50%; background:#bcc9c7; }.coverage-card strong { font-size:13px; }.coverage-card p { margin:4px 0 0; color:#71807f; font-size:12px; line-height:1.35; }.coverage-card.success { border-color:#b6e6d6; background:#effaf6; }.coverage-card.success .coverage-dot { background:#17a77d; box-shadow:0 0 0 5px rgba(23,167,125,.12); }
.notice,.safe-message { display:flex; gap:10px; align-items:flex-start; margin-top:22px; padding:13px 15px; border-radius:10px; color:#37616a; background:#edf7f8; font-size:12px; line-height:1.45; }.notice span,.safe-message span { color:var(--teal); font-weight:900; }.notice p,.safe-message p { margin:0; }.plan-summary { display:flex; align-items:center; gap:8px; margin:-4px 0 20px; padding-bottom:17px; border-bottom:1px solid var(--line); color:#516069; font-size:13px; }.pin { color:var(--teal); font-size:18px; }.text-button { margin-left:auto; border:0; color:var(--teal); background:none; font-size:12px; font-weight:900; text-decoration:underline; }
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.plan-card { position:relative; min-height:241px; padding:20px; border:1px solid #dce5e5; border-radius:15px; background:#fff; transition:.2s; }.plan-card:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(7,45,54,.1); }.plan-card.selected { border:2px solid var(--teal); background:#f2fbf8; }.plan-card.selected:after { content:"Selecionado"; position:absolute; top:13px; right:13px; padding:4px 7px; border-radius:10px; color:#0b6e61; background:#d1f0e5; font-size:9px; font-weight:900; }.plan-card h3 { margin:0 0 4px; font-size:16px; letter-spacing:-.4px; }.plan-card .speed { margin:17px 0 4px; color:var(--teal); font-size:31px; font-weight:900; letter-spacing:-1.4px; }.plan-card .speed small { font-size:12px; letter-spacing:0; }.plan-card .upload { color:#6c7c81; font-size:11px; }.plan-card .price { position:absolute; bottom:52px; left:20px; color:#22343a; font-size:18px; font-weight:900; }.plan-card .price small { color:#79868a; font-size:10px; font-weight:500; }.plan-card button { position:absolute; right:16px; bottom:15px; left:16px; height:30px; border:1px solid #9bcfc1; border-radius:7px; color:#087564; background:#fff; font-size:11px; font-weight:900; }.plan-card.selected button { color:#fff; background:var(--teal); border-color:var(--teal); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.field.full { grid-column:1/-1; }.due-date-field { display:block; max-width:390px; margin:28px auto 0; padding:18px; border:1px solid #dfb8e8; border-radius:14px; color:#68107c; background:#fdf5ff; font-size:13px; }.due-date-field select { height:54px; margin-top:10px; border:2px solid #c974da; color:#5b146c; background:#fff; font-size:16px; font-weight:900; }.due-date-field small { color:#7e6685; }.field b { color:#e45b42; }.location-box { display:grid; grid-template-columns:1fr auto; gap:11px 18px; align-items:center; margin-top:24px; padding:18px; border:1px dashed #aacbc3; border-radius:13px; background:#fbfefd; }.location-box p { margin:0; color:#6e7d82; font-size:12px; }.location-box .location-title { margin-bottom:4px; color:#264147; font-size:13px; font-weight:900; }.outline-button { height:36px; border:1px solid var(--teal); border-radius:8px; padding:0 13px; color:#087564; background:#fff; font-size:11px; font-weight:900; }.coordinates { grid-column:1/-1; display:flex; gap:16px; color:#718187; font-size:11px; }.coordinates span { padding:5px 8px; border-radius:5px; background:#eff6f4; }.form-error { min-height:16px; margin:15px 0 0; color:#c44635; font-size:12px; font-weight:800; }
.review-card { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid var(--line); border-radius:14px; }.review-section { padding:19px; border-bottom:1px solid var(--line); }.review-section:nth-child(odd) { border-right:1px solid var(--line); }.review-section h3 { margin:0 0 12px; color:var(--teal); font-size:11px; letter-spacing:.8px; }.review-section dl { display:grid; grid-template-columns:auto 1fr; gap:7px 12px; margin:0; font-size:12px; }.review-section dt { color:#809097; }.review-section dd { margin:0; color:#26383e; font-weight:800; text-align:right; }
.form-footer { display:flex; justify-content:space-between; align-items:center; margin-top:25px; }.back-button { visibility:hidden; border:0; padding:10px 0; color:#64747a; background:transparent; font-size:13px; font-weight:900; }.back-button.show { visibility:visible; }.footer-actions { display:flex; align-items:center; gap:16px; }.footer-actions > span { color:#79878d; font-size:11px; }.next-button { height:42px; min-width:138px; border:0; border-radius:9px; padding:0 16px; color:#fff; background:var(--navy); box-shadow:0 7px 14px rgba(8,45,54,.2); font-size:12px; font-weight:900; }.next-button span { margin-left:8px; font-size:17px; vertical-align:-1px; }.next-button:hover { background:#104653; }
.toast { position:fixed; right:25px; bottom:25px; z-index:10; max-width:330px; padding:13px 16px; border-radius:10px; color:#fff; background:var(--navy); box-shadow:0 10px 25px rgba(58,0,75,.22); font-size:12px; font-weight:800; opacity:0; pointer-events:none; transform:translateY(10px); transition:.25s; }.toast.show { opacity:1; transform:none; }
.coverage-card { border-color:#eadbed; background:#fdf9fe; }.coverage-card.success { border-color:#d89de8; background:#fbf0fe; }.coverage-card.success .coverage-dot { background:var(--teal); box-shadow:0 0 0 5px rgba(163,19,198,.12); }.notice,.safe-message { color:#5f356a; background:#f8ecfb; }.plan-card:hover { box-shadow:0 12px 24px rgba(89,0,107,.12); }.plan-card.selected { border-color:var(--teal); background:#fdf4ff; }.plan-card.selected:after { color:#7a0e96; background:#f1ccfa; }.plan-card .price { color:#4c1658; }.plan-card button { border-color:#d59ae6; color:#8510a1; }.plan-card.selected button { background:var(--teal); border-color:var(--teal); }.location-box { border-color:#d2a8dc; background:#fefaff; }.location-box .location-title { color:#4a2455; }.outline-button { color:#8510a1; }.coordinates span { background:#f8effa; }.review-section h3 { color:#8510a1; }.next-button { box-shadow:0 7px 14px rgba(89,0,107,.24); }.next-button:hover { background:#3e004c; }
@media (max-width:850px) { .sidebar { width:240px; flex-basis:240px; padding:28px 22px; }.sidebar h1 { font-size:26px; }.plan-grid { grid-template-columns:1fr; }.plan-card { min-height:198px; }.plan-card .price { bottom:51px; } }
@media (max-width:650px) { .app-shell { display:block; }.sidebar { display:block; width:auto; padding:20px; }.sidebar .eyebrow,.sidebar h1,.sidebar-copy,.steps,.sidebar-note { display:none; }.brand { font-size:20px; }.local-badge { float:right; margin:3px 0 0; }.topbar { min-height:63px; padding:13px 20px; }.topbar .eyebrow,.welcome { display:none; }.content { padding:25px 16px 30px; }.panel { padding:22px 18px; border-radius:16px; }.stage-heading { margin-bottom:23px; }.stage-icon { width:38px; height:38px; flex-basis:38px; font-size:19px; }.cep-layout,.form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.coverage-card { min-height:80px; }.location-box { grid-template-columns:1fr; }.outline-button { width:100%; }.coordinates { display:grid; gap:6px; }.review-card { grid-template-columns:1fr; }.review-section:nth-child(odd) { border-right:0; }.form-footer { margin-top:18px; }.footer-actions { gap:8px; }.footer-actions > span { display:none; }.next-button { min-width:145px; }.agent > span:not(.avatar) { display:none; } }