:root {
    --ink: #0f1b2d;
    --texto: #3a4658;
    --muted: #6b7789;
    --line: #e6eaf0;
    --soft: #f2f5f9;
    --paper: #f6f8fb;
    --marca: #16324f;
    --marca-texto: #fff;
    --topo: #16324f;
    --topo-texto: #fff;
    --rodape: #16324f;
    --rodape-texto: #fff;
    --ok: #0f7b5f;
    --raio: 18px;
    --sombra: 0 1px 2px rgba(15, 27, 45, .04), 0 10px 30px rgba(15, 27, 45, .06);
    --sombra-forte: 0 20px 50px rgba(15, 27, 45, .14);
    --largura: 1160px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--texto);
    background: var(--paper);
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, strong { color: var(--ink); }
h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.2; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.ico { flex: 0 0 auto; }
.ajuda { color: var(--muted); font-size: .92rem; }

/* Topo */
.topo {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--topo);
    color: var(--topo-texto);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--topo-texto) 10%, transparent);
}
.topo-miolo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 12px 20px;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.03em; text-decoration: none; }
.logo-selo {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--topo-texto) 14%, transparent);
}
.logo-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-img { display: inline-flex; align-items: center; }
.logo-img img { display: block; max-height: 46px; max-width: 220px; width: auto; height: auto; object-fit: contain; }
.logo-img.fundo { padding: 6px 12px; border-radius: 12px; background: white; box-shadow: 0 1px 3px rgba(15, 27, 45, .12); }
.logo-img.fundo img { max-height: 36px; }
.rodape-logo { margin-bottom: 4px; }
.rodape-logo .logo-img img { max-height: 54px; }
.topo nav { display: flex; align-items: center; gap: 6px; }
.topo nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .94rem;
    text-decoration: none;
    opacity: .92;
    transition: background .15s ease, opacity .15s ease;
}
.topo nav a .ico { width: 18px; height: 18px; }
.topo nav a:hover { opacity: 1; background: color-mix(in srgb, var(--topo-texto) 10%, transparent); }
.topo nav a.entrar {
    margin-left: 4px;
    padding: 5px 11px;
    gap: 6px;
    font-size: .82rem;
    line-height: 1.15;
    background: var(--topo-texto);
    color: var(--topo);
    opacity: 1;
}
.topo nav a.entrar .ico { width: 15px; height: 15px; }
.topo-conta { display: none; }

main { padding: 32px 20px 96px; }
.compra, .resultados, .pagina, .conta-auth, .minha-conta, .aviso, .como, main > .alerta { max-width: var(--largura); margin-left: auto; margin-right: auto; }

/* Hero e busca */
.hero {
    margin: -32px -20px 0;
    padding: 64px 20px 0;
    overflow: visible;
    background:
        radial-gradient(800px 300px at 85% 0, color-mix(in srgb, var(--topo-texto) 8%, transparent), transparent 70%),
        linear-gradient(to bottom, var(--topo) 0, var(--topo) calc(100% - 92px), transparent calc(100% - 92px));
    color: var(--topo-texto);
}
.hero.compacto { padding-top: 28px; }
.hero.compacto .hero-texto p { display: none; }
.hero.compacto h1 { font-size: 1.6rem; }
.hero > .alerta { max-width: var(--largura); margin: 0 auto 22px; }
.hero-texto { max-width: var(--largura); margin: 0 auto 26px; text-align: center; }
.hero h1 { margin: 0; color: inherit; font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -0.045em; }
.hero p { margin: 10px 0 0; font-size: 1.08rem; opacity: .85; }

.busca {
    position: relative;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 18px;
    background: white;
    color: var(--texto);
    border-radius: 22px;
    box-shadow: var(--sombra-forte);
}
.modos[hidden] { display: none; }
.modos {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 14px;
    background: var(--soft);
    border-radius: 999px;
}
.modos button {
    border: 0;
    background: transparent;
    color: var(--muted);
    border-radius: 999px;
    padding: 7px 16px;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: all .15s ease;
}
.modos button.ativo { background: white; color: var(--ink); box-shadow: 0 1px 3px rgba(15, 27, 45, .12); }

