@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* Light-lock: o site oficial da Outlet e light-only, o mockup acompanha. */
:root{
  color-scheme: light;
  --teal:#016563; --teal-2:#62c1c3; --teal-soft:#e6f2f2;
  --orange:#ec7318; --orange-dk:#bf4702;
  --ink:#203549; --muted:#6e7d8e; --line:#dbe0e7;
  --paper:#fff; --bg:#f7f8fc; --soft:#f9fcfc; --panel:#eef2f6;
  --r:14px; --r-sm:10px; --r-pill:999px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Montserrat,system-ui,sans-serif;background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.15}

header.top{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.top .wrap{display:flex;align-items:center;gap:16px;height:64px}
.logo{font-weight:800;font-size:22px;color:var(--orange);letter-spacing:-.03em}
.logo span{color:var(--teal);font-size:11px;display:block;margin-top:-6px;letter-spacing:.02em;font-weight:700}
.tag{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600}

.screen{display:none}
.screen.on{display:block}

/* ===== BUSCA ===== */
.hero{background:linear-gradient(150deg,var(--teal) 0%,var(--teal-2) 100%);padding:44px 0 92px;color:#fff}
.hero h1{font-size:30px;font-weight:800;max-width:20ch}
.hero p{margin:10px 0 0;font-size:14.5px;opacity:.92;max-width:54ch}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.searchcard{margin-top:-56px;box-shadow:0 16px 44px rgb(32 53 73 / .14)}
.tabs{display:flex;gap:6px;margin-bottom:16px}
.tabs button{border:1px solid var(--line);background:var(--paper);color:var(--muted);border-radius:var(--r-pill);
  padding:8px 16px;font-size:12.5px;font-weight:700}
.tabs button[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:#fff}
.fields{display:grid;gap:12px;grid-template-columns:1fr 38px 1fr 150px 130px auto;align-items:end}
.swap{border:1px solid var(--line);background:var(--paper);color:var(--teal);border-radius:50%;
  width:38px;height:38px;font-size:16px;line-height:1;margin-bottom:1px;transition:.15s;flex:none}
.swap:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.swap:active{transform:scale(.94)}
.swap:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.f label{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.05em}
.f select,.f input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:13.5px;background:var(--paper);color:var(--ink)}
.f select:focus,.f input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.go{background:var(--orange);color:#fff;border:0;border-radius:var(--r-sm);padding:12px 26px;
  font-size:14px;font-weight:700;white-space:nowrap;transition:.15s}
.go:hover{background:var(--orange-dk)}
.go:active{transform:translateY(1px)}
.explain{margin-top:26px;display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.explain div{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 15px}
.explain b{display:block;font-size:13px;margin-bottom:3px}
.explain p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}

/* combobox de origem e destino */
.f{position:relative}
.ac{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 14px 34px rgb(32 53 73 / .16);
  max-height:260px;overflow:auto;display:none}
.ac.on{display:block}
.ac button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 13px;
  font-size:13px;color:var(--ink);border-bottom:1px solid var(--line)}
.ac button:last-child{border-bottom:0}
.ac button:hover,.ac button.hi{background:var(--teal-soft)}
.ac button small{display:block;font-size:10.5px;color:var(--muted);font-weight:700;margin-top:1px}
.ac .none{padding:13px;font-size:12.5px;color:var(--muted);line-height:1.45}
.f input[readonly]{cursor:pointer;background:var(--paper)}
.f .clear{position:absolute;right:9px;top:31px;border:0;background:none;color:var(--muted);
  font-size:15px;line-height:1;padding:4px}

/* datepicker */
.dp{position:absolute;z-index:30;top:calc(100% + 4px);left:0;width:262px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 14px 34px rgb(32 53 73 / .16);
  padding:12px;display:none}
.dp.on{display:block}
.dp .nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.dp .nav b{font-size:13px;font-weight:800;text-transform:capitalize}
.dp .nav button{border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:8px;width:26px;height:26px;font-size:14px;line-height:1}
.dp .nav button:disabled{opacity:.35;cursor:default}
.dp .dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dp .dow span{text-align:center;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase}
.dp .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp .grid button{border:0;background:none;border-radius:8px;height:31px;font-size:12.5px;
  font-weight:700;color:var(--ink)}
.dp .grid button:hover:not(:disabled){background:var(--teal-soft)}
.dp .grid button:disabled{color:var(--line);cursor:default}
.dp .grid button.sel{background:var(--teal);color:#fff}
.dp .grid button.today{box-shadow:inset 0 0 0 1px var(--teal-2)}
.dp .grid span{height:31px}

/* ===== RESULTADOS ===== */
.rhead{background:var(--paper);border-bottom:1px solid var(--line);padding:16px 0}
.rhead .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.back{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:var(--r-sm);
  padding:8px 13px;font-size:12.5px;font-weight:700}
.route{font-size:15.5px;font-weight:700}
.route small{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:1px}
.legdirs{margin-left:auto;display:flex;gap:6px}
.legdirs[hidden]{display:none}
.legdirs button{border:1px solid var(--line);background:var(--paper);color:var(--muted);
  border-radius:var(--r-pill);padding:7px 15px;font-size:12.5px;font-weight:700}
.legdirs button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff}

.results{padding:22px 0 70px}
.disclaim{background:var(--soft);border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:var(--r-sm);padding:13px 16px;font-size:12.5px;color:var(--muted);margin-bottom:22px;line-height:1.55}
.disclaim b{color:var(--ink)}

/* régua de dias, no espírito da barra do site oficial */
.daystrip{display:grid;grid-template-columns:34px 1fr 34px;gap:8px;align-items:stretch;margin-bottom:18px}
.daynav{border:1px solid var(--line);background:var(--paper);color:var(--teal);border-radius:var(--r-sm);
  font-size:17px;line-height:1;transition:.15s}
.daynav:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.dayrow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;overflow-x:auto}
.day{border:1px solid var(--line);background:var(--paper);border-radius:var(--r-sm);
  padding:9px 8px;display:grid;gap:1px;justify-items:center;transition:.15s;min-width:104px}
