/* Lynya · base compartilhada (site e demonstração)
   Layout: coluna de leitura de 1120px, mapa de linhas de ônibus como único elemento forte. */
:root{
  --ink:#10151F;
  --paper:#F6F3EE;
  --surface:#FFFFFF;
  --amber:#D9963A;
  --amber-deep:#B97A24;
  --amber-soft:#F4E6CF;
  --asphalt:#6B717C;
  --rule:#E3DED5;
  --ok:#3E7C5A;
  --font:"Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --r-s:10px; --r-m:16px; --r-l:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.025em;text-wrap:balance;font-weight:600}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}

/* Barra de topo */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px}
.top .logo{display:block;width:104px;height:auto}
.top nav{display:flex;align-items:center;gap:26px;font-size:14px}
.top nav a:not(.btn){text-decoration:none;color:var(--asphalt)}
@media (hover:hover) and (pointer:fine){.top nav a:not(.btn):hover{color:var(--ink)}}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:15px;font-weight:500;
  padding:13px 22px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);
  text-decoration:none;cursor:pointer;transition:transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease}
.btn:active{transform:scale(0.97)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.small{font-size:13px;padding:8px 14px}
.btn.amber{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:#232b3a}
  .btn.ghost:hover{background:var(--ink);color:var(--paper)}
  .btn.amber:hover{background:var(--amber-deep);border-color:var(--amber-deep)}
}

.note{font-size:13px;color:var(--asphalt)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;background:var(--amber-soft);color:var(--ink)}
.pill.ok{background:#DCEBE1;color:#24533A}
.pill.dark{background:var(--ink);color:var(--paper)}

/* Mapa de linhas */
.route-map .line{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.route-map .line.hot{stroke:var(--amber)}
.route-map .stop{fill:var(--paper);stroke:var(--ink);stroke-width:5}
.route-map .stop.hot{stroke:var(--amber)}
.route-map .origin{fill:var(--amber)}
.route-map text{font-family:var(--font);fill:var(--ink)}
.route-map .city{font-size:17px;font-weight:600}
.route-map .uf{font-size:13px;fill:var(--asphalt)}
.route-map .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1100ms var(--ease-in-out) forwards}
.route-map .draw:nth-of-type(2){animation-delay:90ms}
.route-map .draw:nth-of-type(3){animation-delay:180ms}
.route-map .draw:nth-of-type(4){animation-delay:270ms}
@keyframes draw{to{stroke-dashoffset:0}}

footer.site{border-top:1px solid var(--rule);margin-top:96px;padding-block:28px 40px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:13px;color:var(--asphalt)}

@media (prefers-reduced-motion: reduce){
  .route-map .draw{animation:none;stroke-dashoffset:0}
  .btn{transition:background-color 200ms ease, color 200ms ease}
  .btn:active{transform:none}
}
@media (max-width:720px){
  .route-map .city{font-size:24px}
  .route-map .uf{font-size:18px}
  .top nav a.hide-m{display:none}
  .top nav{gap:14px}
}