.campos { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.campo { position: relative; flex: 1 1 0; min-width: 0; }
.campo.escolhe { flex: 1 1 18rem; min-width: min(100%, 18rem); }
.campos > label.campo { flex: 1 1 11rem; min-width: min(100%, 11rem); }
.campo-rotulo { display: block; margin-bottom: 6px; color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .01em; }
.campo:has([name="passageiros"]) { flex: 0 0 128px; }
.campo .ico { position: absolute; left: 14px; bottom: 17px; width: 19px; height: 19px; color: var(--muted); pointer-events: none; }
.campo input { height: 54px; padding-left: 42px; font-weight: 600; }
.campo input[readonly] { cursor: pointer; }
.campo.escolhe input { padding-right: 42px; }
.campo.escolhe::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 24px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    pointer-events: none;
}
.escolhe-aviso {
    display: none;
    position: absolute;
    left: 42px;
    right: 28px;
    bottom: 8px;
    color: #c2410c;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}
.campo.sem-linha .escolhe-aviso { display: block; }
.campo.sem-linha input { border-color: #e8a288; box-shadow: 0 0 0 4px rgba(194, 65, 12, .08); }
.escolhe-lista {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 8;
    display: grid;
    max-height: 260px;
    overflow: auto;
    padding: 6px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--sombra-forte);
}
.escolhe-lista[hidden] { display: none; }
.escolhe-lista button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.escolhe-lista button:hover,
.escolhe-lista button[aria-selected="true"] { background: var(--soft); }
.escolhe-lista button.off { color: var(--muted); }
.escolhe-lista button.off::after { content: "sem linha"; font-size: .72rem; font-weight: 700; color: #c2410c; }
.escolhe-vazio { margin: 0; padding: 12px; color: var(--muted); font-size: .86rem; }

label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .01em; }
input, select, textarea {
    width: 100%;
    height: 48px;
    border: 1px solid #dde3eb;
    border-radius: 12px;
    padding: 0 14px;
    color: var(--ink);
    background: white;
    font-size: .98rem;
    font-weight: 500;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: #9aa5b4; font-weight: 500; }
input:focus, select:focus, textarea:focus {
    outline: 0;
    border-color: var(--marca);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 13%, transparent);
}
textarea { height: auto; padding: 12px 14px; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--marca); }

.troca {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    height: 44px;
    margin-bottom: 5px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: white;
    color: var(--ink);
    cursor: pointer;
    transition: transform .2s ease, background .15s ease;
}
.troca:hover { background: var(--soft); transform: rotate(180deg); }
.troca .ico { transform: rotate(90deg); width: 18px; height: 18px; }

.buscar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 14px;
    background: var(--marca);
    color: var(--marca-texto);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--marca) 28%, transparent);
    transition: filter .15s ease, transform .1s ease;
}
.buscar:hover { filter: brightness(1.08); }
.buscar:active { transform: translateY(1px); }
.buscar:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.buscar .ico { width: 18px; height: 18px; }
.campos .buscar { height: 54px; flex: 0 0 auto; }
.buscar.link { height: 44px; padding: 0 18px; font-size: .95rem; }

