/* ═══════════════════════════════════════════════════════════════════════════
PEÇAS DO TERMINAL — o vocabulário de aviação nas páginas INTERNAS
───────────────────────────────────────────────────────────────────────────
A home ganhou (27/08/2026) um vocabulário de interface que já vivia só no
conteúdo: painel de embarque, cartão de embarque com picote, carimbo de
passaporte, rota do avião, trilha de voo. As internas continuavam com o
layout genérico de qualquer site — breadcrumb, etiqueta, título, parágrafo
cinza, cartões brancos arredondados, pílulas, marcadores 01/02/03 — e por
isso pareciam de outro autor.
Este arquivo leva o MESMO vocabulário para as internas. São CINCO objetos,
e só cinco, para que a repetição de uma página para outra seja lida como
sistema e não como efeito novo a cada rolagem:
1. PISTA (.runway) ........ a linha que fecha o cabeçalho de toda página:
eixo tracejado com a faixa de cabeceira nas
pontas. Substitui o fio cinza.
2. PAINEL (.board) ........ o painel de partidas: toda LISTA DE DATAS do
site (agenda, calendário do ambiente, edições
de um evento) é uma linha do painel — chapa
escura, hora em mono, destino em Geist,
LED de situação. O relógio regressivo (.flap)
é o mesmo painel em placas.
3. CARTÃO (.ticket) ....... o cartão de embarque deitado: título, a linha
DATA · DIA · HORA · LOCAL, picote e canhoto
com código de barras. Serve para o evento,
para a ficha do Café e para os dados do Pix.
4. CARIMBO (.stamp) ....... o carimbo de passaporte em CSS (nada de PNG):
tinta azul da casa (--blue), leve rotação.
Marca um fato — GRATUITO, TODO DOMINGO, 2013.
5. ROTA (.route) .......... a lista em sequência como plano de voo: um
eixo tracejado vertical, um ponto por escala,
o avião na partida. Só onde a ORDEM importa
(os passos do Volts, o roteiro de um curso,
os momentos do Café) — lista sem ordem não
ganha rota nem número.
Mais o utilitário .ph-strip (a linha de fatos em mono do cabeçalho) e a
tira de colunas por fio (.vgrid/.vcard) que já era do site.css.
Tipografia: Geist (display e corpo) e Geist Mono para o que é
DADO — hora, data, situação, rótulo de painel. Mono não é enfeite aqui: é
a letra do painel de aeroporto e do bilhete, e só entra onde há dado.
Tudo respeita prefers-reduced-motion: sem movimento, o painel mostra a
linha pronta, o carimbo não gira e a rota não desenha.
═══════════════════════════════════════════════════════════════════════════ */
:root {
--chapa: #131518; /* a chapa do painel (a mesma dos cartões do H7 Plus) */
--chapa-borda: #23262c;
--chapa-fio: rgba(236, 231, 216, .11);
--chapa-apagado: #9aa3b0; /* rótulo apagado sobre a chapa — 5,5:1 sobre a
chapa clara (#272c33) e 7,2:1 sobre a escura;
o #79808c antigo dava 3,5:1 nos "dias/horas"
de 9,5px do relógio, abaixo do AA */
--amber: #f2a33c; /* a única cor viva do painel */
--led: #46d97e;
--mono: "Geist Mono", ui-monospace, Consolas, "Courier New", monospace;
}
.mono { font-family: var(--mono); }
/* ═══ 0. CABEÇALHO DE PÁGINA ═══════════════════════════════════════════════
O mesmo cabeçalho que já existia (eyebrow → h1 → parágrafo) ganha duas
coisas: a linha de fatos em mono (.ph-strip) e a pista (.runway) fechando
o bloco. O h1 recebe a virada de texto no carregamento (hangar-motion.js):
ele se RESOLVE como um letreiro, da esquerda para a direita. É o mesmo
mecanismo do painel da home, e é o que amarra a entrada de toda página. */
/* `section.blk` do site.css tem especificidade (0,1,1); o seletor precisa
empatar para o padding-bottom:0 valer. */
section.blk.ph, .blk.ph, .ph { padding-top: 150px; padding-bottom: 0; }
@media (max-width: 767px) { section.blk.ph, .blk.ph, .ph { padding-top: 128px; } }
.ph-h1 { font-size: clamp(2.3rem, 6.4vw, 5rem); margin-top: 16px; max-width: 18ch; }
.ph-lead { margin-top: 22px; font-size: 16px; line-height: 1.7; max-width: 58ch; color: var(--muted); }
.ph-lead b { color: var(--ink); font-weight: 600; }
.ph-acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.ph-acoes .btn { border-radius: 12px; }
/* A linha de fatos: só o que é verdade e literal, em mono, separado por um
ponto. Não é metáfora — é a linha de dados de um bilhete. */
.ph-strip {
display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 26px;
font-family: var(--mono); font-size: 11.5px; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.ph-strip > span { display: inline-flex; align-items: center; position: relative; }
/* o separador é um fio à esquerda do item, e só em telas onde os itens
cabem lado a lado — em 390px eles empilham e um ponto solto no começo
da linha lia como erro */
@media (min-width: 600px) {
.ph-strip > span:not(:last-child)::after {
content: ""; position: absolute; right: -14px; top: 15%; bottom: 15%;
border-left: 1px solid currentColor; opacity: .35;
}
}
.ph-strip .k { color: var(--muted); margin-right: 8px; }
/* sobre fundo escuro (heros com foto) */
.ph-strip.inv { color: #fff; }
.ph-strip.inv .k { color: rgba(255, 255, 255, .6); }
/* ═══ 1. PISTA ═══════════════════════════════════════════════════════════════
O eixo central tracejado de uma pista, com a faixa de cabeceira (as barras
paralelas) nas duas pontas. Desenhada só com gradiente: nenhuma imagem.
É a divisória do site inteiro a partir de agora — onde antes havia
`border-top:1px solid var(--border)`, há a pista. */
.runway {
position: relative; height: 22px; margin-top: 34px;
--rw: var(--ink);
}
.runway::before {
content: ""; position: absolute; left: 44px; right: 44px; top: 50%; height: 2px;
margin-top: -1px;
background: repeating-linear-gradient(90deg, var(--rw) 0 22px, transparent 22px 40px);
opacity: .55;
}
.runway::after {
content: ""; position: absolute; inset: 0;
background:
repeating-linear-gradient(90deg, var(--rw) 0 3px, transparent 3px 7px) left center / 32px 100% no-repeat,
repeating-linear-gradient(90deg, var(--rw) 0 3px, transparent 3px 7px) right center / 32px 100% no-repeat;
opacity: .85;
}
.runway.inv { --rw: #fff; }
.runway.fina { height: 12px; margin-top: 22px; }
.runway.fina::before { left: 24px; right: 24px; }
.runway.fina::after { background-size: 18px 100%, 18px 100%; }
/* ═══ 2. PAINEL DE PARTIDAS ═════════════════════════════════════════════════
Uma linha por data. A anatomia, da esquerda para a direita:
.bd-when a data (Geist) e, embaixo, dia e hora (mono)
.bd-dest o destino — o nome do evento, em Geist, com virada de texto
.bd-note o detalhe (mono, apagado)
.bd-st a situação: LED verde "Confirmado" ou âmbar "Horário a confirmar"
— as duas únicas situações que a agenda conhece de verdade
.bd-go a ação
No celular as colunas viram duas linhas: data+destino em cima, o resto
embaixo. A chapa é a mesma dos cartões do H7 Plus na home. */
/* AUDITORIA 18/09/2026 (Klaus, no painel de datas do ambiente): "ajustar
fontes para Geist" — e "os ajustes aqui vao para todos os itens de agenda".
A base do painel era o Geist Mono; data e destino ja eram Geist, o resto
(cabecalho, dia da semana, hora, "ver evento", detalhe) vinha em mono. Agora
o painel inteiro e' Geist. A anatomia, a grade e as cores nao mudam — so a
letra. Para voltar: var(--mono) nesta linha. */
.board {
background: var(--chapa); color: var(--cream); border: 1px solid var(--chapa-borda);
border-radius: 16px; overflow: hidden; margin-top: 28px;
font-family: "Geist", sans-serif;
}
.board + .board { margin-top: 16px; }
.board-head {
display: grid; grid-template-columns: 150px 1.6fr 1.2fr 190px 150px; gap: 18px;
padding: 12px 22px; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
color: var(--chapa-apagado); border-bottom: 1px solid var(--chapa-fio);
}
/* O cabeçalho do mês é uma linha do painel, não um título solto: "AGOSTO 2026"
em mono, com o ano apagado — do jeito que um painel anuncia o bloco. */
.board-month {
display: flex; align-items: center; gap: 14px;
padding: 16px 22px 12px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
color: var(--cream); border-bottom: 1px solid var(--chapa-fio);
}
.board-month small { font-size: inherit; color: var(--chapa-apagado); letter-spacing: inherit; }
.board-month::after { content: ""; flex: 1; height: 1px; background: var(--chapa-fio); }
.board-row {
display: grid; grid-template-columns: 150px 1.6fr 1.2fr 190px 150px; gap: 18px;
align-items: center; padding: 18px 22px; min-height: 76px;
border-bottom: 1px solid var(--chapa-fio); color: inherit; text-decoration: none;
transition: background .2s;
}
.board-row:last-child { border-bottom: 0; }
.board-row > * { min-width: 0; overflow-wrap: anywhere; }
a.board-row:hover, .board-row:has(a:hover) { background: rgba(255, 255, 255, .035); }
.bd-when b {
display: block; font-family: "Geist", sans-serif; font-weight: 800; font-size: 20px;
line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.bd-when small { display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--chapa-apagado); }
.bd-dest {
font-family: "Geist", sans-serif; font-weight: 800; text-transform: uppercase;
font-size: 17px; line-height: 1.08; letter-spacing: -.01em; color: var(--cream);
}
.bd-dest a { color: inherit; text-decoration: none; }
.bd-dest a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bd-note { font-size: 12px; line-height: 1.5; color: var(--chapa-apagado); }
.bd-st { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #a8b5a4; }
.bd-st .led { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--led); box-shadow: 0 0 6px rgba(70, 217, 126, .7); }
.bd-st.pend { color: #c9b28a; }
.bd-st.pend .led { background: var(--amber); box-shadow: 0 0 6px rgba(242, 163, 60, .7); }
.bd-go {
justify-self: end; display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
color: var(--cream); white-space: nowrap; min-height: 44px; text-decoration: none;
}
.bd-go::after { content: "→"; font-family: "Geist", sans-serif; transition: transform .25s; }
/* G13 (call 10/09, 00:56:07) - "as cores de destaque (amarelo) serao
substituidas por branco em fundos escuros para melhorar a legibilidade".
Vale para rotulo, link e botao. O LED de PENDENTE (.bd-st.pend .led)
continua ambar de proposito: la o amarelo nao e enfeite, e o ESTADO da
coisa, como num semaforo - trocar por branco apagaria a informacao. */
.board-row:hover .bd-go { color: #fff; }
.board-row:hover .bd-go::after { transform: translateX(5px); }
.bd-go:empty { display: none; }
.board-empty { padding: 26px 22px; font-size: 13px; color: var(--chapa-apagado); line-height: 1.6; }
/* variante compacta: sem coluna de nota (calendário do ambiente, edições) */
.board--curto .board-head, .board--curto .board-row { grid-template-columns: 150px 1.6fr 190px 150px; }
@media (max-width: 899px) {
.board-head { display: none; }
.board-row, .board--curto .board-row {
grid-template-columns: 96px 1fr; grid-template-rows: auto auto; gap: 8px 16px;
padding: 16px 18px;
}
.bd-when { grid-row: 1 / span 2; align-self: start; }
.bd-when b { font-size: 18px; }
.bd-note { grid-column: 2; }
.bd-st { grid-column: 2; }
.bd-go { grid-column: 2; justify-self: start; min-height: 0; margin-top: 2px; }
.board-row .bd-st + .bd-go, .board-row .bd-note + .bd-st { margin-top: 0; }
}
/* ═══ 2b. O RELÓGIO EM PLACAS (.flap) ═══════════════════════════════════════
O cronômetro dos ambientes e dos cursos era um bloco de cor cheia com
caixinhas — o pedaço mais "gerado" daquelas páginas. Agora é o painel:
a legenda em mono, cada casa (dias, horas, min, seg) numa placa de flap
com a costura no meio, e a cor do ambiente só no LED. Estas regras
RE-PINTAM o markup que o amb-render.js/curso-render.js já emitem
(.amb-conta / .cur-conta); nenhum deles precisou mudar. */
/* AUDITORIA 18/09/2026 (Klaus): "remover cores amarelas por branco" — nos
itens de agenda (o painel escuro) e no cronometro. O "amarelo" e' o --cream
(#efe7d6), que sobre a chapa preta puxa para o palha; mesma troca ja feita
no rodape (12/09) e no carrossel de ambientes da home. Redefinir a variavel
dentro dos dois blocos pinta texto, numero, LED-off e rotulo de uma vez. O
`:not(.creme)` existe porque no painel CREME o --cream e' o PAPEL, nao a
tinta — trocar ali apagaria o fundo do painel da ficha de evento. */
.board:not(.creme), .amb-conta, .cur-oferta .cur-conta-wrap { --cream: #fff; }
.amb-conta, .cur-oferta .cur-conta-wrap {
background: var(--chapa); color: var(--cream); border: 1px solid var(--chapa-borda);
border-radius: 16px; padding: 22px 24px 24px; font-family: var(--mono);
}
.amb-conta__legenda {
display: flex; align-items: center; gap: 10px;
font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--cream);
}
.amb-conta__legenda::before {
content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
background: var(--amb, var(--led)); box-shadow: 0 0 7px color-mix(in srgb, var(--amb, var(--led)) 70%, transparent);
}
.amb-conta__digitos, .cur-conta {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px;
}
.cur-conta { grid-template-columns: none; }
.amb-conta__digitos > div, .cur-conta > div {
position: relative; text-align: center; padding: 16px 6px 12px; min-width: 0; border-radius: 6px;
background: linear-gradient(180deg, #272c33 0%, #20252b 48%, #161a1f 52%, #1b2025 100%);
box-shadow: 0 1px 0 rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .025);
}
.amb-conta__digitos > div::after, .cur-conta > div::after {
content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .6);
}
.amb-conta__digitos b, .cur-conta b {
display: block; font-family: "Geist", sans-serif; font-weight: 800;
font-size: clamp(30px, 6vw, 46px); line-height: 1; letter-spacing: -.02em; color: var(--cream);
font-variant-numeric: tabular-nums;
}
.amb-conta__digitos small, .cur-conta small {
display: block; margin-top: 8px; font-family: var(--mono); font-size: 9.5px; font-weight: 500;
letter-spacing: .2em; text-transform: uppercase; color: var(--chapa-apagado);
}
.amb-conta__fim { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--cream); }
.amb-conta__onde { margin-top: 16px; padding-top: 14px; font-size: 12px; letter-spacing: .06em; border-top: 1px solid var(--chapa-fio); color: var(--cream); }
.amb-conta__onde small { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--chapa-apagado); margin-right: 8px; }
@media (max-width: 720px) {
.amb-conta { padding: 18px 16px 20px; }
.amb-conta__digitos, .cur-conta { gap: 6px; }
.amb-conta__digitos > div, .cur-conta > div { padding: 14px 4px 10px; }
}
/* ═══ 3. CARTÃO DE EMBARQUE DEITADO ═════════════════════════════════════════
A mesma anatomia do .ecard da home, na horizontal: o corpo à esquerda, o
picote vertical com as mordidas, o canhoto à direita com o código de barras
e a ação. Em telas estreitas o canhoto vai para baixo e o picote deita. */
.ticket {
display: grid; grid-template-columns: 1fr 34px 260px; margin-top: 30px;
background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
}
.ticket > * { min-width: 0; }
.tk-main { padding: 30px 32px 28px; }
.tk-k { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.tk-t { font-family: "Geist", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin-top: 10px; }
.tk-t.h1 { font-size: clamp(2.2rem, 5.6vw, 4.2rem); }
.tk-p { margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: var(--muted); max-width: 60ch; }
.tk-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, max-content)); gap: 12px 34px;
margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}
.tk-grid > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tk-grid small { font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.tk-grid b { font-family: "Geist", sans-serif; font-weight: 800; font-size: 16px; line-height: 1.1; text-transform: uppercase; letter-spacing: -.01em; }
.tk-grid b.normal { text-transform: none; font-family: "Geist", sans-serif; font-weight: 600; font-size: 14.5px; }
/* O picote vertical: tracejado no meio e as mordidas em cima e embaixo. */
.tk-perf { position: relative; border-left: 1.5px dashed #cfcfcf; margin: 0 16px; }
.tk-perf::before, .tk-perf::after {
content: ""; position: absolute; left: -10px; width: 18px; height: 18px; border-radius: 50%;
background: var(--bg); border: 1px solid var(--border); box-sizing: border-box;
}
.tk-perf::before { top: -10px; }
.tk-perf::after { bottom: -10px; }
.tk-stub { background: #f8f8f6; padding: 26px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.tk-stub .ebar {
display: block; height: 30px; opacity: .9;
background: repeating-linear-gradient(90deg, #151515 0 2px, transparent 2px 4px, #151515 4px 5px, transparent 5px 8px,
#151515 8px 11px, transparent 11px 12px, #151515 12px 13px, transparent 13px 16px, #151515 16px 18px, transparent 18px 21px);
}
.tk-stub .tk-k { margin-top: 10px; }
.tk-stub .btn { width: 100%; border-radius: 12px; }
.tk-stub .btn + .btn { margin-top: 8px; }
.tk-stub .tk-code { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin-top: 8px; }
/* a variante escura (para o Café e o Quero Jesus, sobre foto) */
.ticket.dark { background: var(--chapa); color: var(--cream); border-color: var(--chapa-borda); }
.ticket.dark .tk-grid { border-color: var(--chapa-fio); }
.ticket.dark .tk-stub { background: #0f1113; }
.ticket.dark .tk-perf { border-color: #3a3f47; }
.ticket.dark .tk-perf::before, .ticket.dark .tk-perf::after { background: var(--bg); border-color: var(--chapa-borda); }
.ticket.dark .tk-stub .ebar { background-image: repeating-linear-gradient(90deg, var(--cream) 0 2px, transparent 2px 4px, var(--cream) 4px 5px, transparent 5px 8px,
var(--cream) 8px 11px, transparent 11px 12px, var(--cream) 12px 13px, transparent 13px 16px, var(--cream) 16px 18px, transparent 18px 21px); }
.ticket.dark .tk-k, .ticket.dark .tk-grid small, .ticket.dark .tk-p { color: var(--chapa-apagado); }
@media (max-width: 760px) {
.ticket { grid-template-columns: 1fr; }
.tk-main { padding: 24px 22px 22px; }
.tk-perf { border-left: 0; border-top: 1.5px dashed #cfcfcf; margin: 0 0; height: 0; }
.tk-perf::before, .tk-perf::after { top: -10px; left: -10px; bottom: auto; }
.tk-perf::after { left: auto; right: -10px; }
.tk-stub { padding: 20px 22px 22px; }
}
/* ═══ 4. CARIMBO ═════════════════════════════════════════════════════════════
O carimbo de passaporte em CSS: dois traços (o de fora e o de dentro), a
tinta azul da casa, uma rotação pequena que é dada por --r no elemento e a
tinta um pouco falhada — um carimbo de verdade nunca sai inteiro. Em
reduzir-movimento nada gira (a rotação é estática, não animação, então
ela fica). Onde entra: um fato só por bloco. Dois carimbos lado a lado
viram adesivo. */
/* `position:relative` de propósito: o site.css tem um `.stamp` antigo (os
carimbos PNG da colagem da home) com position:absolute — sem isto, todo
carimbo CSS nasceria solto por cima do vizinho. */
.stamp {
--r: -5deg; --tinta: var(--blue);
position: relative; display: inline-grid; place-items: center; padding: 10px 16px 9px;
border: 2.5px solid var(--tinta); border-radius: 10px; color: var(--tinta);
box-shadow: inset 0 0 0 3px #fff0, inset 0 0 0 4.5px var(--tinta);
font-family: "Geist", sans-serif; font-weight: 800;
font-size: 12.5px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; text-align: center;
transform: rotate(var(--r)); opacity: .9; white-space: nowrap;
-webkit-mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, .55) 80%, #000 100%);
mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, .55) 80%, #000 100%);
}
.stamp small { display: block; font-family: var(--mono); font-weight: 500; font-size: 8.5px; letter-spacing: .22em; margin-top: 5px; }
.stamp.big { font-size: 16px; padding: 14px 20px 12px; border-width: 3px; border-radius: 12px; }
.stamp.round { border-radius: 50%; width: 118px; height: 118px; padding: 0; font-size: 11px; line-height: 1.25; white-space: normal; }
.stamp.inv { --tinta: var(--cream); }
/* a tinta do ambiente escurecida: o amarelo do Flight puro daria 1,7:1 */
.stamp.amb { --tinta: color-mix(in srgb, var(--amb) 55%, var(--ink)); }
@media (max-width: 720px) { .stamp { white-space: normal; line-height: 1.25; } }
/* posição solta, no canto de um bloco */
.stamp.solto { position: absolute; z-index: 3; }
/* o site.css também sobrescreve cor e filtro — vale a tinta daqui */
.stamp, .stamp.inv, .stamp.amb { color: var(--tinta); filter: none; }
/* ═══ 5. ROTA (lista em sequência) ══════════════════════════════════════════
Um eixo tracejado vertical, uma escala por item, o avião na partida. O
ponto de cada escala é o mesmo da trilha de voo da home (.fr-wp). Só para
lista em que a ORDEM é informação. */
.route { position: relative; list-style: none; margin: 36px 0 0; padding: 0; max-width: 860px; }
.route::before {
content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px;
border-left: 1.5px dashed rgba(21, 21, 21, .35);
}
.route-item { position: relative; padding: 0 0 34px 48px; }
.route-item:last-child { padding-bottom: 0; }
.route-item::before {
content: ""; position: absolute; left: 6px; top: 7px; width: 12px; height: 12px; border-radius: 50%;
background: var(--bg); border: 2px solid var(--ink); box-sizing: border-box;
}
.route-item:first-child::before { background: var(--ink); }
/* o avião parte da primeira escala */
.route-item:first-child::after {
content: ""; position: absolute; left: 1px; top: -26px; width: 22px; height: 22px;
background: currentColor; color: var(--ink);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
transform: rotate(180deg);
}
.route-item .rt-k { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.route-item h3 { font-family: "Geist", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(18px, 1.7vw, 23px); letter-spacing: -.01em; line-height: 1.05; margin-top: 4px; }
.route-item p { margin-top: 8px; font-size: 14.5px; line-height: 1.7; color: var(--muted); max-width: 58ch; }
.route-item .rt-x { margin-top: 10px; font-size: 13px; font-weight: 600; }
a.route-item { display: block; color: inherit; text-decoration: none; }
a.route-item:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
/* Quando a rota é um com