/* Painel de voos: cabeçalho das telas principais */
.board {
  background: var(--board-bg); color: #fff; border-radius: var(--r-lg);
  padding: 24px; display: grid; gap: 14px; overflow: hidden; position: relative; isolation: isolate;
}
.board h1 { font-size: clamp(1.625rem, 6vw, 2.25rem); }
.board p { color: var(--board-text); max-width: 52ch; }
.board .eyebrow { color: var(--board-accent); }
.board .route { position: absolute; right: -70px; top: -50px; width: 240px; opacity: .3; z-index: -1; pointer-events: none; }
.board .board-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--board-tile); color: var(--board-accent); }

.flaps { display: flex; flex-wrap: wrap; gap: 4px; font-family: var(--font-mono); font-weight: 700; font-size: .9375rem; perspective: 400px; }
.flaps span {
  background: var(--board-tile); color: #fff; border-radius: 6px; padding: 5px 0; width: 1.75em; text-align: center;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .05);
  position: relative; animation: flap .34s var(--ease) both; animation-delay: calc(var(--i, 0) * 26ms);
}
.flaps span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgb(0 0 0 / .35); }
.flaps span.gap { background: transparent; box-shadow: none; width: .6em; }
.flaps span.gap::after { display: none; }
@keyframes flap { from { transform: rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Arte da paleta "todas" (js/ui/nuvens.js): nuvens embaixo e, só no card da tela inicial, avião no alto à direita; atrás do texto e dentro das bordas do card. */
.arte-todas { position: absolute; height: auto; z-index: -1; pointer-events: none; }
.arte-aviao { top: 0; right: 0; width: 41.4%; aspect-ratio: 145 / 55; }
.arte-nuvens { left: 0; bottom: 0; width: 100%; aspect-ratio: 350 / 92; }
[data-cia="todas"] .board, [data-cia="todas"] .onb-art { text-shadow: 0 1px 2px rgb(0 0 0 / .2); }
/* Sem a rota tracejada antiga na paleta "todas"; o texto termina acima das nuvens (a mais alta fica a 24% da largura do fundo). */
[data-cia="todas"] .board .route, [data-cia="todas"] .onb-art .route { display: none; }
[data-cia="todas"] .board { padding-bottom: max(24px, 24%); }
/* Em telas largas o texto (até 52ch) não chega à direita, onde ficam as nuvens: basta passar das faixas finas. */
@media (min-width: 640px) { [data-cia="todas"] .board { padding-bottom: max(24px, 6%); } }