/* Calendário */
.calendario {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    z-index: 12;
    width: min(520px, calc(100% - 24px));
    margin: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: white;
    box-shadow: var(--sombra-forte);
    transform: translateX(-50%);
}
.calendario[hidden] { display: none; }
.cal-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; text-align: center; }
.cal-topo strong { text-transform: capitalize; font-size: 1.05rem; }
.cal-topo button { border: 0; background: var(--soft); width: 38px; height: 38px; border-radius: 12px; cursor: pointer; font-size: 1.3rem; color: var(--ink); }
.cal-topo button:hover { background: #e6ebf2; }
.cal-topo button:disabled { opacity: .35; cursor: default; }
.cal-topo button:disabled:hover { background: var(--soft); }
.cal-nota { margin: 2px 0 0; color: var(--muted); font-size: .78rem; font-weight: 500; }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grade span { text-align: center; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; padding: 4px 0; }
.dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 68px;
    padding: 4px 2px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
    transition: all .12s ease;
}
.dia b { font-size: .95rem; line-height: 1.1; }
.dia small { display: block; color: var(--ok); font-size: .68rem; font-weight: 800; line-height: 1.1; }
.dia.com { background: #f0faf5; }
.dia:hover:not(:disabled) { border-color: var(--marca); }
.dia.sel { background: var(--marca); color: var(--marca-texto); }
.dia.sel small { color: inherit; opacity: .9; }
.dia:disabled { color: #c7cfd9; cursor: default; background: transparent; }
.dia:disabled small { display: none; }

/* Avisos */
.alerta, .vazio { margin: 16px auto; padding: 14px 16px; border-radius: 14px; font-weight: 500; }
.alerta { background: #fff1ee; color: #a3361b; border: 1px solid #fbd5ca; }
.vazio { background: white; color: var(--muted); border: 1px dashed #d6dde7; text-align: center; padding: 32px 16px; }

/* Etapas */
.resultados, .compra { margin-top: 30px; }
.passos-compra { display: flex; gap: 8px; padding: 0; margin: 0 0 18px; list-style: none; color: var(--muted); font-size: .9rem; font-weight: 600; }
.passos-compra li { display: flex; align-items: center; gap: 8px; }
.passos-compra li + li::before { content: ""; width: 28px; height: 2px; background: var(--line); border-radius: 2px; margin-right: 2px; }
.passos-compra span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--line);
    font-size: .8rem;
}
.passos-compra .ico { width: 14px; height: 14px; }
.passos-compra .ativo { color: var(--ink); }
.passos-compra .ativo span { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); }
.passos-compra .feito span { background: #e7f6ef; color: var(--ok); border-color: #c8eadb; }
.voltar-passo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    color: var(--marca);
    font-weight: 700;
    text-decoration: none;
}
.voltar-passo::before { content: "←"; }
button.voltar-passo {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}
form.voltar-dados { display: contents; }
.resumo .voltar-passo { justify-self: start; margin: 0; }
.compra-andamento .relogio { margin: 0 0 14px; }

.trecho { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px; }
.trecho h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.5rem; }
.trecho h2 .ico { color: var(--muted); }
.trecho-tag { width: 100%; color: var(--marca); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.trecho-data { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: white; border: 1px solid var(--line); font-size: .9rem; font-weight: 600; }
.trecho-data .ico { width: 16px; height: 16px; color: var(--muted); }

/* Resultados */
.lista-viagem { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.lista-viagem > div { min-width: 0; }
.filtros-viagem, .viagem, .resumo, .onibus, fieldset, .pagina, .cartao-auth, .painel-conta, .minha-conta aside, .aviso, .passos article {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.filtros-viagem { position: sticky; top: 86px; padding: 18px; }
.filtros-viagem h3 { margin: 0 0 12px; font-size: 1.05rem; }
.filtro-titulo { margin: 14px 0 8px; color: var(--ink); font-size: .84rem; font-weight: 700; }
.filtros-viagem input[type="range"] { height: auto; padding: 0; border: 0; accent-color: var(--marca); box-shadow: none; }
.periodos, .andares { display: flex; flex-wrap: wrap; gap: 6px; }
.periodos button, .andares button {
    border: 1px solid var(--line);
    background: white;
    color: var(--texto);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
}
.periodos button.ativo, .andares button.ativo {
    background: color-mix(in srgb, var(--marca) 9%, white);
    border-color: color-mix(in srgb, var(--marca) 35%, white);
    color: var(--marca);
}
.ordena { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--muted); }
.ordena-campo { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
.ordena-campo select { width: auto; height: 40px; }

.viagem {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    align-items: stretch;
    min-width: 0;
    padding: 20px 22px;
    margin-bottom: 12px;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.viagem:hover { border-color: color-mix(in srgb, var(--marca) 30%, var(--line)); box-shadow: 0 16px 36px rgba(15, 27, 45, .09); }
.viagem-topo { display: grid; gap: 12px; align-items: center; }
.viagem-topo:has(.comodidades) { grid-template-columns: minmax(0, 1.5fr) minmax(160px, .7fr); }
.linha-tempo { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.linha-tempo strong { display: block; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; }
.linha-tempo span { display: block; color: var(--muted); font-size: .84rem; }
.linha-tempo > div:last-child { text-align: right; }
.mais-dia { margin-left: 2px; font-size: .55em; font-weight: 800; letter-spacing: 0; color: var(--marca); vertical-align: super; }
.duracao { text-align: center; }
.duracao span { font-size: .78rem; font-weight: 600; }
.duracao i { position: relative; display: block; height: 2px; margin-top: 6px; background: repeating-linear-gradient(90deg, #cfd6e0 0 6px, transparent 6px 10px); }
.duracao i::before, .duracao i::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--marca); background: white; }
.duracao i::before { left: -2px; }
.duracao i::after { right: -2px; background: var(--marca); }
.viagem-info { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .86rem; }
.livres { color: var(--ok); font-weight: 700; }
.livres.poucas { color: #c2410c; }
.comodidades { width: 100%; color: var(--muted); }
.classes-viagem { display: grid; }
.classe-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 18px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.classe-linha .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.preco { display: grid; justify-items: end; gap: 2px; text-align: right; }
.preco > span { color: var(--muted); font-size: .76rem; }
.preco strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
.preco small { color: var(--muted); font-size: .76rem; }
.preco .buscar { margin-top: 8px; }
details { grid-column: 1 / -1; min-width: 0; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--muted); font-size: .9rem; }
details summary { cursor: pointer; color: var(--marca); font-weight: 700; list-style: none; }
details summary::after { content: " ›"; }
details[open] summary::after { content: " ‹"; }
details p { margin: 8px 0 0; }
.itinerario-linha { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; line-height: 1.6; }
.itinerario-linha strong { margin-right: .35em; }
.itinerario-linha span { white-space: nowrap; }
.itinerario-linha span:not(:last-child)::after { content: " ·"; margin-right: .35em; font-weight: 400; }
details p strong { font-weight: 700; color: var(--ink); }

.classes, .legenda { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: .84rem; font-weight: 600; }
.selo.comum { background: #f1f5f9; color: #334155; }
.selo.semi_leito { background: #ebf8f1; color: #0b5c47; }
.selo.leito { background: #ebf2fd; color: #1d4ed8; }
.selo.leito_individual { background: #f3effe; color: #6d28d9; }
.selo.leito_cama { background: #fef3c7; color: #92400e; }
.selo.leito_cama_individual { background: #ffe4e6; color: #9f1239; }

.classe-ativa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px; }
.opcoes-classe { display: grid; gap: 12px; max-width: 520px; margin-top: 8px; }
.opcao-classe {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    background: white;
    box-shadow: var(--sombra);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, transform .12s ease;
}
.opcao-classe:hover { border-color: color-mix(in srgb, var(--marca) 35%, white); transform: translateY(-1px); text-decoration: none; }
.opcao-classe-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.opcao-classe-topo strong { color: var(--ink); font-size: 1.05rem; }
.opcao-classe-preco { color: var(--ink); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.opcao-classe-detalhe { color: var(--muted); font-size: .88rem; font-weight: 600; }
.opcao-classe.semi_leito { border-color: #bfe5d3; }
.opcao-classe.leito { border-color: #c9d9fa; }
.opcao-classe.leito_individual { border-color: #e0d3fb; }
.opcao-classe.leito_cama { border-color: #fcd34d; }
.opcao-classe.leito_cama_individual { border-color: #fda4af; }

/* Mapa de poltronas */
.legenda { margin: 12px 0; color: var(--muted); font-size: .86rem; font-weight: 600; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.legenda i { width: 14px; height: 14px; display: inline-block; border-radius: 4px; }
.legenda .livre { background: white; border: 1.5px solid #c3cedb; }
.legenda .selecionada { background: var(--marca); }
.legenda .ocupada { background: #e6eaf0; }
.legenda .bloqueada { background: repeating-linear-gradient(45deg, #eef1f5 0 3px, #dfe4eb 3px 6px); }
.andares { margin-bottom: 8px; }
#mapa-form { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
.mapas { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.onibus { padding: 18px 22px 22px; border-radius: 48px 48px 22px 22px; }
.onibus p { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 14px; color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.onibus p.fundo { margin: 14px 0 0; }
.volante { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #cbd3dd; position: relative; }
.volante::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #cbd3dd; }
.planta { --lugar: 50px; --corredor: 22px; display: grid; grid-auto-rows: var(--lugar); gap: 8px; justify-content: center; }
.elemento {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    border: 1.5px dashed #cfd7e2;
    border-radius: 12px;
    background: #f4f6f9;
    color: #7a8799;
}
.elemento .ico { width: 18px; height: 18px; }
.elemento small { font-size: .5rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.elemento.banheiro { background: #eef6fb; border-color: #c7dff0; color: #3b78a4; }
.elemento.escada { background: #fbf6ec; border-color: #ecdcb8; color: #9a6b12; }
.elemento.motorista { border-style: solid; background: #eef1f5; }
.poltrona {
    position: relative;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 1px solid #dbe2ea;
    border-radius: 14px 14px 9px 9px;
    background: #f5f7fa;
    color: var(--ink);
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .1s ease, box-shadow .1s ease;
}
.poltrona::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 5px; height: 3px; border-radius: 3px; background: currentColor; opacity: .15; }
label.poltrona:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15, 27, 45, .12); }
.poltrona input { position: absolute; opacity: 0; pointer-events: none; }
.poltrona.livre { background: white; border: 1.5px solid #c3cedb; }
label.poltrona.livre:hover:not(:has(input:checked)) { border-color: var(--marca); color: var(--marca); }
.poltrona.ocupado, .poltrona.reservado { background: #e3e7ed; color: #a3adbb; border-color: #e3e7ed; cursor: not-allowed; text-decoration: line-through; }
.poltrona.bloqueado { background: repeating-linear-gradient(45deg, #eef1f5 0 4px, #e3e8ee 4px 8px); color: #a3adbb; border-color: #e3e8ee; cursor: not-allowed; }
.poltrona.outra-classe {
    background: repeating-linear-gradient(135deg, #f3f5f8 0 5px, #e7ebf1 5px 10px);
    color: #8d96a4;
    border-color: #e0e5ec;
    cursor: default;
    opacity: .62;
    text-decoration: line-through;
    text-decoration-color: #8d96a4;
    text-decoration-thickness: 2px;
    pointer-events: none;
}
.poltrona.outra-classe::after { opacity: .06; }
.poltrona:has(input:checked) { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); box-shadow: 0 6px 16px color-mix(in srgb, var(--marca) 35%, transparent); }

/* Resumo */
.resumo { position: sticky; top: 86px; padding: 20px; display: grid; gap: 12px; }
.resumo h2 { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 1.1rem; }
.contador { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: .85rem; }
.itens p { display: flex; justify-content: space-between; margin: 0; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.itens p.ajuda { border: 0; }
.linhas { display: grid; gap: 6px; padding-top: 4px; }
.linhas p { display: flex; justify-content: space-between; margin: 0; color: var(--muted); font-size: .94rem; }
.linhas p.nota-seguro { display: block; margin-top: -2px; font-size: .8rem; }
.linhas strong { color: var(--ink); }
.linhas .total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.linhas .total strong { font-size: 1.35rem; letter-spacing: -0.02em; }
.aviso-taxa, .clausula-taxa { margin: 0 0 16px; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.clausula-taxa { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.resumo .buscar { width: 100%; }
.seguro { margin: 0; text-align: center; font-size: .8rem; }
.opcao-seguro {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin: 4px 0 8px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: white;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
}
.opcao-seguro:has(input:checked) {
    border-color: var(--marca);
    background: color-mix(in srgb, var(--marca) 6%, white);
}
.opcao-seguro input { width: 20px; height: 20px; margin: 0; accent-color: var(--marca); }
.opcao-seguro .opcao-ico { background: color-mix(in srgb, var(--marca) 10%, white); color: var(--marca); }
.opcao-seguro strong { color: var(--ink); }
.opcao-seguro small { display: block; color: var(--muted); font-weight: 500; font-size: .82rem; }
.opcao-seguro-preco { font-size: 1.05rem; }
.opcao-seguro-texto { margin: -2px 0 18px; }

/* Pagamento */
.relogio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff7e8;
    color: #8a5a12;
    border: 1px solid #fde4b8;
    font-size: .9rem;
    font-weight: 600;
}
.relogio strong { color: inherit; font-variant-numeric: tabular-nums; }
.relogio .ico { width: 17px; height: 17px; }
.ficha-compra { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
.bloco-titulo { margin: 0 0 12px; font-size: 1.1rem; }
fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 16px;
    padding: 22px;
}
legend {
    float: left;
    width: 100%;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-weight: 700;
}
legend strong { margin-left: auto; }
legend .num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--marca); color: var(--marca-texto); font-size: .85rem; }
legend .papel { padding: 3px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.largo, .colo { grid-column: 1 / -1; }
.colo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px; border-radius: 14px; background: var(--soft); }
.check { flex-direction: row; align-items: center; gap: 10px; color: var(--ink); font-size: .92rem; font-weight: 600; }
.aceite-taxa { margin: 0 0 12px; }
.aceite-taxa .check { align-items: flex-start; margin: 0; line-height: 1.4; font-weight: 600; color: var(--ink); }
.aceite-taxa input { flex: 0 0 auto; margin-top: 3px; }
.aceite-taxa .ler-mais { display: table; margin: 2px 0 0; padding: 0; border: 0; background: none; color: var(--marca); font: inherit; font-size: .84rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.aceite-taxa .aceite-mais { margin: 6px 0 0 26px; color: var(--texto); font-size: .84rem; font-weight: 500; line-height: 1.45; }
.pontos-viagem { display: grid; gap: 2px; flex-basis: 100%; margin: 8px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.35; }
.pontos-viagem strong { font-weight: 700; }
.trecho-resumo .pontos-viagem { display: grid; justify-content: start; margin-top: 4px; }
.opcao {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.meios-loja { display: grid; gap: 10px; }
.form-cartao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.parcelas-faturas { grid-column: 1 / -1; margin: 0; padding: 10px 12px; list-style: none; display: grid; gap: 6px; border: 1px solid var(--linha, #e3ebf3); border-radius: 12px; background: #f7fafc; }
.parcelas-faturas li { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; }
.parcelas-faturas strong { font-weight: 700; }
.form-cartao .buscar { grid-column: 1 / -1; }
.ajuda-parcelas { font-weight: 500; letter-spacing: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.meios-loja .opcao { display: flex; width: 100%; border: 1px solid var(--line); background: #fff; font: inherit; text-align: left; }
.opcao:has(input:checked) { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 5%, white); }
.opcao-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--soft); font-size: .75rem; font-weight: 800; color: var(--ok); }
.opcao strong { display: block; font-size: .95rem; }
.opcao small { display: block; color: var(--muted); font-weight: 500; }

/* Páginas simples */
.pagina { padding: 32px; }
.pagina.estreita, .sucesso { max-width: 520px; text-align: center; }
.pagina.estreita .ficha { text-align: left; margin-top: 18px; }
.pagina h1 { margin: 12px 0 6px; font-size: 1.6rem; }
.sucesso-ico, .auth-ico {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--marca) 10%, white);
    color: var(--marca);
}
.sucesso-ico { background: #e7f6ef; color: var(--ok); border-radius: 50%; }
.sucesso.com-passagem { max-width: 720px; }
.sucesso-nota { margin: 0 auto 16px; max-width: 36rem; }
.espera-pagamento {
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff7e8;
    color: #8a5a12;
    border: 1px solid #fde4b8;
    font-weight: 700;
    text-align: left;
}
.alerta-ico { background: #fff7e8; color: #b45309; }
.codigos { display: grid; gap: 8px; margin: 18px 0; }
.codigo { margin: 0; padding: 14px; border: 2px dashed var(--line); border-radius: 14px; background: var(--soft); color: var(--ink); font-size: 1.5rem; font-weight: 800; letter-spacing: .12em; }
.aviso { text-align: center; padding: 48px 20px; max-width: 560px; }
.aviso h1 { margin: 12px 0 6px; }
.aviso p { color: var(--muted); }

.pedido {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    margin-top: 12px;
    padding: 16px 18px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    text-align: left;
    color: inherit;
    text-decoration: none;
}
a.pedido, button.pedido { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
a.pedido:hover, button.pedido:hover { border-color: color-mix(in srgb, var(--marca) 40%, var(--line)); box-shadow: 0 8px 20px rgba(15, 27, 45, .06); text-decoration: none; }
button.pedido { width: 100%; font: inherit; }
.pedido-abrir { margin: 0; }
.cupom-acoes form { margin: 0; }
.cupom-acoes .cupom-voltar { font: inherit; cursor: pointer; }
.pedido span { display: block; color: var(--muted); font-size: .86rem; }
.status { display: inline-flex !important; padding: 4px 10px; border-radius: 999px; font-size: .78rem !important; font-weight: 700; background: var(--soft); }
.s-pendente { background: #fff7e8; color: #8a5a12 !important; }
.s-confirmada, .s-embarcada { background: #e7f6ef; color: #0b5c47 !important; }
.s-cancelada, .s-no_show { background: #fff1ee; color: #a3361b !important; }

/* Conta */
.conta-auth { max-width: 460px; }
.cartao-auth { padding: 32px 28px; text-align: center; }
.cartao-auth h1 { margin: 14px 0 4px; font-size: 1.55rem; }
.cartao-auth > .ajuda { margin: 0 0 20px; }
.ficha { display: grid; gap: 14px; text-align: left; }
.ficha .buscar { width: 100%; margin-top: 4px; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.esqueci { justify-self: end; margin-top: -6px; color: var(--marca); font-size: .86rem; font-weight: 700; text-decoration: none; }
.troca-conta { margin: 18px 0 0; color: var(--muted); font-size: .92rem; }
.troca-conta a { color: var(--marca); font-weight: 700; text-decoration: none; }

.minha-conta { display: grid; grid-template-columns: 250px 1fr; gap: 20px; align-items: start; }
.minha-conta aside { display: grid; gap: 4px; padding: 14px; }
.conta-quem { display: flex; align-items: center; gap: 10px; padding: 6px 6px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.conta-quem span:not(.avatar) { display: block; color: var(--muted); font-size: .8rem; }
.avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--marca); color: var(--marca-texto); font-weight: 800; }
.minha-conta aside a, .minha-conta aside button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--texto);
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.minha-conta aside .ico { width: 18px; height: 18px; color: var(--muted); }
.minha-conta aside a:hover, .minha-conta aside button:hover { background: var(--soft); }
.minha-conta aside a.ativo { background: color-mix(in srgb, var(--marca) 9%, white); color: var(--marca); }
.minha-conta aside a.ativo .ico { color: var(--marca); }
.minha-conta aside form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
.painel-conta { padding: 26px; }
.painel-conta h2 { margin: 0 0 16px; font-size: 1.25rem; }
.cupom-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.cupom-acoes .buscar { height: 44px; padding: 0 18px; box-shadow: none; }
.cupom-voltar {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    background: var(--soft);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}
.cupom-voltar:hover { background: #e6ebf2; }
.cupom-palco {
    display: flex;
    justify-content: center;
    padding: 28px 16px;
    border-radius: 16px;
    background: #e8e8e8;
}
.cupom-palco + .cupom-palco { margin-top: 18px; }
.painel-conta .ficha { max-width: 640px; }
.painel-conta .ajuda { margin: -6px 0 0; }
.bloco-conta { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
input[readonly] { background: var(--soft); color: var(--muted); }
.dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.dados div { padding: 14px; border-radius: 14px; background: var(--soft); }
.dados dt { color: var(--muted); font-size: .78rem; font-weight: 700; }
.dados dd { margin: 2px 0 0; color: var(--ink); font-weight: 600; word-break: break-word; }
.link-perigo { background: transparent; border: 0; color: #b42318; cursor: pointer; padding: 0; font-weight: 600; }

/* Como funciona */
.como { margin-top: 64px; text-align: center; }
.como h2 { margin: 0; font-size: 1.8rem; }
.como-sub { margin: 6px 0 26px; color: var(--muted); }
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: center; }
.passos article {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 28px 32px;
    border-radius: 22px;
    box-shadow: none;
}
.passos i {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
}
.passos i .ico { width: 28px; height: 28px; }
.passos h3 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; }
.passos p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.selos-confianca { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 26px; color: var(--muted); font-size: .9rem; font-weight: 600; }
.selos-confianca span { display: inline-flex; align-items: center; gap: 8px; }
.selos-confianca .ico { width: 18px; height: 18px; color: var(--ok); }

/* Rodapé */
footer { background: var(--rodape); color: var(--rodape-texto); }
.rodape {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 28px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 48px 20px 32px;
}
.rodape-marca strong { color: inherit; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.03em; }
.rodape-marca p { margin: 8px 0 14px; opacity: .75; font-size: .92rem; max-width: 280px; }
.rodape-endereco { margin: 0 0 14px; max-width: 280px; color: inherit; font-style: normal; font-size: .92rem; line-height: 1.45; opacity: .75; }
.rodape-endereco span { display: block; }
.rodape-endereco .cep { white-space: nowrap; }
.rodape-whats {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 9px 14px !important;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rodape-texto) 12%, transparent);
    font-weight: 600;
    opacity: 1 !important;
}
.rodape-whats .ico { width: 18px; height: 18px; }
.rodape h2 { margin: 0 0 12px; color: inherit; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.rodape a, .texto-rodape {
    display: block;
    margin: 8px 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: .93rem;
    text-align: left;
    text-decoration: none;
    opacity: .75;
    cursor: pointer;
    transition: opacity .15s ease;
}
.rodape a:hover, .texto-rodape:hover { opacity: 1; }
.selo-pagamento {
    display: grid;
    justify-items: start;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--rodape-texto) 16%, transparent);
}
.selo-pagamento img { display: block; height: 36px; width: auto; }
.selo-pagamento strong { font-size: 1.05rem; letter-spacing: -.02em; }
.selo-pagamento small { font-size: .72rem; opacity: .7; }
.tecnologia {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 16px 20px 20px;
    border-top: 1px solid color-mix(in srgb, var(--rodape-texto) 14%, transparent);
    font-size: .8rem;
    opacity: .7;
}
.tecnologia a { color: inherit; text-decoration: none; }
.tecnologia a:hover { text-decoration: underline; }
.tecnologia strong { color: inherit; }

dialog {
    width: min(600px, calc(100% - 32px));
    max-height: 80vh;
    padding: 0;
    border: 0;
    border-radius: 22px;
    box-shadow: var(--sombra-forte);
    color: var(--texto);
}
dialog[open] { animation: surgir .18s ease; }
dialog::backdrop { background: rgba(15, 27, 45, .5); backdrop-filter: blur(2px); }
.dialogo-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.dialogo-topo h2 { margin: 0; font-size: 1.15rem; }
.dialogo-texto { padding: 20px 22px 26px; line-height: 1.65; }
.fechar { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
@keyframes surgir { from { opacity: 0; transform: translateY(10px) scale(.98); } }

.dock { display: none; }

@media (max-width: 980px) {
    .lista-viagem, #mapa-form, .ficha-compra, .minha-conta { grid-template-columns: 1fr; }
    .filtros-viagem { position: static; padding: 12px 14px; }
    .lista-viagem > * { min-width: 0; }
    .filtros-viagem h3 { display: none; }
    .filtros-viagem .filtro-titulo { margin: 0 0 6px; }
    .filtros-viagem label.filtro-titulo { margin-top: 10px; }
    .filtros-viagem .periodos { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 0 14px 2px; scrollbar-width: none; }
    .filtros-viagem .periodos::-webkit-scrollbar { display: none; }
    .filtros-viagem .periodos button { flex: none; }
    .rodape { grid-template-columns: 1fr 1fr; }
    .rodape-marca { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    body { font-size: 15px; }
    .topo-miolo { padding: 14px 16px; }
    .logo { min-width: 0; }
    .logo-img img { max-height: 52px; max-width: 210px; }
    .logo-img.fundo img { max-height: 44px; }
    .topo nav { display: none; }
    .topo-conta { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--topo-texto) 14%, transparent); }
    main { padding: 20px 14px 110px; }
    .hero { margin: -20px -14px 0; padding: 30px 14px 0; background: linear-gradient(to bottom, var(--topo) 0, var(--topo) calc(100% - 140px), transparent calc(100% - 140px)); }
    .hero-texto { text-align: left; margin-bottom: 18px; }
    .hero h1 { font-size: 1.9rem; }
    .hero p { font-size: .98rem; }
    .busca { padding: 14px; border-radius: 20px; }
    .modos { display: flex; }
    .modos button { flex: 1; }
    .campos { flex-direction: column; align-items: stretch; gap: 10px; position: relative; }
    .campo, .campo.escolhe, .campos > label.campo, .campo:has([name="passageiros"]) { flex: none; min-width: 0; width: 100%; }
    .troca { position: absolute; right: 14px; top: 64px; z-index: 2; margin: 0; background: white; box-shadow: var(--sombra); }
    .campos .buscar { width: 100%; }
    .calendario {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: auto;
        max-height: min(82vh, 640px);
        margin: 0;
        padding: 6px 12px calc(12px + env(safe-area-inset-bottom));
        border-radius: 22px 22px 0 0;
        transform: none;
        z-index: 40;
        overflow: auto;
    }
    .calendario::before {
        content: "";
        display: block;
        width: 42px;
        height: 4px;
        margin: 2px auto 10px;
        border-radius: 999px;
        background: #d5dbe3;
    }
    body.cal-aberto { overflow: hidden; }
    body.cal-aberto::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 27, 45, .45);
        z-index: 35;
    }
    .cal-topo { margin-bottom: 6px; }
    .cal-nota { font-size: .72rem; line-height: 1.25; }
    .dia { min-height: 40px; padding: 2px 1px; font-size: .88rem; }
    .passos-compra { font-size: .8rem; gap: 6px; }
    .passos-compra li + li::before { width: 14px; }
    .trecho h2 { font-size: 1.2rem; }
    .viagem { gap: 8px; padding: 16px; }
    .viagem-topo:has(.comodidades), .classe-linha { grid-template-columns: 1fr; }
    .preco { grid-template-columns: 1fr auto; justify-items: start; align-items: center; text-align: left; border-top: 1px solid var(--line); padding-top: 12px; }
    .preco > span, .preco small { grid-column: 1; }
    .preco strong { grid-column: 1; grid-row: 2; }
    .preco .buscar { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
    .onibus { padding: 14px 12px 18px; }
    .planta { --lugar: 44px; --corredor: 14px; gap: 7px; }
    .elemento small { font-size: .52rem; }
    .poltrona { width: 44px; height: 44px; font-size: .8rem; }
    body.pagina-viagem main { padding-top: 8px; }
    body.pagina-viagem .compra { margin-top: 0; }
    body.pagina-viagem .passos-compra { margin-bottom: 6px; }
    body.pagina-viagem .voltar-passo { margin-bottom: 6px; }
    body.pagina-viagem .trecho { margin-bottom: 6px; gap: 4px 10px; }
    body.pagina-viagem .classe-ativa { margin-bottom: 0; }
    body.pagina-viagem .legenda { margin: 4px 0 8px; }
    body.pagina-viagem .onibus { padding: 10px 12px 12px; }
    #mapa-form .resumo { position: static; bottom: auto; top: auto; z-index: 1; margin-top: 16px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 12px 14px; box-shadow: none; }
    #mapa-form .resumo h2 { grid-column: 1; justify-content: flex-start; gap: 8px; font-size: .9rem; color: var(--muted); }
    #mapa-form .resumo .contador { min-width: 22px; height: 22px; font-size: .75rem; }
    #mapa-form .resumo .itens, #mapa-form .resumo .linhas p:not(.total) { display: none; }
    #mapa-form .resumo .linhas { grid-column: 1; padding: 0; }
    #mapa-form .resumo .linhas .total { margin: 0; padding: 0; border: 0; font-size: .9rem; }
    #mapa-form .resumo .buscar { grid-column: 2; grid-row: 1 / span 2; width: auto; margin: 0; padding-inline: 18px; }
    #mapa-form .resumo .voltar-passo { display: none; }
    #mapa-form .mapas { overflow: visible; }
    .classe-linha .preco { border-top: 0; padding-top: 0; }
    .ficha-compra .resumo { position: static; top: auto; z-index: auto; margin-top: 16px; grid-template-columns: 1fr; gap: 12px; padding: 18px; }
    .relogio { margin: 4px 0 0; }
    fieldset, .colo, .dados, .dupla, .form-cartao { grid-template-columns: 1fr; }
    fieldset { padding: 16px; }
    .pagina, .cartao-auth, .painel-conta { padding: 22px 18px; }
    .passos { grid-template-columns: 1fr; }
    .como { margin-top: 40px; }
    .pedido { grid-template-columns: 1fr auto; }
    .pedido > strong { grid-column: 2; grid-row: 1; }
    .pedido .status { grid-column: 1; }
    .rodape { grid-template-columns: 1fr; gap: 20px; padding-top: 32px; }
    .tecnologia { flex-direction: column; padding-bottom: 96px; }
    .dock {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 30;
        padding: 6px;
        background: rgba(255, 255, 255, .94);
        backdrop-filter: blur(14px);
        border: 1px solid var(--line);
        border-radius: 22px;
        box-shadow: 0 12px 34px rgba(15, 27, 45, .16);
    }
    .dock a {
        display: grid;
        justify-items: center;
        gap: 2px;
        padding: 7px 4px;
        border-radius: 16px;
        color: var(--muted);
        font-size: .72rem;
        font-weight: 700;
        text-decoration: none;
    }
    .dock a.ativo { color: var(--marca); background: color-mix(in srgb, var(--marca) 9%, white); }
}

.trecho-grupo { margin: 18px 0 8px; font-weight: 800; }
.trecho-resumo { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line, #e6ebf2); }
.trecho-resumo p { display: flex; justify-content: space-between; margin: 0; gap: 12px; }
.pix-caixa { display: grid; justify-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: #f4f7fb; }
.pix-caixa .buscar { width: min(100%, 320px); }
.pix-caixa .alerta { width: min(100%, 320px); margin: 0; }
.pix-caixa svg, .pix-caixa img.qr { width: min(100%, 320px); height: auto; background: #fff; border-radius: 12px; }
.pix-codigo { width: 100%; min-height: 72px; font-size: .8rem; }
#paymentBrick_container {
    min-height: 320px;
    padding: 8px 4px 4px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}
.compra-andamento {
    max-width: 560px;
    margin: 28px auto;
    padding: 32px 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    text-align: center;
    box-shadow: var(--sombra);
}
.compra-andamento h1 { margin: 12px 0 6px; font-size: 1.6rem; }
.compra-andamento > p { margin: 0 auto 8px; max-width: 42ch; color: var(--muted); }
.compra-andamento .trechos { display: grid; gap: 8px; margin: 18px 0; text-align: left; }
.compra-andamento .trechos p {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--soft);
}
.compra-andamento .trechos span { color: var(--muted); font-size: .92rem; }
.compra-andamento .acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.compra-andamento form { margin: 0; }
.buscar.secundario {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: none;
}
.viagem.fora-pagina { display: none !important; }
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; color: var(--muted); font-size: .88rem; }
.paginacao p { margin: 0; }
.paginacao nav { display: flex; flex-wrap: wrap; gap: 8px; }
.paginacao a { min-width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: white; color: var(--texto); font-weight: 600; }
.paginacao a:hover { text-decoration: none; background: var(--soft); }
.paginacao a.ativo { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }

@media print {
    .sucesso-nota, .espera-pagamento { display: none !important; }
    body.com-cupom { background: #fff; }
    body.com-cupom .topo,
    body.com-cupom footer,
    body.com-cupom .dock,
    body.com-cupom .minha-conta aside,
    body.com-cupom .cupom-acoes,
    body.com-cupom .painel-conta > h2,
    body.com-cupom .pagina > h1 { display: none !important; }
    body.com-cupom .pagina { border: 0; box-shadow: none; padding: 0; background: transparent; }
    body.com-cupom main { padding: 0; }
    body.com-cupom .minha-conta { display: block; max-width: none; margin: 0; }
    body.com-cupom .painel-conta { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    body.com-cupom .cupom-palco { padding: 0; background: #fff; border-radius: 0; }
}