/* Layout: publicação editorial de aviação com navegação fixa (menu recolhível em telas menores), coluna larga, seções com cabeçalho à esquerda e conteúdo em grade; latão como único acento */
:root {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #EDF0F3;
  --ink: #0D1B2A;
  --muted: #5E6B7A;
  --line: #E1E5EA;
  --accent: #B8935A;
  --accent-ink: #86672F;
  --sky: #4E6F8F;
  --orange: #E8731C;
  --ok: #2E9E5B;
  --no: #D9473A;
  --c-blue: #2F6FB2; --c-coral: #D4583C; --c-green: #23855A; --c-violet: #7353C0; --c-amber: #B87A0C; --c-teal: #17858C;
  --tone: var(--accent-ink);
  --shadow: 0 1px 2px rgba(15,36,56,.06), 0 8px 24px rgba(15,36,56,.06);
  --display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A111B; --surface: #101A26; --surface-2: #172434; --ink: #E9EDF2; --muted: #98A6B5; --line: #1F2D3D;
    --accent: #CFAE76; --accent-ink: #D9BC88; --sky: #8FB0CF; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    --c-blue: #7FB2EA; --c-coral: #F08C72; --c-green: #6CCB9C; --c-violet: #A991EC; --c-amber: #E9B44C; --c-teal: #5CC6CC;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A111B; --surface: #101A26; --surface-2: #172434; --ink: #E9EDF2; --muted: #98A6B5; --line: #1F2D3D;
  --accent: #CFAE76; --accent-ink: #D9BC88; --sky: #8FB0CF; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --c-blue: #7FB2EA; --c-coral: #F08C72; --c-green: #6CCB9C; --c-violet: #A991EC; --c-amber: #E9B44C; --c-teal: #5CC6CC;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--surface); }
::selection { background: var(--accent); color: #111; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-stretch: 112%; margin: 0; line-height: 1.1; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1.15rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 600; font-family: var(--body); font-stretch: 100%; }
p { margin: 0; }
.container {
  max-width: 1680px; margin: 0 auto;
  padding-left: max(clamp(20px, 4vw, 72px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(20px, 4vw, 72px), env(safe-area-inset-right, 0px));
}
.eyebrow { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.muted { color: var(--muted); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Navegação */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.nav-row { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--ink); display: grid; place-items: center; }
.brand-mark svg { width: 24px; height: 24px; color: var(--accent); }
.brand-name { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.nav-links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--muted); padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
.nav-links a.active { color: var(--ink); background: var(--surface-2); }
.nav-cta { flex: none; text-decoration: none; font-weight: 600; font-size: .9rem; padding: 9px 16px; border-radius: 6px; background: var(--ink); color: var(--surface); }
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); }
.nav-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.icon-btn:hover { border-color: var(--accent); }
.icon-btn svg { width: 18px; height: 18px; }
.menu-btn { display: none; }
.theme-btn .moon { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .sun { display: none; }
  :root:not([data-theme="light"]) .theme-btn .moon { display: block; }
}
.nav-links { overflow: visible; align-items: center; }
.nav-more { position: relative; }
.nav-more-btn { display: inline-flex; align-items: center; gap: 4px; font: 500 .92rem var(--body); color: var(--muted); background: none; border: 0; padding: 8px 12px; cursor: pointer; }
.nav-more-btn svg { width: 14px; height: 14px; transition: transform .2s; }
.nav-more-btn:hover, .nav-more-btn[aria-expanded="true"] { color: var(--ink); }
.nav-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-more-panel { display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 220px; flex-direction: column; padding: 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); z-index: 60; }
.nav-more.open .nav-more-panel { display: flex; }
.nav-more-panel a { padding: 10px 12px; border-radius: 10px; }
.nav-more-panel a:hover { background: var(--surface-2); }
.nav-links .nav-more-panel a.active { box-shadow: none; background: var(--surface-2); color: var(--ink); }
.nav-more.has-active .nav-more-btn { color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); }
@media (max-width: 1280px) {
  .nav-row { justify-content: space-between; }
  .nav-links { align-items: stretch; }
  .nav-more-btn { display: none; }
  .nav-more-panel { display: flex; position: static; transform: none; min-width: 0; padding: 0; border: 0; box-shadow: none; border-radius: 0; background: transparent; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
  .nav-more-panel a { border-radius: 0; }
  .nav-more-panel a:hover { background: transparent; }
  .menu-btn { display: grid; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding-block: 8px 16px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); max-height: calc(100vh - 72px); overflow-y: auto; }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 13px 4px; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav-links a:last-child { border-bottom: 0; }
}
@media (max-width: 520px) { .nav-cta { display: none; } }

