:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0f172a;
  background: #f4f7f8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at top left, rgba(14,116,144,.08), transparent 35%), #f4f7f8; }
body.sheet-open { overflow: hidden; }
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(14,116,144,.25); outline-offset: 3px; }
.app-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 56px; }
.hero { padding: 24px 0 34px; }
.brand-row { display:flex; align-items:center; gap:12px; margin-bottom:46px; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:#0f766e; color:#fff; font-weight:900; }
.brand-name { font-weight:900; letter-spacing:.12em; }
.brand-kicker { color:#64748b; font-size:12px; margin-top:2px; }
.eyebrow,.section-label { display:inline-block; color:#0f766e; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.hero h1 { max-width:860px; margin:10px 0 14px; font-size:clamp(38px,6vw,72px); line-height:.98; letter-spacing:-.045em; }
.hero-copy { max-width:720px; margin:0; color:#475569; font-size:19px; line-height:1.6; }
.prototype-warning { display:inline-flex; margin-top:24px; padding:10px 14px; border:1px solid #fbbf24; border-radius:999px; background:#fffbeb; color:#92400e; font-size:13px; font-weight:700; }
.card { background:rgba(255,255,255,.94); border:1px solid #e2e8f0; border-radius:24px; box-shadow:0 18px 45px rgba(15,23,42,.055); }
.destination-card,.partner-card { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px; }
.destination-card h2,.partner-card h2,.bag-section h2,.tide-card h2,.section-heading h2 { margin:7px 0 4px; font-size:clamp(24px,3vw,34px); letter-spacing:-.03em; }
.muted,.fine-print,.section-heading p,.partner-card p,.tide-card p,.mobility-card p { color:#64748b; line-height:1.55; }
.secondary-button,.primary-button { border:0; border-radius:14px; padding:13px 16px; cursor:pointer; font-weight:800; white-space:nowrap; transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
.secondary-button:hover,.primary-button:hover { transform:translateY(-1px); }
.secondary-button { background:#ecfeff; color:#0f766e; }
.primary-button { background:#0f766e; color:#fff; box-shadow:0 8px 20px rgba(15,118,110,.15); }
.route-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr); gap:18px; margin-top:18px; }
.map-card { padding:14px; }
.fake-map { position:relative; min-height:410px; overflow:hidden; border-radius:18px; background:linear-gradient(120deg,transparent 0 34%,rgba(255,255,255,.7) 34% 39%,transparent 39% 100%),linear-gradient(28deg,transparent 0 47%,rgba(255,255,255,.65) 47% 52%,transparent 52% 100%),linear-gradient(160deg,#dbeafe 0 24%,#d1fae5 24% 66%,#fef3c7 66% 100%); }
.route-dot { position:absolute; z-index:3; width:18px; height:18px; border:4px solid #fff; border-radius:50%; background:#0f766e; box-shadow:0 2px 8px rgba(15,23,42,.25); }
.route-dot-a { left:16%; top:70%; }.route-dot-b { left:46%; top:46%; }.route-dot-c { right:17%; top:22%; }
.route-line { position:absolute; z-index:2; height:7px; border-radius:99px; background:#0f766e; transform-origin:left center; }
.route-line-a { left:17%; top:69%; width:39%; transform:rotate(-29deg); }.route-line-b { left:47%; top:45%; width:43%; transform:rotate(-31deg); }
.map-label,.terrain-chip { position:absolute; z-index:4; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.92); box-shadow:0 5px 16px rgba(15,23,42,.08); font-size:12px; font-weight:800; }
.map-label-start { left:7%; bottom:10%; }.map-label-end { right:5%; top:9%; }.terrain-chip-one { left:39%; top:29%; color:#9a3412; }.terrain-chip-two { right:28%; bottom:23%; color:#92400e; }
.map-caption { margin:10px 4px 2px; color:#94a3b8; font-size:12px; }
.route-summary { padding:24px; }
.metrics-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:18px 0; }
.metrics-grid>div { padding:16px; border-radius:16px; background:#f8fafc; }
.metrics-grid strong,.metrics-grid span { display:block; }.metrics-grid strong { font-size:22px; }.metrics-grid span { margin-top:2px; color:#64748b; font-size:12px; }
.difficulty-box { padding:16px; border:1px solid #fed7aa; border-radius:16px; background:#fff7ed; }.difficulty-box span,.difficulty-box strong { display:block; }.difficulty-box span { color:#9a3412; font-size:12px; font-weight:700; }.difficulty-box strong { margin-top:4px; }
.chip-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }.chip { padding:7px 10px; border-radius:999px; background:#f1f5f9; color:#475569; font-size:12px; font-weight:700; }.fine-print { font-size:12px; }
.bag-section,.tide-card,.partner-card { margin-top:18px; }.bag-section { padding:26px; }
.bag-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:20px; }
.bag-option { min-height:120px; padding:16px; border:1px solid #e2e8f0; border-radius:16px; background:#fff; color:#0f172a; text-align:left; cursor:pointer; transition:.18s ease; }
.bag-option:hover { transform:translateY(-2px); border-color:#99f6e4; }.bag-option.is-active { border-color:#0f766e; background:#f0fdfa; box-shadow:inset 0 0 0 1px #0f766e; }.bag-option strong,.bag-option span { display:block; }.bag-option span { margin-top:8px; color:#64748b; font-size:12px; line-height:1.45; }
.recommendation { display:flex; gap:12px; margin-top:16px; padding:16px; border-radius:16px; background:#f0fdf4; }.recommendation-alert { background:#fff7ed; }.recommendation-icon { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:#0f766e; color:#fff; font-weight:900; }.recommendation-alert .recommendation-icon { background:#ea580c; }.recommendation p { margin:4px 0 0; color:#64748b; }
.tide-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:24px; }.tide-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:18px; background:#e0f2fe; color:#0369a1; font-size:28px; font-weight:900; }.status-pill { padding:8px 10px; border-radius:999px; background:#fff7ed; color:#9a3412; font-size:12px; font-weight:800; }
.section-heading { max-width:720px; margin:54px 0 18px; }.mobility-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.mobility-card { position:relative; padding:22px; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }.mobility-card:hover { transform:translateY(-2px); }.mobility-card.is-suggested { border-color:#5eead4; box-shadow:0 18px 45px rgba(15,118,110,.1), inset 0 0 0 1px #99f6e4; }.mobility-card.is-suggested::after { content:'SUGESTÃO'; position:absolute; top:18px; right:18px; padding:5px 8px; border-radius:999px; background:#ccfbf1; color:#0f766e; font-size:10px; font-weight:900; letter-spacing:.08em; }.mobility-card h3 { margin:18px 0 6px; font-size:20px; }.mobility-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:#f1f5f9; font-weight:900; }.mobility-free { background:#dcfce7; color:#166534; }.mobility-assist { background:#ffedd5; color:#9a3412; }.mobility-mobility { background:#dbeafe; color:#1d4ed8; }.text-button { padding:0; border:0; background:transparent; color:#0f766e; font-weight:800; cursor:pointer; }
.text-button:hover { text-decoration:underline; }
.partner-card { margin-top:54px; }.partner-card>div { max-width:720px; }
footer { display:flex; justify-content:space-between; gap:18px; margin-top:50px; padding:24px 4px 0; border-top:1px solid #cbd5e1; color:#64748b; font-size:12px; } footer strong { color:#0f172a; letter-spacing:.12em; }

[hidden] { display:none !important; }
.sheet-backdrop { position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center; padding:24px; background:rgba(15,23,42,.58); backdrop-filter:blur(5px); }
.sheet { width:min(720px,100%); max-height:min(820px,calc(100vh - 48px)); overflow:auto; padding:10px 26px 26px; border:1px solid #e2e8f0; border-radius:28px; background:#fff; box-shadow:0 30px 90px rgba(15,23,42,.28); animation:sheet-in .2s ease-out; }
@keyframes sheet-in { from { transform:translateY(18px); opacity:.6; } to { transform:translateY(0); opacity:1; } }
.sheet-handle { width:48px; height:5px; margin:0 auto 16px; border-radius:99px; background:#cbd5e1; }
.sheet-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:18px; border-bottom:1px solid #e2e8f0; }
.sheet-header h2 { margin:5px 0 0; font-size:clamp(26px,4vw,38px); line-height:1.05; letter-spacing:-.035em; }
.sheet-close { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border:0; border-radius:14px; background:#f1f5f9; color:#334155; cursor:pointer; font-size:28px; line-height:1; }
.sheet-body { padding-top:20px; }
.sheet-intro { margin:0 0 18px; color:#475569; font-size:16px; line-height:1.6; }
.sheet-disclaimer { margin:18px 0 0; color:#94a3b8; font-size:12px; line-height:1.5; }
.destination-options { display:grid; gap:10px; }
.destination-option { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:16px; border:1px solid #e2e8f0; border-radius:16px; background:#fff; color:#0f172a; text-align:left; cursor:pointer; transition:.16s ease; }
.destination-option:hover,.destination-option.is-selected { border-color:#5eead4; background:#f0fdfa; }
.destination-option span:first-child { display:grid; gap:4px; }.destination-option small { color:#64748b; font-size:12px; }
.summary-strip { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px; }
.summary-strip>div { padding:16px; border-radius:16px; background:#f8fafc; }.summary-strip strong,.summary-strip span { display:block; }.summary-strip strong { font-size:22px; }.summary-strip span { margin-top:3px; color:#64748b; font-size:11px; }
.prototype-steps { display:grid; gap:12px; }
.prototype-steps>div { display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; padding:14px; border:1px solid #e2e8f0; border-radius:16px; }
.prototype-steps>div>span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#ccfbf1; color:#0f766e; font-weight:900; }.prototype-steps p { margin:0; color:#475569; line-height:1.5; }.prototype-steps strong { color:#0f172a; }
.simulation-box { margin-top:18px; padding:16px; border:1px solid #fed7aa; border-radius:16px; background:#fff7ed; color:#9a3412; }.simulation-box p { margin:5px 0 0; color:#7c2d12; line-height:1.5; }
.sheet-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.prototype-form { display:grid; gap:10px; }.prototype-form label { display:flex; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid #e2e8f0; border-radius:14px; color:#64748b; font-size:13px; }.prototype-form label span { color:#0f172a; font-weight:800; text-align:right; }
.success-state { display:grid; justify-items:center; padding:22px; text-align:center; border-radius:20px; background:#f0fdf4; }.success-state>span { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:#0f766e; color:#fff; font-size:26px; font-weight:900; }.success-state h3 { margin:14px 0 6px; }.success-state p { margin:0; color:#475569; line-height:1.55; }
.option-list { display:grid; gap:10px; }.option-list>div { display:grid; grid-template-columns:38px 1fr; gap:12px; padding:14px; border:1px solid #e2e8f0; border-radius:16px; }.option-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#ecfeff; color:#0f766e; font-weight:900; }.option-list strong { display:block; margin-bottom:3px; }.option-list p { margin:0; color:#64748b; line-height:1.5; }
.partner-link { display:grid; gap:7px; padding:14px; border-radius:16px; background:#0f172a; color:#fff; }.partner-link span { color:#94a3b8; font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }.partner-link code { overflow-wrap:anywhere; color:#ccfbf1; font-size:13px; }
.partner-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }.partner-benefits>div { display:grid; gap:8px; padding:14px; border:1px solid #e2e8f0; border-radius:16px; }.partner-benefits strong { color:#0f766e; font-size:20px; }.partner-benefits span { color:#475569; font-size:12px; line-height:1.45; }
.toast { position:fixed; z-index:120; left:50%; bottom:24px; transform:translateX(-50%); max-width:calc(100% - 32px); padding:12px 16px; border-radius:999px; background:#0f172a; color:#fff; box-shadow:0 15px 40px rgba(15,23,42,.25); font-size:13px; font-weight:800; }

@media (max-width:860px) { .route-layout,.mobility-grid { grid-template-columns:1fr; }.bag-grid { grid-template-columns:repeat(2,1fr); }.route-summary { order:-1; }.partner-benefits { grid-template-columns:1fr; } }
@media (max-width:620px) { .app-shell { width:min(100% - 20px,1120px); padding-top:14px; }.brand-row { margin-bottom:34px; }.hero h1 { font-size:42px; }.hero-copy { font-size:16px; }.destination-card,.partner-card,.tide-card { align-items:flex-start; flex-direction:column; }.tide-card { display:flex; }.bag-grid { grid-template-columns:1fr; }.fake-map { min-height:330px; } footer { flex-direction:column; }.sheet-backdrop { padding:0; align-items:flex-end; }.sheet { width:100%; max-height:88vh; padding:8px 18px 22px; border-radius:26px 26px 0 0; border-bottom:0; }.sheet-actions { flex-direction:column-reverse; }.sheet-actions button { width:100%; }.prototype-form label { flex-direction:column; gap:5px; }.prototype-form label span { text-align:left; }.summary-strip { grid-template-columns:1fr 1fr; } }