.day:hover:not(:disabled){border-color:var(--teal-2)}
.day:disabled{opacity:.4;cursor:default}
.day.on{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 4px 14px rgb(1 101 99 / .12)}
.day .dw{font-size:12.5px;font-weight:800;color:var(--ink);text-transform:capitalize}
.day.on .dw{color:var(--teal)}
.day .from{font-size:9.5px;color:var(--muted);font-weight:700}
.day b{font-size:14px;font-weight:800;color:var(--teal)}
.day .dim{font-size:11px;color:var(--muted);font-weight:700}

/* bloco = a mesma unidade que o site oficial mostra */
.boxes{display:grid;gap:16px}
.box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:grid;grid-template-columns:238px 1fr;box-shadow:0 2px 8px rgb(32 53 73 / .05)}
.side{background:var(--panel);padding:17px 18px;border-right:1px solid var(--line)}
.ord{display:inline-block;background:var(--teal);color:#fff;border-radius:var(--r-pill);
  padding:3px 11px;font-size:11px;font-weight:800;margin-bottom:12px}
.side .lead{font-size:11.5px;color:var(--muted);font-weight:700;margin-bottom:5px}
.window{display:flex;align-items:center;gap:7px;font-size:17px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;margin-bottom:12px}
.window em{font-style:normal;font-size:12px;color:var(--muted);font-weight:700}
.dur{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:14px}
.dur b{color:var(--ink);font-weight:800}
.stop{display:flex;gap:8px;margin-bottom:11px;font-size:12.5px;line-height:1.35}
.stop .pin{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none;margin-top:6px;
  box-shadow:0 0 0 3px var(--teal-soft)}