/* Abertura */
.hero { padding-block: 56px 72px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.02; }
.hero h1 em { font-style: normal; color: var(--accent-ink); }
.hero-lede { font-size: 1.12rem; color: var(--muted); max-width: 52ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: .95rem; padding: 12px 20px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-family: var(--body); }
.btn-primary { background: var(--accent); color: #1A1200; }
.btn-primary:hover { filter: brightness(.95); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--muted); }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); padding-top: 18px; }
.hero-stats div { display: flex; flex-direction: column; gap: 2px; }
.hero-stats div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.hero-stats b { font-family: var(--display); font-stretch: 112%; font-size: 1.7rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-stats span { font-size: .85rem; color: var(--muted); }
.hero-visual { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 5 / 4; max-width: 100%; box-shadow: var(--shadow);
  background: linear-gradient(180deg, #0A1A33 0%, #1C3566 45%, #6B4A7A 75%, #E0915A 100%); isolation: isolate; }
.hud-tag { position: absolute; top: 16px; left: 16px; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #FFE2B0; background: rgba(8,16,30,.5); padding: 6px 10px; border-radius: 999px; display: flex; gap: 8px; align-items: center; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-block: 36px 56px; } }
@media (max-width: 520px) { .hero-stats b { font-size: 1.35rem; } }

/* Seções */
.section { padding-block: 80px; border-top: 1px solid var(--line); }
.section.alt { background: var(--surface); }
.section-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px 48px; align-items: end; margin-bottom: 40px; }
.section-head > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.section-head p { color: var(--muted); font-size: 1.05rem; max-width: 60ch; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } .section { padding-block: 56px; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.section.alt .card { background: var(--bg); }

/* Forças */
.forces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.force { padding: 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.force-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-family: var(--mono); font-size: 1.2rem; color: var(--accent-ink); font-weight: 500; }
.section.alt .force-icon { background: var(--surface); }
.force p { color: var(--muted); font-size: .95rem; }
@media (max-width: 920px) { .forces { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .forces { grid-template-columns: 1fr; } }

/* Linha do tempo */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.timeline li { padding: 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.timeline .year { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 2rem; line-height: 1; color: var(--sky); font-variant-numeric: tabular-nums; }
.timeline .br .year { color: var(--accent-ink); }
.pill { align-self: flex-start; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--accent-ink); }
.timeline p { color: var(--muted); font-size: .95rem; }
@media (max-width: 920px) { .timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .timeline { grid-template-columns: 1fr; } }

/* Aeronaves */
.fleet { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; align-items: start; }
.fleet > * { min-width: 0; }
.spans { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.span-row { display: grid; grid-template-columns: 1fr 64px; gap: 4px 12px; align-items: center; }
.span-name { font-size: .9rem; font-weight: 500; grid-column: 1 / -1; }
.span-track { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.section.alt .span-track { background: var(--surface); }
.span-bar { height: 100%; background: var(--sky); border-radius: 999px; }
.span-row.hi .span-bar { background: var(--accent); }
.span-val { font-family: var(--mono); font-size: .85rem; text-align: right; font-variant-numeric: tabular-nums; }
.note { font-size: .8rem; color: var(--muted); }
.table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.section.alt .table-wrap { background: var(--bg); }
table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: .92rem; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
td { white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { font-family: var(--mono); font-size: .88rem; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
@media (max-width: 920px) { .fleet { grid-template-columns: 1fr; } }

/* Aeroportos */
.ap-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 16px; }
.search { position: relative; flex: 0 1 380px; }
.search input { width: 100%; font: 400 1rem var(--body); padding: 12px 14px 12px 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.section.alt .search input { background: var(--bg); }
.search svg { position: absolute; left: 13px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--muted); }
.ap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ap { padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ap-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ap-code { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: .01em; }
.ap-clock { text-align: right; font-family: var(--mono); font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-clock small { display: block; font-size: .6rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.ap-name { font-weight: 600; font-size: .95rem; line-height: 1.35; }
.ap-meta { font-size: .8rem; color: var(--muted); }
.ap-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.ap-links a { text-align: center; text-decoration: none; font-size: .85rem; font-weight: 600; padding: 9px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); }
.section.alt .ap-links a { background: var(--surface); }
.ap-links a:hover { border-color: var(--accent); background: var(--accent); color: #1A1200; }
.ap-empty { grid-column: 1 / -1; color: var(--muted); }
@media (max-width: 920px) { .ap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ap-grid { grid-template-columns: 1fr; } }

/* Passagens mais baratas */
.save-top { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-bottom: 16px; }
.save-top > * { min-width: 0; }
.when-card { padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.when-rows { display: flex; flex-direction: column; }
.when-row { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--line); align-items: baseline; }
.when-row:last-child { border-bottom: 0; }
.when-row span { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.when-row b { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.when-row small { display: block; color: var(--muted); font-size: .88rem; font-family: var(--body); margin-top: 2px; }
.calc { padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-grid label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 600; min-width: 0; }
.calc-grid input { font: 500 1rem var(--mono); padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); width: 100%; font-variant-numeric: tabular-nums; }
.calc-out { border-radius: 14px; background: var(--surface-2); padding: 16px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-out div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calc-out small { font-size: .78rem; color: var(--muted); }
.calc-out b { font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.calc-verdict { grid-column: 1 / -1; font-weight: 600; font-size: .95rem; padding-top: 10px; border-top: 1px solid var(--line); }
.calc-verdict.y { color: var(--ok); }
.calc-verdict.n { color: var(--no); }
.tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tip { padding: 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tip .tagline { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.tip p { color: var(--muted); font-size: .93rem; }
.tip a { color: var(--accent-ink); font-weight: 600; }
.scam { margin-top: 16px; padding: 22px 24px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--no) 45%, var(--line)); background: color-mix(in srgb, var(--no) 7%, var(--surface)); display: grid; grid-template-columns: auto 1fr; gap: 18px; }
.scam-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--no); color: #fff; display: grid; place-items: center; font-weight: 700; }
.scam ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: .93rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.myth { display: flex; gap: 10px; align-items: baseline; font-size: .93rem; color: var(--muted); }
.myth b { color: var(--ink); }
@media (max-width: 920px) { .save-top { grid-template-columns: 1fr; } .tips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tips, .calc-grid, .scam ul { grid-template-columns: 1fr; } .when-row { grid-template-columns: 1fr; gap: 4px; } .scam { grid-template-columns: 1fr; } }
@media (min-width: 1400px) { .tips { grid-template-columns: repeat(4, 1fr); } }

/* Guia do passageiro */
.notice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 10px; background: var(--surface-2); border-left: 3px solid var(--accent); margin-bottom: 28px; font-size: .95rem; }
.notice b { display: block; }
.notice-icon { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #1A1200; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.delay { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 28px; }
.delay li { list-style: none; position: relative; padding: 18px 18px 18px 0; display: flex; flex-direction: column; gap: 6px; border-top: 3px solid var(--line); min-width: 0; }
.delay li::before { content: ""; position: absolute; top: -9px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); }
.delay li.final { border-top-color: var(--accent); }
.delay ol { display: contents; }
.delay .when { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); font-weight: 500; }
.delay p { color: var(--muted); font-size: .93rem; }
.guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.guide .item ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: .93rem; display: flex; flex-direction: column; gap: 4px; }
.guide .item .tagline { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-top: 16px; }
.two-col > * { min-width: 0; }
.checklist { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.check-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.check-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.check-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.check-list label { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; cursor: pointer; padding: 6px 0; }
.check-list input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.check-list input:checked + span { color: var(--muted); text-decoration: line-through; }
.link-btn { align-self: flex-start; background: none; border: 0; padding: 0; font: 500 .85rem var(--body); color: var(--muted); text-decoration: underline; cursor: pointer; }
.contacts { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.contact { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.contact:last-child { border-bottom: 0; }
.contact div { display: flex; flex-direction: column; min-width: 0; }
.contact small { color: var(--muted); font-size: .82rem; }
.contact b { font-family: var(--mono); font-weight: 500; font-size: 1.05rem; }
.contact a { font-family: var(--mono); font-size: .9rem; color: var(--accent-ink); }
@media (max-width: 920px) { .guide { grid-template-columns: repeat(2, 1fr); } .two-col { grid-template-columns: 1fr; } .delay { grid-template-columns: repeat(2, 1fr); row-gap: 12px; } }
@media (max-width: 600px) { .guide, .check-list { grid-template-columns: 1fr; } .delay { grid-template-columns: 1fr; } }

/* Pode e não pode */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.phase { padding: 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.phase-head { display: flex; align-items: center; gap: 12px; }
.phase-num { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.rl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rl li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .93rem; color: var(--muted); }
.rl li b { color: var(--ink); font-weight: 600; }
.mk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: #fff; margin-top: 1px; }
.mk.y { background: var(--ok); }
.mk.n { background: var(--no); }
.rl-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.rl-label.y { color: var(--ok); }
.rl-label.n { color: var(--no); }
.items-table td:not(:first-child), .items-table th:not(:first-child) { text-align: center; }
.items-table td { white-space: normal; }
.items-table td:first-child { font-weight: 500; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.badge.y { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.badge.n { background: color-mix(in srgb, var(--no) 14%, transparent); color: var(--no); }
.badge.c { background: var(--surface-2); color: var(--muted); }
.legal { margin-top: 16px; }
@media (max-width: 920px) { .phases { grid-template-columns: 1fr; } }

/* Segurança (abas) */
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 28px; scrollbar-width: thin; }
.tab { flex: none; font: 600 .92rem var(--body); color: var(--muted); background: none; border: 0; padding: 12px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.panel { display: flex; flex-direction: column; gap: 24px; }
.panel > p { color: var(--muted); max-width: 70ch; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { padding: 22px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat b { font-family: var(--display); font-stretch: 112%; font-size: 2.2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { font-size: .92rem; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.item { padding: 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.item p { color: var(--muted); font-size: .95rem; }
.callout { padding: 16px 18px; border-radius: 10px; background: var(--surface-2); border-left: 3px solid var(--sky); font-size: .95rem; }
.cheese { padding: 20px; }
.cheese svg { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.acc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.acc li { padding: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.acc .acc-top { display: flex; align-items: baseline; gap: 12px; }
.acc .yr { font-family: var(--mono); font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.acc p { color: var(--muted); font-size: .93rem; }
.acc .changed { color: var(--ink); background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.acc .changed strong { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); font-weight: 500; margin-bottom: 2px; }
.acc li.ok { border-color: var(--accent); }
.breathe { padding: 24px; display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; }
.breathe > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ring { width: 180px; height: 180px; max-width: 100%; position: relative; display: grid; place-items: center; }
.ring-dot { position: absolute; width: 80px; height: 80px; border-radius: 50%; background: var(--sky); opacity: .28; transition: transform 4s ease-in-out; }
.ring-edge { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--line); }
.ring-text { position: relative; text-align: center; font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ring-text b { display: block; font-family: var(--display); font-size: 2.4rem; color: var(--ink); line-height: 1; }
.btn-dark { align-self: flex-start; background: var(--ink); color: var(--surface); }
.sounds td { white-space: normal; vertical-align: top; }
.sounds td:first-child { font-family: var(--mono); font-size: .8rem; color: var(--accent-ink); white-space: nowrap; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps li { counter-increment: s; padding: 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.steps li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #1A1200; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.steps p { color: var(--muted); font-size: .93rem; }
@media (max-width: 920px) { .stats, .grid3, .steps { grid-template-columns: repeat(2, 1fr); } .acc { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .stats, .grid2, .grid3, .steps { grid-template-columns: 1fr; } .breathe { grid-template-columns: 1fr; justify-items: center; } }

/* Curiosidades */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 24px; }
.filter { font: 500 .88rem var(--body); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.section.alt .filter { background: var(--bg); }
.filter:hover { border-color: var(--muted); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.filters .spacer { flex: 1; }
.count { font-size: .85rem; color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fact { overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: box-shadow .2s, transform .2s; }
.fact:hover { box-shadow: var(--shadow); }
.fact.flash { box-shadow: 0 0 0 3px var(--accent); }
.fact-img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 5 / 3; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.fact-img text { font-family: var(--mono); fill: var(--muted); }
.fact-img text.a { fill: var(--accent-ink); font-weight: 500; }
.fact-body { padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.fact .cat { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.fact h3 { font-size: 1.05rem; }
.fact p { color: var(--muted); font-size: .93rem; }
@media (max-width: 920px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .filters .spacer { display: none; } }

/* Ferramenta */
.tool { padding: 28px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; align-items: start; }
.tool > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: .85rem; font-weight: 600; }
.field input { font: 500 1.2rem var(--mono); padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-transform: uppercase; width: 100%; }
.section.alt .field input { background: var(--surface); }
.callsign { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--mono); font-size: .9rem; padding: 6px 10px; border-radius: 6px; background: var(--surface-2); }
.chip b { color: var(--accent-ink); font-weight: 500; margin-right: 6px; }
.chip.gap { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
@media (max-width: 760px) { .tool { grid-template-columns: 1fr; padding: 20px; } }

/* Calculadora de rota */
.route { margin-top: 28px; padding: 26px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: center; }
.route > * { min-width: 0; }
.route-intro { display: flex; flex-direction: column; gap: 8px; }
.route-intro p { color: var(--muted); font-size: .95rem; max-width: 52ch; }
.route-pick { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.route-pick label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 600; min-width: 0; }
.route-pick select { font: 500 1rem var(--body); padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); width: 100%; min-width: 0; }
.route-out { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); padding-top: 18px; }
.route-out div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.route-out div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.route-out small { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.route-out b { font-family: var(--display); font-weight: 400; font-size: 2.2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.route-out .route-msg { grid-column: 1 / -1; padding: 12px 0 0; border: 0; font-size: .9rem; color: var(--muted); }
@media (max-width: 920px) { .route { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .route-pick { grid-template-columns: 1fr; } .route-pick .icon-btn { justify-self: center; transform: rotate(90deg); } .route-out b { font-size: 1.6rem; } .route-out div + div { padding-left: 12px; } }

/* Quiz */
.quiz-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; align-items: start; }
.quiz-wrap > * { min-width: 0; }
.quiz-side { display: flex; flex-direction: column; gap: 14px; }
.quiz-score { font-family: var(--display); font-size: 4.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.quiz-score small { font-size: 1.6rem; color: var(--muted); }
.quiz-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.quiz-dots span { width: 22px; height: 6px; border-radius: 999px; background: var(--line); }
.quiz-dots span.ok { background: var(--ok); }
.quiz-dots span.no { background: var(--no); }
.quiz-dots span.now { background: var(--accent); }
.quiz { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.quiz-count { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.quiz h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { text-align: left; font: 500 1rem var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; display: flex; gap: 12px; align-items: center; }
.opt:hover:not(:disabled) { border-color: var(--accent); }
.opt:disabled { cursor: default; }
.opt i { font-style: normal; font-family: var(--mono); font-size: .8rem; color: var(--muted); width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; flex: none; }
.opt.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--bg)); }
.opt.right i { background: var(--ok); border-color: var(--ok); color: #fff; }
.opt.wrong { border-color: var(--no); background: color-mix(in srgb, var(--no) 10%, var(--bg)); }
.opt.wrong i { background: var(--no); border-color: var(--no); color: #fff; }
.quiz-fb { font-size: .95rem; color: var(--muted); padding: 14px 16px; border-radius: 14px; background: var(--surface-2); }
.quiz-fb b { color: var(--ink); }
.quiz-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 920px) { .quiz-wrap { grid-template-columns: 1fr; } .quiz-score { font-size: 3.2rem; } }
@media (max-width: 600px) { .quiz-opts { grid-template-columns: 1fr; } .quiz { padding: 20px; } }

/* Glossário */
.gloss-tools { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-bottom: 28px; }
.gloss { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.gloss div { padding-block: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gloss dt { font-family: var(--display); font-size: 1.45rem; line-height: 1.15; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gloss dt small { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.gloss dd { margin: 0; color: var(--muted); font-size: .95rem; }
.gloss-empty { grid-column: 1 / -1; color: var(--muted); }
@media (max-width: 920px) { .gloss { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gloss { grid-template-columns: 1fr; } }

/* Voltar ao topo */
.to-top { position: fixed; z-index: 40; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--accent); background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; padding: 0; }
.to-top:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.to-top svg { width: 20px; height: 20px; }

/* Telas grandes: mais colunas para ocupar a largura */
@media (min-width: 1400px) {
  .hero-grid { grid-template-columns: 1fr 1.15fr; gap: 64px; }
  .hero-visual { aspect-ratio: 16 / 10; }
  .timeline { grid-template-columns: repeat(6, 1fr); }
  .fleet { grid-template-columns: 1fr 1.6fr; }
  .ap-grid { grid-template-columns: repeat(5, 1fr); }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .gloss { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(6, 1fr); }
  .acc { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1.6fr 1fr; }
  .section-head { grid-template-columns: 1fr 1.6fr; }
}
@media (min-width: 1800px) {
  .facts { grid-template-columns: repeat(5, 1fr); }
  .guide { grid-template-columns: repeat(3, 1fr); }
}

/* Rodapé */
.footer { background: var(--ink); color: var(--bg); padding-block: 56px 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.footer-grid > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.footer .brand-mark { background: var(--accent); }
.footer .brand-mark svg { color: #1A1200; }
.footer p, .footer a { color: color-mix(in srgb, var(--bg) 72%, transparent); font-size: .92rem; text-decoration: none; }
.footer a:hover { color: var(--bg); }
.footer h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .82rem; color: color-mix(in srgb, var(--bg) 60%, transparent); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* Camada elegante: serifa de exibição, latão como acento, linhas finas e mais respiro */
body { font-size: 16.5px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; font-stretch: normal; letter-spacing: -.01em; }
h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.02; }
h3 { font-size: 1.45rem; line-height: 1.15; }
h4 { font-family: var(--body); font-weight: 600; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: .7rem; letter-spacing: .22em; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.section { padding-block: clamp(72px, 9vw, 128px); border-top: 0; }
.section-head { margin-bottom: 56px; }
.card { border-radius: 18px; transition: border-color .25s; }
.card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.btn { border-radius: 999px; padding: 13px 24px; }
.btn-primary { background: var(--accent); color: #17120A; }
.btn-primary:hover { filter: brightness(1.06); }

.nav { background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
@media (min-width: 861px) { .nav-row { height: 72px; } }
.brand-name { font-family: var(--display); font-weight: 400; font-size: 1.6rem; letter-spacing: 0; }
.brand-mark { border-radius: 50%; background: transparent; border: 1px solid var(--accent); }
.brand-mark svg { color: var(--accent-ink); }
.nav-links a { border-radius: 0; }
.nav-links a:hover { background: transparent; }
.nav-links a.active { background: transparent; color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); }
.nav-cta { border-radius: 999px; background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 9px 18px; }
.nav-cta:hover { background: var(--ink); color: var(--surface); }

.hero-dark { background: radial-gradient(120% 90% at 85% 0%, #1C2D47 0%, #0B1522 55%, #070D16 100%); color: #EEF1F5; padding-block: clamp(56px, 7vw, 112px); }
.hero-dark .eyebrow { color: #D9BC88; }
.hero-dark h1 { font-weight: 400; font-size: clamp(3rem, 6.4vw, 5.8rem); line-height: .98; letter-spacing: -.02em; }
.hero-dark h1 em { font-style: italic; color: #D9BC88; }
.hero-dark .hero-lede { color: rgba(238,241,245,.72); font-size: 1.15rem; }
.hero-dark .btn-primary { background: #CFAE76; color: #17120A; }
.hero-dark .btn-secondary { background: transparent; color: #EEF1F5; border-color: rgba(238,241,245,.3); }
.hero-dark .btn-secondary:hover { border-color: #D9BC88; }
.hero-dark .hero-stats { border-top-color: rgba(238,241,245,.14); }
.hero-dark .hero-stats div + div { border-left-color: rgba(238,241,245,.14); }
.hero-dark .hero-stats b { font-family: var(--display); font-weight: 400; font-stretch: normal; font-size: 2.6rem; color: #FFFFFF; }
.hero-dark .hero-stats span { color: rgba(238,241,245,.6); }
.hero-visual { border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.45); outline: 1px solid rgba(207,174,118,.3); outline-offset: -1px; }
.hero-visual { background: radial-gradient(90% 80% at 55% 45%, #13284A 0%, #0A1628 55%, #050B15 100%); }
.hero-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-visual .hud-tag { top: 14px; left: 14px; background: rgba(8,16,30,.6); color: #F3E3C3; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hud-tag i { width: 7px; height: 7px; border-radius: 50%; background: #FF5A5A; box-shadow: 0 0 0 0 rgba(255,90,90,.6); }
.map-legend { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.map-legend span { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: #DCE6F2; background: rgba(8,16,30,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 6px 11px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.map-legend b { color: #E9B44C; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .hud-tag i { animation: ping 1.8s ease-out infinite; }
  @keyframes ping { 70% { box-shadow: 0 0 0 7px rgba(255,90,90,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,90,0); } }
}

.timeline .year, .stat b, .ap-code, .ring-text b { font-family: var(--display); font-weight: 400; font-stretch: normal; }
.timeline .year { font-size: 2.8rem; color: var(--accent-ink); }
.timeline .br .year { color: var(--sky); }
.stat b { font-size: 3rem; }
.ap-code { font-size: 2.6rem; }
.pill { background: transparent; border: 1px solid var(--accent); }
.force-icon, .phase-num, .notice-icon { border-radius: 50%; background: transparent; border: 1px solid var(--accent); color: var(--accent-ink); }
.section.alt .force-icon { background: transparent; }
.phase-num { font-family: var(--display); font-size: 1.2rem; font-weight: 400; }
.steps li::before { background: transparent; border: 1px solid var(--accent); color: var(--accent-ink); font-family: var(--display); font-size: 1.15rem; font-weight: 400; }
.tab { font-weight: 500; }
.ap-links a { border-radius: 999px; }
.ap-links a:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.search input, .field input { border-radius: 999px; padding-left: 44px; }
.field input { padding-left: 18px; border-radius: 12px; }
.filter { padding: 8px 16px; }
.callout, .notice { border-radius: 14px; }

.footer { background: #070D16; color: #E9EDF2; }
.footer .brand { color: #E9EDF2 !important; }
.footer .brand-mark { background: transparent; border: 1px solid #CFAE76; }
.footer .brand-mark svg { color: #CFAE76; }
.footer p, .footer a { color: rgba(233,237,242,.66); }
.footer a:hover { color: #FFFFFF; }
.footer h4 { color: #CFAE76; }
.footer-bottom { color: rgba(233,237,242,.5); border-top-color: rgba(233,237,242,.12); }

/* Cores por cartão: cada bloco recebe um tom (--tone) que pinta faixa, ícone, número e brilho */
:is(.forces, .timeline, .tips, .guide, .grid2, .grid3, .stats, .steps, .phases, .acc, .ap-grid) > :nth-child(6n+1) { --tone: var(--c-blue); }
:is(.forces, .timeline, .tips, .guide, .grid2, .grid3, .stats, .steps, .phases, .acc, .ap-grid) > :nth-child(6n+2) { --tone: var(--c-coral); }
:is(.forces, .timeline, .tips, .guide, .grid2, .grid3, .stats, .steps, .phases, .acc, .ap-grid) > :nth-child(6n+3) { --tone: var(--c-green); }
:is(.forces, .timeline, .tips, .guide, .grid2, .grid3, .stats, .steps, .phases, .acc, .ap-grid) > :nth-child(6n+4) { --tone: var(--c-violet); }
:is(.forces, .timeline, .tips, .guide, .grid2, .grid3, .stats, .steps, .phases, .acc, .ap-grid) > :nth-child(6n+5) { --tone: var(--c-amber); }
:is(.forces, .timeline, .tips, .guide, .grid2, .grid3, .stats, .steps, .phases, .acc, .ap-grid) > :nth-child(6n+6) { --tone: var(--c-teal); }
.when-card, .quiz { --tone: var(--c-blue); }
.calc, .tool { --tone: var(--c-green); }
.checklist, .spans { --tone: var(--c-violet); }
.contacts, .route { --tone: var(--c-teal); }
.breathe, .cheese { --tone: var(--c-amber); }
.acc li.ok { --tone: var(--c-green); border-color: var(--line); }

.card { position: relative; overflow: hidden; transition: border-color .25s, transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; }
.card, .section.alt .card { background-image: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--tone) 9%, transparent), transparent 60%); }
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 20%, transparent)); transform-origin: left; }
.card:hover { border-color: color-mix(in srgb, var(--tone) 55%, var(--line)); transform: translateY(-4px); box-shadow: 0 16px 36px color-mix(in srgb, var(--tone) 18%, transparent); }
.quiz:hover, .route:hover, .tool:hover, .calc:hover, .checklist:hover, .breathe:hover { transform: none; }

.force-icon, .phase-num, .steps li::before { border-color: var(--tone); color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.section.alt .force-icon { background: color-mix(in srgb, var(--tone) 12%, transparent); }
.force-icon { width: 48px; height: 48px; font-size: 1.4rem; }
.timeline .year, .timeline .br .year, .stat b, .ap-code { color: var(--tone); }
.pill { border-color: var(--tone); color: var(--tone); }
.tip .tagline, .guide .item .tagline, .acc .changed strong { color: var(--tone); }
.acc .changed { background: color-mix(in srgb, var(--tone) 10%, var(--surface-2)); }
.fact .cat { color: var(--tone); }
.fact-img { background: color-mix(in srgb, var(--tone) 10%, var(--surface-2)); }
.span-bar { background: linear-gradient(90deg, var(--c-blue), var(--c-teal)); }
.span-row.hi .span-bar { background: linear-gradient(90deg, var(--accent), var(--c-coral)); }
.ap-links a:hover { background: var(--tone); border-color: var(--tone); color: #fff; }
.check-bar span { background: linear-gradient(90deg, var(--c-violet), var(--c-blue)); }

/* Animações: tudo já está visível em repouso; a animação só toca quando o bloco entra na tela */
@media (prefers-reduced-motion: no-preference) {
  .card.play { animation: rise .7s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
  .card.play::before { animation: stripe .9s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: calc(var(--i, 0) * 70ms + .15s); }
  @keyframes rise { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes stripe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .span-row.play .span-bar { animation: grow 1.1s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: calc(var(--i, 0) * 90ms); transform-origin: left; }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  .forces .force:nth-child(1) .force-icon { animation: bob-up 2.4s ease-in-out infinite; }
  .forces .force:nth-child(2) .force-icon { animation: bob-down 2.4s ease-in-out infinite; }
  .forces .force:nth-child(3) .force-icon { animation: bob-right 2.4s ease-in-out infinite; }
  .forces .force:nth-child(4) .force-icon { animation: bob-left 2.4s ease-in-out infinite; }
  @keyframes bob-up { 50% { transform: translateY(-6px); } }
  @keyframes bob-down { 50% { transform: translateY(6px); } }
  @keyframes bob-right { 50% { transform: translateX(6px); } }
  @keyframes bob-left { 50% { transform: translateX(-6px); } }

  .card:hover .fact-img { transform: scale(1.05); }
  .fact-img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
  .phase:hover .phase-num, .steps li:hover::before { animation: pop .5s ease; }
  @keyframes pop { 40% { transform: scale(1.18); } }
  .hero-dark .eyebrow::before { animation: line 1.2s cubic-bezier(.2,.7,.3,1) both; transform-origin: left; }
  @keyframes line { from { transform: scaleX(0); } }
}

/* Quatro forças: botão e janela de explicação */
.force-more { margin-top: auto; align-self: flex-start; font: 600 .88rem var(--body); color: var(--tone); background: color-mix(in srgb, var(--tone) 10%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: background .2s, color .2s; }
.force-more span { display: inline-block; transition: transform .25s; }
.force-more:hover { background: var(--tone); color: #fff; }
.force-more:hover span { transform: translateX(4px); }
.force-dlg { border: 0; padding: 0; border-radius: 24px; width: min(900px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); overflow: auto; background: var(--surface); color: var(--ink); box-shadow: 0 40px 100px rgba(0,0,0,.35); }
.force-dlg::backdrop { background: rgba(5,11,21,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.fdlg-inner { display: grid; grid-template-columns: 1fr 1.2fr; position: relative; }
.fdlg-close { position: absolute; top: 14px; right: 14px; background: var(--surface); z-index: 2; }
.fdlg-art { display: grid; place-items: center; padding: 28px; min-height: 300px; background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 22%, var(--surface)), color-mix(in srgb, var(--tone) 5%, var(--surface))); }
.fdlg-art svg { width: 100%; max-width: 360px; height: auto; overflow: visible; }
.fdlg-art text { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
.fdlg-body { padding: 34px 32px 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fdlg-body h3 { font-size: clamp(2rem, 4vw, 2.6rem); color: var(--ink); }
.fdlg-lead { font-family: var(--display); font-size: 1.35rem; line-height: 1.25; color: var(--tone); }
.fdlg-text { display: flex; flex-direction: column; gap: 10px; color: var(--muted); font-size: .97rem; }
.fdlg-body h4 { margin-top: 6px; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.fdlg-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.fdlg-list li { display: grid; grid-template-columns: 10px 1fr; gap: 10px; font-size: .94rem; color: var(--muted); }
.fdlg-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); margin-top: 8px; }
.fdlg-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.fdlg-nav .btn-primary { background: var(--tone); color: #fff; }
@media (max-width: 760px) { .fdlg-inner { grid-template-columns: 1fr; } .fdlg-art { min-height: 200px; padding: 20px 20px 10px; } .fdlg-body { padding: 22px 20px 20px; } }
@media (prefers-reduced-motion: no-preference) {
  .force-dlg[open] { animation: dlgIn .45s cubic-bezier(.2,.7,.3,1); }
  .force-dlg[open]::backdrop { animation: fadeIn .3s ease; }
  @keyframes dlgIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
  @keyframes fadeIn { from { opacity: 0; } }
  .fdlg-art .flow { animation: flow 1s linear infinite; }
  .fdlg-art .flow.fast { animation-duration: .45s; }
  .fdlg-art .flow.slow { animation-duration: 1.6s; }
  @keyframes flow { to { stroke-dashoffset: -36; } }
  .fdlg-art .pulse-up { animation: pu 1.6s ease-in-out infinite; }
  .fdlg-art .pulse-down { animation: pd 1.6s ease-in-out infinite; }
  .fdlg-art .pulse-left { animation: pl 1.6s ease-in-out infinite; }
  @keyframes pu { 50% { transform: translateY(-8px); } }
  @keyframes pd { 50% { transform: translateY(8px); } }
  @keyframes pl { 50% { transform: translateX(-8px); } }
  .fdlg-art .fuel { animation: fuel 6s ease-in-out infinite; transform-origin: 0 0; }
  @keyframes fuel { 0%, 10% { transform: scaleX(1); } 80%, 100% { transform: scaleX(.35); } }
  .fdlg-art .vortex { transform-box: fill-box; transform-origin: center; animation: spin 1.4s linear infinite; }
  .fdlg-art .fan { transform-box: fill-box; transform-origin: center; animation: fanspin .5s linear infinite; }
  @keyframes fanspin { to { transform: scaleY(-1); } }
}

/* Linha do tempo: cartões que viram */
.timeline li.flip { padding: 0; display: block; perspective: 1200px; overflow: visible; background-image: none; background-color: transparent; border-color: transparent; }
.timeline li.flip::before { display: none; }
.timeline li.flip:hover { box-shadow: none; }
.flip-btn { display: grid; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,.7,.2,1); border-radius: 18px; }
.flip-btn[aria-pressed="true"] { transform: rotateY(180deg); }
.flip-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 18px; border: 1px solid var(--line); backface-visibility: hidden; -webkit-backface-visibility: hidden; position: relative; overflow: hidden; min-width: 0; }
.face::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 20%, transparent)); }
.face.front { background: var(--surface) radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--tone) 9%, transparent), transparent 60%); }
.face.back { transform: rotateY(180deg); background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 18%, var(--surface)), var(--surface) 75%); border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); }
.flip-btn:hover .face { border-color: color-mix(in srgb, var(--tone) 55%, var(--line)); }
.flip-btn:hover .face.front { box-shadow: 0 16px 36px color-mix(in srgb, var(--tone) 18%, transparent); }
.face p { color: var(--muted); font-size: .95rem; }
.back-tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tone); font-weight: 500; }
.face .back-lead { font-family: var(--display); font-size: 1.3rem; line-height: 1.2; color: var(--ink); }
.flip-hint { margin-top: auto; padding-top: 8px; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tone); }
@media (prefers-reduced-motion: reduce) {
  .flip-btn, .flip-btn[aria-pressed="true"] { transform: none; transition: none; }
  .face.back { transform: none; visibility: hidden; }
  .flip-btn[aria-pressed="true"] .face.back { visibility: visible; }
  .flip-btn[aria-pressed="true"] .face.front { visibility: hidden; }
}
@media (prefers-reduced-motion: no-preference) {
  .flip-btn[aria-pressed="false"]:hover { transform: rotateY(-6deg); }
  .flip-hint { animation: hint 2.6s ease-in-out infinite; }
  @keyframes hint { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
}

/* Buscador de passagens */
.finder { --tone: var(--c-blue); padding: 28px; display: flex; flex-direction: column; gap: 22px; margin-bottom: 16px; }
.finder:hover { transform: none; }
.finder-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px 28px; }
.finder-head > div:first-child { display: flex; flex-direction: column; gap: 6px; max-width: 64ch; min-width: 0; }
.finder-head .seg { flex: none; }
.finder-head p { font-size: .95rem; }
.finder-form { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px 16px; align-items: end; }
.finder-form > * { min-width: 0; }
.fd-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.fd-when { display: grid; grid-template-columns: 1fr 1fr .7fr; gap: 10px; align-items: end; }
.finder-form label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 600; min-width: 0; }
.finder-form select, .finder-form input { font: 500 1rem var(--body); padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); width: 100%; min-width: 0; }
.finder-out { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; border-top: 1px solid var(--line); padding-top: 22px; }
.finder-out > * { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.finder-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fl { --c: var(--c-blue); position: relative; display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: 14px; text-decoration: none; color: var(--ink); background: color-mix(in srgb, var(--c) 12%, var(--bg)); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); transition: transform .25s, box-shadow .25s, opacity .25s; }
.fl b { font-family: var(--display); font-weight: 400; font-size: 1.45rem; line-height: 1.1; }
.fl small { font-size: .8rem; color: var(--muted); padding-right: 14px; }
.fl span { position: absolute; top: 12px; right: 14px; color: var(--c); font-weight: 600; transition: transform .25s; }
.fl:hover { transform: translateY(-3px); box-shadow: 0 12px 26px color-mix(in srgb, var(--c) 22%, transparent); }
.fl:hover span { transform: translate(3px, -3px); }
#fd-google { --c: var(--c-blue); } #fd-sky { --c: var(--c-teal); } #fd-kayak { --c: var(--c-coral); }
.fl[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.finder-air { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.finder-air a { font-size: .85rem; font-weight: 600; text-decoration: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); }
.finder-air a:hover { border-color: var(--ink); }
#fd-msg:empty { display: none; }
#fd-msg { color: var(--no); font-weight: 600; }
#fd-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
#fd-tips li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .93rem; color: var(--muted); align-items: start; }
#fd-tips li::before { content: "i"; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem var(--mono); color: #fff; background: var(--c-blue); }
#fd-tips li.ok::before { content: "✓"; background: var(--ok); }
#fd-tips li.warn::before { content: "!"; background: var(--c-amber); }
#fd-tips li b { color: var(--ink); }
.alt-btn { font: 600 .9rem var(--body); background: none; border: 0; padding: 0; color: var(--accent-ink); text-decoration: underline; cursor: pointer; }
@media (max-width: 1100px) { .finder-form { grid-template-columns: 1fr; } }
@media (max-width: 920px) { .finder-out { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .finder { padding: 20px; }
  .fd-pair { grid-template-columns: 1fr; } .fd-pair .icon-btn { justify-self: center; transform: rotate(90deg); }
  .fd-when { grid-template-columns: 1fr 1fr; } .fd-when label:last-child { grid-column: 1 / -1; }
  .finder-links { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  #fd-tips li { animation: tipIn .4s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
  @keyframes tipIn { from { opacity: 0; transform: translateX(-8px); } }
}

.estimate { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 16px; background: color-mix(in srgb, var(--c-green) 7%, var(--bg)); border: 1px solid color-mix(in srgb, var(--c-green) 25%, var(--line)); margin-bottom: 6px; }
.est-range { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.est-range b { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.est-range span { font-size: .9rem; color: var(--muted); }
.est-bar { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--c-green), var(--c-amber), var(--c-coral)); margin-top: 4px; }
.est-bar i { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--surface); border: 3px solid var(--ink); box-shadow: var(--shadow); transition: left .7s cubic-bezier(.2,.7,.3,1); }
.est-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.est-factors { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.est-factors li { font-size: .8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.est-factors li.up { background: color-mix(in srgb, var(--c-coral) 15%, transparent); color: var(--c-coral); }
.est-factors li.down { background: color-mix(in srgb, var(--c-green) 15%, transparent); color: var(--c-green); }
.est-cheaper { font-size: .92rem; color: var(--ink); }
.est-cheaper button { font: 600 .92rem var(--body); background: var(--c-green); color: #fff; border: 0; border-radius: 999px; padding: 6px 14px; margin-left: 6px; cursor: pointer; }
.est-cheaper button:hover { filter: brightness(1.08); }

.ap-buy { font: 600 .85rem var(--body); color: var(--tone); background: color-mix(in srgb, var(--tone) 10%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); border-radius: 999px; padding: 9px 12px; cursor: pointer; transition: background .2s, color .2s; }
.ap-buy span { display: inline-block; transition: transform .25s; }
.ap-buy:hover { background: var(--tone); color: #fff; }
.ap-buy:hover span { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
  .finder.flash-box { animation: flashBox 1.6s ease .4s; }
  @keyframes flashBox { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-blue) 55%, transparent); } }
}

/* Faixa de instalação do aplicativo (só aparece no site publicado, quando o navegador permite instalar) */
.install-bar { position: fixed; z-index: 45; left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.install-bar img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.install-bar p { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .85rem; color: var(--muted); line-height: 1.35; }
.install-bar p b { color: var(--ink); font-size: .95rem; }
.install-bar .btn { padding: 10px 16px; flex: none; }
.install-bar .icon-btn { width: 34px; height: 34px; flex: none; }
.install-bar.ios .btn { display: none; }
body.has-install-bar .to-top { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: no-preference) { .install-bar:not([hidden]) { animation: barIn .5s cubic-bezier(.2,.7,.3,1); } @keyframes barIn { from { transform: translateY(120%); opacity: 0; } } }

/* Mapa-múndi animado (sempre noturno, como o mapa do topo) */
.world { --tone: var(--c-teal); padding: 0; margin-bottom: 28px; background: radial-gradient(90% 120% at 40% 60%, #13284A 0%, #0A1628 55%, #050B15 100%); border-color: rgba(207,174,118,.25); }
.section .world, .section.alt .world { background-image: radial-gradient(90% 120% at 40% 60%, #13284A 0%, #0A1628 55%, #050B15 100%); }
.world:hover { transform: none; }
.world canvas { display: block; width: 100%; max-width: 100%; aspect-ratio: 2.4 / 1; min-height: 220px; }
.world .hud-tag { top: 14px; left: 14px; background: rgba(8,16,30,.6); color: #F3E3C3; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Refinamento: celular */
@media (max-width: 860px) { .section { padding-block: 56px; } .section-head { margin-bottom: 32px; } }
@media (max-width: 520px) {
  .hero-dark .hero-stats b { font-size: 1.9rem; }
  .hero-dark .actions .btn { flex: 1 1 100%; justify-content: center; }
  .stat b { font-size: 2.4rem; }
}
/* Linha do atraso: vertical em telas menores */
.delay { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .delay { grid-template-columns: 1fr; row-gap: 0; }
  .delay li { border-top: 0; border-left: 3px solid var(--line); padding: 0 0 22px 24px; }
  .delay li.final { border-left-color: var(--accent); padding-bottom: 4px; }
  .delay li::before { top: 2px; left: -9px; }
}
/* Tabelas viram cartões no celular */
@media (max-width: 600px) {
  .items-table, .sounds { min-width: 0; }
  .items-table thead, .sounds thead { display: none; }
  .items-table tr, .sounds tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .items-table tbody tr:last-child, .sounds tbody tr:last-child { border-bottom: 0; }
  .items-table td, .sounds td { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; text-align: left !important; }
  .items-table td:first-child, .sounds td:first-child { grid-column: 1 / -1; }
  .items-table td:nth-child(2)::before, .items-table td:nth-child(3)::before { font: 500 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .items-table td:nth-child(2)::before { content: "Mala de mão"; }
  .items-table td:nth-child(3)::before { content: "Despachada"; }
  .items-table .badge { align-self: flex-start; white-space: normal; }
  .sounds td:nth-child(2), .sounds td:nth-child(3) { grid-column: 1 / -1; }
  .sounds td:nth-child(2) { color: var(--ink); font-weight: 500; }
  .sounds td:nth-child(3) { color: var(--muted); }
  tbody tr:hover td { background: transparent; }
}

/* Desempenho: animações paradas nas seções fora da tela */
.offscreen, .offscreen *, .offscreen *::before, .offscreen *::after { animation-play-state: paused !important; }

/* Dicas de passagens recolhidas */
.tips.collapsed .tip:nth-child(n+7) { display: none; }
@media (min-width: 1400px) { .tips.collapsed .tip:nth-child(n+7) { display: flex; } .tips.collapsed .tip:nth-child(n+9) { display: none; } }
.tips-more { margin: 16px auto 0; display: flex; }

/* Buscador em abas */
.finder-real { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 22px; }
.fd-tabs { margin-bottom: 0; scrollbar-width: none; }
.fd-tabs::-webkit-scrollbar { display: none; }
.fd-count { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font: 600 .72rem var(--mono); color: var(--muted); vertical-align: 1px; }
.fd-count:empty { display: none; }
.fd-panel { min-height: 120px; }
.fd-panel.cal, .fd-panel.wx { border-top: 0; padding-top: 0; }
.estimate { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) { .fd-panel:not([hidden]) { animation: panelIn .35s ease; } @keyframes panelIn { from { opacity: 0; transform: translateY(6px); } } }

/* Calendário de preços estimados */
.cal { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.cal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; }
.cal-head > div:first-child { display: flex; flex-direction: column; gap: 6px; max-width: 70ch; min-width: 0; }
.cal-note { font-size: .9rem; color: var(--muted); }
.cal-nav { display: flex; gap: 8px; }
.cal-nav .icon-btn:disabled { opacity: .35; cursor: default; }
.cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cal-month { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cal-month h4 { font-family: var(--display); font-weight: 400; font-size: 1.35rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 2px; }
.cal-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 50px; padding: 4px 2px; border-radius: 10px; border: 1px solid transparent; background: var(--surface-2); color: var(--ink); font: 600 .9rem var(--body); cursor: pointer; font-variant-numeric: tabular-nums; transition: transform .15s, border-color .15s; min-width: 0; }
.cal-day small { font: 500 .62rem var(--mono); color: var(--muted); white-space: nowrap; }
.cal-day:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--ink); }
.cal-day:disabled { cursor: default; opacity: .35; background: transparent; }
.cal-day.sel { border: 2px solid var(--ink); }
.cal-day.best::after { content: "★"; position: absolute; top: 2px; right: 4px; font-size: .62rem; color: var(--c-green); }
.cal-day.empty { visibility: hidden; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .8rem; color: var(--muted); }
.cal-legend i { width: 120px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--c-green) 45%, var(--surface)), color-mix(in srgb, var(--c-amber) 45%, var(--surface)), color-mix(in srgb, var(--c-coral) 45%, var(--surface))); }
.cal-star { color: var(--c-green); font-weight: 600; margin-left: 8px; }
.cal-sel { padding: 1px 8px; border: 2px solid var(--ink); border-radius: 6px; color: var(--ink); }
.cal-explore { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 14px; background: var(--surface-2); }
.cal-explore p { font-size: .93rem; color: var(--muted); }
.cal-explore b { color: var(--ink); }
@media (max-width: 760px) { .cal-months { grid-template-columns: 1fr; } .cal-day { min-height: 44px; } .cal-day small { font-size: .56rem; } }

/* Tempo na viagem */
.wx { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.wx-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.wx-note { font-size: .9rem; color: var(--muted); max-width: 70ch; }
.wx-note b { color: var(--ink); }
.wx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wx-city { --c: var(--c-blue); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, var(--bg)), var(--bg) 70%); min-width: 0; }
.wx-city.dest { --c: var(--c-amber); }
.wx-top { display: flex; align-items: center; gap: 14px; }
.wx-icon { width: 46px; height: 46px; flex: none; color: var(--c); }
.wx-top small { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wx-top b { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.wx-links { display: flex; flex-wrap: wrap; gap: 8px; }
.wx-links a { font-size: .85rem; font-weight: 600; text-decoration: none; padding: 7px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); background: var(--surface); transition: background .2s, color .2s; }
.wx-links a:hover { background: var(--c); border-color: var(--c); color: #fff; }
@media (max-width: 760px) { .wx-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .wx-icon .sun-core { transform-origin: 24px 20px; animation: spin 18s linear infinite; }
  .wx-icon .cloud { animation: drift 5s ease-in-out infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes drift { 50% { transform: translateX(3px); } }
}

/* Comparador de aeronaves em escala */
.compare { --tone: var(--c-coral); padding: 26px; display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.compare:hover { transform: none; }
.compare-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--bg); }
.seg button { font: 500 .88rem var(--body); border: 0; background: transparent; color: var(--muted); padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.compare-body { display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; align-items: center; }
.compare-body > * { min-width: 0; }
.compare-stage svg { width: 100%; height: auto; max-height: 620px; display: block; overflow: visible; }
.compare-list { display: flex; flex-direction: column; gap: 6px; }
.cmp-chip { --c: var(--ink); display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; text-align: left; font: 500 .93rem var(--body); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: border-color .2s, opacity .2s, background .2s; }
.cmp-chip i { width: 14px; height: 14px; border-radius: 4px; background: var(--c); border: 1.5px solid var(--c); }
.cmp-chip small { font-family: var(--mono); font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-chip:hover, .cmp-chip:focus-visible { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); }
.cmp-chip[aria-pressed="false"] { opacity: .5; }
.cmp-chip[aria-pressed="false"] i { background: transparent; }
.cmp-plane { transition: transform .9s cubic-bezier(.6,0,.2,1), opacity .35s; }
.cmp-plane .body { fill: color-mix(in srgb, var(--c) 15%, transparent); stroke: var(--c); stroke-width: .32; stroke-linejoin: round; stroke-dasharray: 1; }
.cmp-plane.off { opacity: 0; }
#cmp-svg.focus .cmp-plane:not(.hot) { opacity: .12; }
#cmp-svg.focus .cmp-plane.hot .body { fill: color-mix(in srgb, var(--c) 30%, transparent); stroke-width: .5; }
.cmp-label { font-family: var(--mono); font-size: 2.6px; fill: var(--ink); text-anchor: middle; opacity: 0; transition: opacity .4s; }
.cmp-label tspan { fill: var(--muted); }
#cmp-svg.side .cmp-label { opacity: 1; }
.cmp-ruler { transition: transform .9s cubic-bezier(.6,0,.2,1); }
.cmp-ruler path { stroke: var(--muted); stroke-width: .25; fill: none; }
.cmp-ruler text { font-family: var(--mono); font-size: 2.3px; fill: var(--muted); text-anchor: middle; }
@media (max-width: 920px) { .compare-body { grid-template-columns: 1fr; } .compare-list { display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .compare-list { grid-template-columns: 1fr; } .compare { padding: 20px; } }
@media (prefers-reduced-motion: no-preference) {
  .card.play .cmp-plane .body { animation: draw 1.6s cubic-bezier(.4,0,.2,1) backwards; animation-delay: calc(var(--n) * 140ms + .2s); }
  @keyframes draw { from { stroke-dashoffset: 1; fill-opacity: 0; } 60% { fill-opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .cmp-plane, .cmp-ruler { transition: none; } }

/* Voos ao vivo: relógio de palhetas, ponto ao vivo, luzes de aproximação e ícones de decolagem/pouso */
.ap-clock small { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--no); flex: none; }
.ap-clock .t { display: inline-flex; gap: 2px; perspective: 300px; margin-top: 3px; }
.ap-clock .t .d { display: inline-block; min-width: .72em; padding: 2px 0; text-align: center; border-radius: 4px; background: color-mix(in srgb, var(--tone) 16%, var(--surface-2)); color: var(--ink); position: relative; transform-origin: 50% 50%; }
.ap-clock .t .d::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.ap-clock .t .sep { color: var(--muted); padding-inline: 1px; }
.ap-links a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; overflow: hidden; }
.pl-ico { width: 18px; height: 15px; color: var(--tone); flex: none; transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.dep .pl-ico { transform: rotate(-20deg); }
.arr .pl-ico { transform: rotate(20deg); }
.ap-links a:hover .pl-ico { color: #fff; }
.rabbit { display: flex; justify-content: space-between; gap: 4px; padding-top: 2px; }
.rabbit span { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--tone) 28%, transparent); }
.route-mini { display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .live { animation: live 1.6s ease-out infinite; }
  @keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--no) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
  .ap-clock .t .d.flip { animation: flip .5s cubic-bezier(.3,.7,.3,1.2); }
  @keyframes flip { 0% { transform: rotateX(-90deg); filter: brightness(1.6); } 60% { transform: rotateX(12deg); } 100% { transform: none; } }
  .dep:hover .pl-ico { transform: translate(5px, -6px) rotate(-32deg) scale(1.1); }
  .arr:hover .pl-ico { transform: translate(5px, 6px) rotate(32deg) scale(1.1); }
  .rabbit span { animation: rabbit 2.2s linear infinite; animation-delay: calc(var(--k) * 70ms); }
  @keyframes rabbit { 0%, 12% { background: var(--tone); box-shadow: 0 0 8px var(--tone); } 22%, 100% { background: color-mix(in srgb, var(--tone) 28%, transparent); box-shadow: none; } }
}

/* Visual mais humano: um acento só (latão), sem brilho, sem faixas coloridas e com pouco movimento */
:is(.forces, .timeline, .tips, .guide, .grid2, .grid3, .stats, .steps, .phases, .acc, .ap-grid) > :nth-child(n),
.when-card, .quiz, .calc, .tool, .checklist, .spans, .contacts, .route, .breathe, .cheese, .acc li.ok, .finder, .compare { --tone: var(--accent-ink); }
.card, .section.alt .card { background-image: none; }
.card::before, .face::before { display: none; }
.card:hover { transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.face.front { background: var(--surface); }
.face.back { background: var(--surface-2); border-color: var(--line); }
.flip-btn:hover .face.front { box-shadow: none; }
.force-icon, .phase-num, .steps li::before, .section.alt .force-icon { background: transparent; }
.stat b, .ap-code { color: var(--ink); }
.span-bar { background: var(--sky); }
.span-row.hi .span-bar { background: var(--accent); }
.check-bar span { background: var(--accent); }
#fd-google, #fd-sky, #fd-kayak { --c: var(--accent-ink); }
.fl:hover { transform: none; box-shadow: none; border-color: var(--accent); }
.eyebrow { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.15rem; letter-spacing: 0; text-transform: none; }
.eyebrow::before { display: none; }
.hero-dark .eyebrow { font-size: 1.3rem; }
.hero-note { border-top: 1px solid rgba(238,241,245,.14); padding-top: 18px; color: rgba(238,241,245,.62); font-size: .95rem; max-width: 52ch; }
.hud-tag i { display: none; }
.route-mini { margin-top: 10px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); aspect-ratio: 5 / 4; }
@media (prefers-reduced-motion: no-preference) {
  .card.play, .card.play::before, .span-row.play .span-bar { animation: none; }
  .forces .force .force-icon { animation: none !important; }
  .flip-hint, .live { animation: none; }
  .card:hover .fact-img { transform: none; }
  .phase:hover .phase-num, .steps li:hover::before { animation: none; }
  .flip-btn[aria-pressed="false"]:hover { transform: none; }
}

.hero-dark .btn-link { background: none; border-color: transparent; color: #D9BC88; padding-inline: 10px; text-decoration: underline; text-underline-offset: 5px; }
.hero-dark .btn-link:hover { color: #FFFFFF; }
/* Meus voos no simulador */
.sim-sec { background: radial-gradient(120% 90% at 15% 0%, #1C2D47 0%, #0B1522 55%, #070D16 100%); color: #EEF1F5; }
.sim-sec h2 { color: #FFFFFF; }
.sim-sec .section-head p { color: rgba(238,241,245,.72); }
.sim-sec .eyebrow { color: #D9BC88; }
.sim { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px 28px; align-items: start; }
.sim-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sim-stage { position: relative; border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 1280 / 536; box-shadow: 0 30px 80px rgba(0,0,0,.45); outline: 1px solid rgba(207,174,118,.3); outline-offset: -1px; }
.sim-stage video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.sim-off { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: rgba(238,241,245,.85); background: linear-gradient(135deg, #13284A, #050B15); }
.sim-info { display: flex; flex-direction: column; gap: 6px; }
.sim-info h3 { color: #FFFFFF; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.sim-info p { color: rgba(238,241,245,.72); max-width: 70ch; }
.sim-dur { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #D9BC88; }
.sim-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sim-item { display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: center; text-align: left; padding: 8px; border-radius: 14px; border: 1px solid rgba(238,241,245,.12); background: rgba(255,255,255,.04); color: #EEF1F5; font: inherit; cursor: pointer; transition: background .2s, border-color .2s; }
.sim-item:hover { background: rgba(255,255,255,.08); }
.sim-item[aria-current="true"] { border-color: #CFAE76; background: rgba(207,174,118,.14); }
.sim-thumb { position: relative; display: block; aspect-ratio: 1280 / 536; border-radius: 9px; overflow: hidden; background: linear-gradient(135deg, #1E5BD8, #0B1522); }
.sim-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sim-thumb i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; color: #fff; font-size: .95rem; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.sim-item b { display: block; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.sim-item small { color: rgba(238,241,245,.6); font-size: .8rem; }
@media (max-width: 1100px) { .sim { grid-template-columns: 1fr; } .sim-list { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .sim-item { flex: 0 0 230px; grid-template-columns: 1fr; scroll-snap-align: start; } }
/* Tripulação */
.crew-sec { background: linear-gradient(180deg, color-mix(in srgb, #2F80ED 12%, var(--bg)), var(--bg) 85%); }
.crew-art { border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 7.5; box-shadow: 0 24px 60px rgba(20,60,120,.25); margin-bottom: 20px; background: #8CC8FF; }
.crew-art svg { display: block; width: 100%; height: 100%; }
.crew-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.crew-card { padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.crew-card p { color: var(--muted); font-size: .95rem; }
.crew-stripes { display: flex; flex-direction: column; gap: 3px; width: 46px; padding: 7px 6px; border-radius: 8px; background: #14233A; }
.crew-stripes i { height: 3px; background: #F2C14E; border-radius: 2px; }
.crew-badge { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #E23D3D; color: #fff; font-weight: 700; font-size: 1.1rem; }
.crew-card:nth-child(4) .crew-badge { background: #0E7C86; }
@media (max-width: 1100px) { .crew-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .crew-cards { grid-template-columns: 1fr; } .crew-art { aspect-ratio: 4 / 3; border-radius: 18px; } }

/* ---- Páginas separadas ---- */
.sec-title { font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.02; }
.sim-sec .sec-title { color: #FFFFFF; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.guide-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; color: inherit; text-decoration: none; }
.guide-card h3 { font-size: 1.4rem; }
.guide-card p { margin: 0; color: var(--muted); }
.guide-card .go { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--accent-ink); }
.guide-card:hover, .guide-card:focus-visible { border-color: var(--accent-ink); }
.next-sec { padding-block: 48px; border-top: 1px solid var(--line); }
.next-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.next-title { margin: 6px 0 0; font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15; }
@media (min-width: 761px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
/* Sobre e Privacidade */
.prose { max-width: 68ch; font-size: 1.05rem; line-height: 1.65; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.15; margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 1.2em; display: grid; gap: 8px; }
.prose a { color: var(--accent-ink); }
.prose-note { color: var(--muted); font-size: .95rem; margin-top: 32px !important; }
/* Termos técnicos com explicação ao tocar */
.term { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: help; text-decoration: underline dotted; text-decoration-color: var(--accent-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.term:hover, .term[aria-expanded="true"] { color: var(--accent-ink); }
.term:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 3px; }
.term-tip { position: fixed; z-index: 1000; max-width: min(320px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: .92rem; line-height: 1.45; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.term-tip b { display: block; margin-bottom: 2px; }
.term-tip a { color: inherit; opacity: .8; font-size: .85rem; }
/* Overbooking (página de direitos do passageiro) */
.ob-box { margin: 8px 0 40px; padding: clamp(20px, 3.4vw, 36px); display: grid; gap: 18px; border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ob-head { display: grid; gap: 10px; max-width: 62ch; }
.ob-head h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.ob-head p { margin: 0; color: var(--ink); font-size: 1.08rem; line-height: 1.6; }
.ob-sub { margin: 10px 0 0; font-size: 1.2rem; }
.ob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.ob-tip { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line); }
.ob-ico { font-size: 1.6rem; line-height: 1; }
.ob-tip b { font-size: 1.05rem; line-height: 1.3; }
.ob-tip p, .ob-steps p { margin: 0; color: var(--ink); opacity: .85; font-size: 1rem; line-height: 1.55; }
.ob-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: ob; }
.ob-steps li { counter-increment: ob; position: relative; padding: 14px 18px 14px 64px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); display: grid; gap: 4px; }
.ob-steps li::before { content: counter(ob); position: absolute; left: 16px; top: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--accent); color: #1A1200; }
.ob-steps b { font-size: 1.05rem; }
/* Cadastro de avisos de promoções */
.al-banner { display: block; margin: -16px 0 28px; padding: 14px 18px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink); text-decoration: none; font-size: 1rem; }
.al-banner b { color: var(--accent-ink); white-space: nowrap; }
.al-banner:hover { border-style: solid; }
.al-box { margin-top: 32px; padding: clamp(20px, 3.4vw, 36px); display: grid; gap: 18px; border: 2px solid color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.al-head { display: grid; gap: 8px; max-width: 62ch; }
.al-head h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.al-head p { margin: 0; color: var(--ink); font-size: 1.05rem; line-height: 1.6; }
.al-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; align-items: end; }
.al-f { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.al-f input { font: inherit; font-weight: 400; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); min-width: 0; }
.al-f input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.al-ok { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.5; }
.al-ok input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.al-ok a { color: var(--accent-ink); }
.al-form .btn { grid-column: 1 / -1; justify-self: start; min-height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 700; }
.al-msg { grid-column: 1 / -1; margin: 0; padding: 12px 16px; border-radius: 12px; font-weight: 600; }
.al-msg.is-ok { background: color-mix(in srgb, #1FA463 18%, transparent); border: 1px solid #1FA463; }
.al-msg.is-err { background: color-mix(in srgb, #E23D3D 15%, transparent); border: 1px solid #E23D3D; }
.al-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .al-form .btn { justify-self: stretch; } }
/* Pode e não pode: alinhamento */
@media (min-width: 921px) {
  .phases { grid-auto-rows: auto; align-items: stretch; }
  .phase { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; align-content: start; }
  .phase .rl-label { align-self: end; }
}
.phase .rl-label { display: block; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.phase .rl-label.n { margin-top: 6px; }
.rl li { align-items: start; line-height: 1.5; }
.mk { margin-top: 0; }
.items-table { width: 100%; table-layout: fixed; }
.items-table th:first-child, .items-table td:first-child { width: 46%; }
.items-table th, .items-table td { vertical-align: middle; }
.items-table .badge { min-width: 112px; justify-content: center; }
:lang(en) .items-table td:nth-child(2)::before { content: "Carry-on"; }
:lang(en) .items-table td:nth-child(3)::before { content: "Checked bag"; }
:lang(es) .items-table td:nth-child(2)::before { content: "Equipaje de mano"; }
:lang(es) .items-table td:nth-child(3)::before { content: "Facturado"; }
@media (max-width: 760px) { .items-table { table-layout: auto; } .items-table th:first-child, .items-table td:first-child { width: auto; } .items-table .badge { min-width: 0; } }
/* Estacionamento */.pk-box { margin-top: 24px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 12px; }
.pk-box h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.pk-box > p { margin: 0; color: var(--ink); opacity: .85; max-width: 70ch; }
.pk-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.pk-table th, .pk-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.pk-table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pk-table tbody th { font-weight: 400; } .pk-table tbody th b { color: var(--accent-ink); margin-right: 4px; }
.pk-table td a { display: inline-block; margin-left: 6px; font-size: .85rem; color: var(--accent-ink); }
.pk-ct { font-size: .9rem; line-height: 1.55; white-space: nowrap; } .pk-ct a { margin-left: 0 !important; }
.pk-note { font-size: .88rem; color: var(--muted) !important; opacity: 1 !important; }
@media (max-width: 760px) {
  .pk-table thead { display: none; }
  .pk-table tr { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .pk-table th, .pk-table td { border: 0; padding: 2px 0; }
  .pk-table td::before { content: attr(data-l) ": "; color: var(--muted); font-size: .85rem; }
}
/* Tripulação: no mesmo estilo escuro e dourado do site */
.crew-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.crew-photos figure { margin: 0; position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); background: #081326; }
.crew-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.crew-photos figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; background: linear-gradient(transparent, rgba(4, 10, 20, .85)); color: #F5D58A; font-weight: 700; font-size: .95rem; }
.crew-credit { grid-column: 1 / -1; justify-self: end; color: var(--muted); font-size: .75rem; }
@media (max-width: 700px) { .crew-photos { grid-template-columns: 1fr; } }
.crew-sec { background: var(--bg); }
.crew-art { background: #081326; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.crew-badge, .crew-card:nth-child(4) .crew-badge { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); }
.crew-stripes { background: transparent; border: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); }
/* Botões do topo da página inicial: mesmo tamanho, com ícone */
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero .actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-size: 1rem; font-weight: 700; text-decoration: none; transition: transform .15s, filter .15s; }
.hero .actions .btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.hero .actions .btn::before { font-size: 1.15rem; line-height: 1; }
.hero .actions .btn-primary::before { content: "🎫"; }
.hero .actions .btn-secondary::before { content: "📖"; }
.hero .actions .btn-link { border: 1.5px solid var(--accent); color: var(--accent); background: transparent; }
.hero .actions .btn-link::before { content: "💙"; }
/* Fundo nos botões "Começar a leitura" e "Tem medo de voar?" */
.hero .actions .btn-secondary { background: rgba(238,241,245,.12); border-color: rgba(238,241,245,.3); color: #EEF1F5; }
.hero .actions .btn-secondary:hover { background: rgba(238,241,245,.2); border-color: #D9BC88; }
.hero .actions .btn-link { background: rgba(207,174,118,.16); text-decoration: none; }
.hero .actions .btn-link:hover { background: rgba(207,174,118,.28); color: #FFFFFF; }
@media (max-width: 600px) { .hero .actions .btn { flex: 1 1 100%; } }
/* Cartões de aeroporto: botões nas cores do site (azul-marinho e dourado) */
.ap-go { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, #0B1830 55%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); }
.ap-go > small { flex: 1 1 100%; }
.ap-go small { display: flex; align-items: center; gap: 6px; font-family: var(--body, inherit); font-size: .8rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--accent-ink); }
.ap-go small::before { content: "🛬"; font-size: .95rem; }
.ap-route small::before { content: "🛫"; }
.ap-go a { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 calc(50% - 4px); text-align: center; padding: 9px 10px; border-radius: 999px; text-decoration: none; font-size: .86rem; font-weight: 600; line-height: 1.2; white-space: normal; color: var(--ink); background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); transition: background .15s, color .15s, border-color .15s; }
.ap-go a::before { font-size: .95rem; }
.ap-go a:hover, .ap-go a:focus-visible { background: var(--accent); border-color: var(--accent); color: #1A1200; }
.ap-go a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ap-route a.rt-fast { flex-basis: 100%; padding: 11px 8px; font-size: .95rem; background: var(--accent); border-color: var(--accent); color: #1A1200; font-weight: 700; }
.ap-route a.rt-fast:hover { filter: brightness(1.08); }
.ap-go a.go-uber::before { content: "🚗"; } .ap-go a.go-99::before { content: "🚖"; } .ap-go a.go-taxi::before { content: "🚕"; } .ap-go a.go-bus::before { content: "🚌"; }
.ap-route a.rt-fast::before { content: "⚡"; } .ap-route a.rt-waze::before { content: "🧭"; } .ap-route a.rt-park::before { content: "🅿️"; }
:root[data-theme="light"] .ap-go { background: color-mix(in srgb, var(--accent) 6%, transparent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ap-go { background: color-mix(in srgb, var(--accent) 6%, transparent); } }
.ap-other { margin-top: 16px; padding: 20px; display: grid; gap: 10px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, #0B1830 40%, var(--surface)); }
.ap-other label::before { content: "🌍 "; }
.ap-other label { font-family: var(--display); font-size: 1.25rem; }
.ap-other-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-other-row input { flex: 1 1 220px; min-width: 0; font: inherit; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.ap-other-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ap-other p { margin: 0; color: var(--muted); font-size: .9rem; }
/* Menu de idiomas */
.lang-menu { position: relative; }
.lang-btn { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); cursor: pointer; font: 600 .78rem var(--mono); letter-spacing: .06em; user-select: none; }
.lang-btn::-webkit-details-marker { display: none; }
.lang-btn:hover, .lang-menu[open] .lang-btn { border-color: var(--accent); }
.lang-btn svg { width: 16px; height: 16px; }
.lang-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; display: grid; min-width: 230px; max-width: calc(100vw - 32px); max-height: min(70vh, 480px); overflow-y: auto; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: 0 14px 36px rgba(0, 0, 0, .2); }
.lang-panel a { padding: 9px 12px; border-radius: 8px; color: inherit; text-decoration: none; font-size: .93rem; }
.lang-panel a:hover, .lang-panel a:focus-visible { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.lang-panel a[aria-current] { font-weight: 700; }
.lang-panel a[aria-current]::after { content: " ✓"; color: var(--accent-ink); }
.lang-panel small { margin: 6px 4px 2px; padding: 10px 8px 4px; border-top: 1px solid var(--line); color: var(--muted); font-size: .74rem; line-height: 1.35; }
@media (max-width: 420px) { .lang-btn span { display: none; } .lang-btn { width: 40px; padding: 0; justify-content: center; } }

/* ==========================================================================
   Acabamento: tudo alinhado, leitura confortável, movimento suave
   ========================================================================== */

/* Nada passa da largura da tela */
html, body { overflow-x: clip; }
img, video, canvas, svg { max-width: 100%; }

/* Leitura: texto um pouco maior, linhas mais arejadas e cinza com mais contraste */
:root { --muted: #4F5C6B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --muted: #A7B4C2; } }
:root[data-theme="dark"] { --muted: #A7B4C2; }
body { font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
p, li, dd { text-wrap: pretty; }
.section-head p, .panel > p, .al-head p, .hero-lede { line-height: 1.7; }
h1, h2, h3 { text-wrap: balance; }
.section-head { align-items: end; gap: 18px 56px; }
.section-head h2 { margin-top: 4px; }

/* Rótulos pequenos com um só estilo em todo o site */
.tip .tagline, .guide .item .tagline, .when-row span, .back-tag, .rl-label { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none; }
.when-row span { color: var(--muted); }

/* Cartões: mesmo raio, mesmo respiro e sombra leve ao passar o mouse */
.card { border-radius: 20px; box-shadow: 0 1px 2px rgba(13, 27, 42, .04); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.card:hover { box-shadow: 0 10px 28px rgba(13, 27, 42, .08); }
.guide-grid, .tips, .grid2, .grid3, .stats, .steps, .crew-cards, .forces { gap: 18px; }
.guide-card { padding: 26px; gap: 10px; }
.guide-card:hover { transform: translateY(-2px); }
.guide-card .go span { display: inline-block; transition: transform .25s ease; }
.guide-card:hover .go span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .card, .guide-card:hover, .guide-card .go span { transition: none; transform: none !important; } }

/* Botões e links: transições suaves e foco bem visível */
a, button, .btn, input, select, summary { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
input:focus-visible, select:focus-visible { outline-offset: 1px; }

/* Topo da página inicial: botões alinhados em grade, todos do mesmo tamanho */
.hero .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.hero .actions .btn { width: 100%; min-height: 54px; padding: 0 20px; }
.hero .actions .btn-link { grid-column: 1 / -1; }
.hero .actions .btn:hover { transform: translateY(-1px); filter: none; }
.hero .actions .btn-primary:hover { filter: brightness(1.06); }
@media (max-width: 600px) { .hero .actions { grid-template-columns: 1fr; max-width: none; } .hero .actions .btn { flex: none; } }
.hero-copy { gap: 24px; }
.hero-note { max-width: 560px; }

/* Tripulação: ícones do mesmo tamanho, títulos na mesma linha */
.crew-card { gap: 12px; }
.crew-stripes, .crew-badge { width: 44px; height: 44px; flex: none; box-sizing: border-box; }
.crew-stripes { justify-content: center; padding: 8px 9px; border-radius: 50%; }
.crew-stripes i { height: 2.5px; }
.crew-badge { font-size: 1rem; }

/* Cadastro de promoções: os três campos ocupam a largura inteira */
.al-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.al-f input { width: 100%; min-height: 48px; }
@media (max-width: 760px) { .al-form { grid-template-columns: 1fr; } }

/* Celular: cabeçalho cabe na tela */
@media (max-width: 520px) {
  .nav-row { gap: 10px; }
  .nav-tools { gap: 6px; }
  .brand { gap: 8px; min-width: 0; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: 1.3rem; white-space: nowrap; }
  .lang-btn span { display: none; }
  .lang-btn { width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 360px) { .brand-name { font-size: 1.15rem; } .icon-btn, .lang-btn { width: 36px; height: 36px; } }

/* Celular: mais respiro nas laterais e títulos proporcionais */
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .hero-dark h1 { font-size: clamp(2.3rem, 10vw, 3rem); line-height: 1.04; }
  .section-head { margin-bottom: 28px; }
  .guide-card { padding: 22px; }
}