.stop small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:800}
.stop b{font-weight:700}
.hidden-note{font-size:10.5px;color:var(--muted);line-height:1.4;margin-top:14px;
  padding-top:11px;border-top:1px solid var(--line)}

.opts{display:grid}
.opt{display:grid;grid-template-columns:1fr 250px;gap:18px;padding:16px 18px;align-items:center;
  border-bottom:1px solid var(--line)}
.opt:last-child{border-bottom:0}
.opt:hover{background:var(--soft)}
.klass{font-size:19px;font-weight:800;color:var(--teal);letter-spacing:-.02em;margin-bottom:9px}
.real{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.time{font-size:21px;font-weight:800;letter-spacing:-.025em}
.arrow{color:var(--muted);font-weight:700;font-size:13px}
.chip{display:inline-block;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:3px 10px;font-size:11px;font-weight:700;color:var(--muted)}
.meta{font-size:12.5px;color:var(--muted)}
.pills{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:7px}
.seatline{display:inline-flex;align-items:center;gap:6px;background:#fff5ec;border:1px solid var(--orange);
  border-radius:var(--r-pill);padding:3px 11px;font-size:12px;font-weight:700;color:var(--orange-dk)}
.stops{display:inline-flex;align-items:center;background:var(--teal-soft);border:1px solid var(--teal-2);
  border-radius:var(--r-pill);padding:3px 11px;font-size:12px;font-weight:800;color:var(--teal);white-space:nowrap}

.pricecol{text-align:right}
.pricetop{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-bottom:2px}
.nowline{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.rank{border-radius:var(--r-pill);padding:3px 9px;font-size:11px;font-weight:800;white-space:nowrap;
  background:var(--soft);border:1px solid var(--line);color:var(--muted)}
.rank.best{background:var(--orange);border-color:var(--orange);color:#fff}
.old{font-size:13px;color:var(--muted);text-decoration:line-through;font-weight:600}
.off{background:var(--orange);color:#fff;border-radius:var(--r-pill);padding:2px 9px;
  font-size:11px;font-weight:800;white-space:nowrap}
.apenas{font-size:11px;color:var(--muted);font-weight:700}
.now{font-size:27px;font-weight:800;color:var(--teal);letter-spacing:-.03em;line-height:1.05}
.eco{font-size:11.5px;color:var(--orange-dk);font-weight:700;margin-top:2px}
.mapbtn{margin-top:9px;border:1px solid var(--teal);background:var(--paper);color:var(--teal);
  border-radius:var(--r-sm);padding:8px 14px;font-size:12.5px;font-weight:700;width:100%;transition:.15s}
.mapbtn:hover{background:var(--teal);color:#fff}

.inline-seat,.inline-route{display:none;grid-column:1/-1}
.opt.open .inline-seat{display:block;margin-top:14px}
.opt.route-open .inline-route{display:block;margin-top:14px}

/* ===== MAPA DE POLTRONAS ===== */
.bus{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:17px}
.bushead{display:flex;align-items:center;gap:10px;margin-bottom:13px;font-size:13px;font-weight:700}
.bushead .chip{margin-left:auto}
.deck{display:flex;gap:7px;overflow-x:auto;padding:4px 2px 10px}
.col{display:grid;gap:5px}
.seat{width:32px;height:30px;border-radius:7px;display:grid;place-items:center;font-size:11px;
  font-weight:700;border:1px solid var(--line);background:var(--paper);color:var(--muted)}
.seat.free{background:var(--paper);border-color:var(--teal-2);color:var(--teal)}
.seat.busy{background:var(--line);border-color:var(--line);color:var(--muted);opacity:.6}
.seat.mine{background:var(--orange);border-color:var(--orange);color:#fff;
  box-shadow:0 0 0 3px rgb(236 115 24 / .22)}
.seat.aisle{border:0;background:none}
.seat.fac{background:transparent;border-style:dashed;font-size:9px}
.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:10px;font-weight:600}
.legend i{width:13px;height:13px;border-radius:4px;display:inline-block;vertical-align:-2px;margin-right:5px}
.pred{background:var(--paper);border:1px solid var(--orange);border-left:3px solid var(--orange);
  border-radius:var(--r-sm);padding:11px 14px;font-size:12.5px;margin-top:12px;line-height:1.45}
.pred b{color:var(--orange-dk)}

/* ===== ROTA ===== */
.routebox{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:17px}
.routehead{font-size:13px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.routehead .chip{margin-left:auto}
.empty{font-size:12.5px;color:var(--muted);line-height:1.5;background:var(--paper);
  border:1px dashed var(--line);border-radius:var(--r-sm);padding:14px 16px}
.tl{display:grid;gap:0}
.tl .st{display:grid;grid-template-columns:20px 1fr;gap:12px;position:relative;padding-bottom:20px}
.tl .st:last-child{padding-bottom:0}
.tl .st::before{content:"";position:absolute;left:9px;top:16px;bottom:-4px;width:2px;background:var(--line)}
.tl .st:last-child::before{display:none}
.tl .dot{width:11px;height:11px;border-radius:50%;background:var(--teal);margin-top:5px;
  box-shadow:0 0 0 3px var(--teal-soft);z-index:1}
.tl .h{color:var(--orange);font-weight:800;font-size:14px;line-height:1.2}
.tl .c{font-weight:700;font-size:13.5px;color:var(--teal)}
.tl .dim .dot{background:var(--muted);box-shadow:0 0 0 3px var(--line)}
.tl .dim .h,.tl .dim .c{color:var(--muted);font-weight:600}
.tl .tagme{display:inline-block;background:var(--orange);color:#fff;border-radius:var(--r-pill);
  padding:1px 8px;font-size:10px;font-weight:800;margin-left:7px;vertical-align:1px}
.tl .gap{font-size:11px;color:var(--muted);font-weight:600;margin-top:3px}

@media (prefers-reduced-motion:reduce){ .go:active{transform:none} }
@media (max-width:900px){
  .box{grid-template-columns:1fr}
  .side{border-right:0;border-bottom:1px solid var(--line)}
  .opt{grid-template-columns:1fr;gap:12px}
  .pricecol{text-align:left}
  .pricetop{justify-content:flex-start}
  .fields{grid-template-columns:1fr}
  .swap{justify-self:center;transform:rotate(90deg);margin:-4px 0}
  .dayrow{grid-auto-columns:118px}
  .swap:active{transform:rotate(90deg) scale(.94)}
  .explain{grid-template-columns:1fr}
}

/* ===== estados de carregamento e erro ===== */
.loading{position:fixed;inset:0;background:rgb(32 53 73 / .35);z-index:70;
  display:grid;place-items:center;backdrop-filter:blur(2px)}
.loading[hidden]{display:none}
.lbox{background:var(--paper);border-radius:var(--r);padding:22px 30px;text-align:center;
  box-shadow:0 20px 60px rgb(32 53 73 / .25);font-size:13.5px;font-weight:700;color:var(--ink)}
.spin{width:26px;height:26px;margin:0 auto 12px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--teal);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation-duration:2.4s} }

.formerr{margin-top:14px;background:#fff5ec;border:1px solid var(--orange);
  border-left:3px solid var(--orange);border-radius:var(--r-sm);padding:11px 14px;
  font-size:12.5px;font-weight:700;color:var(--orange-dk)}
.formerr[hidden]{display:none}

.warn{background:#fff5ec;border:1px solid var(--orange);border-left:3px solid var(--orange);
  border-radius:var(--r-sm);padding:12px 15px;font-size:12.5px;font-weight:700;
  color:var(--orange-dk);margin-bottom:16px;line-height:1.45}

@media (max-width:560px){
  /* o aviso do cabeçalho briga com o logo em tela estreita; ele reaparece no rodapé da busca */
  .tag{display:none}
}
.foot{margin:18px 0 0;font-size:11.5px;color:var(--muted);text-align:center;font-weight:600}