/* ===== Repaginação "editorial" (v4.0) =====
   Carregada por último: troca a pele do app sem mexer na estrutura. Ideia: fundo claro com painéis em tom suave, linhas finas no lugar de
   sombras, cor só onde importa, saudação e títulos em serifa (Lora), textos na Plus Jakarta Sans da marca. O degradê da marca aparece só nas
   assinaturas: logotipo, cartão de embarque, aba ativa, destaque e botão principal. Prefixo `html[data-cia]` = força para vencer a paleta por companhia. */
:root { --font-serif: "Lora", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --rule: #EEF0F5; --faint: #6A7390; }
html[data-theme][data-cia] {
  --bg: #FFFFFF; --surface: #F6F6FA; --surface-2: #ECEEF5; --line: #E4E6EE; --rule: #EEF0F5;
  --text: #1B2340; --text-muted: #566079; --faint: #6A7390; --primary: #1D2F8C; --on-primary: #FFFFFF;
  --hover-line: #C9CEDD; --focus: #0B4FB8; --shadow: none; --toast-bg: #1B2340; --tabbar-bg: rgb(255 255 255 / .92);
}
html[data-theme="dark"][data-cia] {
  --bg: #0D0F14; --surface: #151821; --surface-2: #1E222D; --line: #272C39; --rule: #1B1F29;
  --text: #F3F5FA; --text-muted: #A9B1C3; --faint: #8F97AB; --primary: #9DB8FF; --on-primary: #0D0F14;
  --hover-line: #3A4152; --focus: #7FA6FF; --toast-bg: #272C39; --tabbar-bg: rgb(13 15 20 / .92);
}
/* A companhia escolhida tinge só o texto de destaque (links, aba ativa), nunca o fundo. */
html[data-theme][data-cia="gol"] { --primary: #B84300; } html[data-theme="dark"][data-cia="gol"] { --primary: #FF8A3D; }
html[data-theme][data-cia="latam"] { --primary: #1B0088; } html[data-theme="dark"][data-cia="latam"] { --primary: #B7A9FF; }
html[data-theme][data-cia="azul"] { --primary: #0B4EA2; } html[data-theme="dark"][data-cia="azul"] { --primary: #6FB6FF; }

html { background: var(--bg); }
body { background: var(--bg); color: var(--text); font-size: calc(1rem * var(--font-scale)); line-height: 1.5; letter-spacing: 0; }
h1, h2, h3 { letter-spacing: 0; }
html[data-cia] h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.75rem, 8.2vw, 2.25rem); line-height: 1.12; letter-spacing: -.012em; color: var(--text); }
html[data-cia] h2 { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.num, .fact b, .pass b, .progress-txt b { font-variant-numeric: tabular-nums lining-nums; }

/* Topo */
html[data-cia] .appbar { background: var(--bg); }
html[data-cia] .appbar::after { display: none; }
html[data-cia] .appbar.scrolled { border-bottom-color: var(--rule); }
html[data-cia] .icon-btn { color: var(--text-muted); }
html[data-cia] .icon-btn:hover { background: var(--surface); color: var(--text); }
html[data-cia] .icon-btn[aria-current="page"] { background: var(--surface); color: var(--text); }
html[data-cia] #view { gap: 30px; padding-top: 6px; }


/* Seções */
html[data-cia] .section { gap: 10px; }
html[data-cia] .section-head h2, html[data-cia] .blk-head h2 { font-size: .9375rem; font-weight: 700; color: var(--text); }

/* Busca */
html[data-cia] .search-box .input, html[data-cia] a.search-box .input { background: var(--surface); border: 0; border-radius: 16px; min-height: 52px; color: var(--text-muted); }
html[data-cia] .search-box .i { color: var(--text-muted); }

/* Chips e seletores */
html[data-cia] .chips, html[data-cia] .chips.companhias { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-cia] .chips.scroll { flex-wrap: nowrap; }
html[data-cia] .chip { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-weight: 600; font-size: .9375rem; box-shadow: none; }
html[data-cia] .chip:hover { border-color: var(--hover-line); background: var(--surface); }
html[data-cia] .chip[aria-pressed="true"], html[data-cia] .chip[aria-checked="true"],
html[data-cia][data-cia] .chip[data-id="todas"][aria-checked="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
html[data-cia] .segmented { background: var(--surface); border-radius: 14px; padding: 3px; gap: 2px; }
html[data-cia] .segmented button { border-radius: 11px; color: var(--text-muted); font-weight: 600; }
html[data-cia] .segmented button[aria-checked="true"] { background: var(--bg); color: var(--text); box-shadow: 0 0 0 1px var(--line); }

/* Temas e atalhos: lista com linhas finas, em vez de cartões em grade */
html[data-cia] .grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); }
html[data-cia] .grid > * { min-width: 0; }
html[data-cia] .card, html[data-cia] .row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; align-items: center; align-content: center;
  min-height: 68px; padding: 14px 40px 14px 0; background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none;
  color: var(--text); text-align: left; position: relative; text-decoration: none; transition: background .15s var(--ease);
}
html[data-cia] a.card:hover, html[data-cia] button.card:hover, html[data-cia] a.row:hover, html[data-cia] button.row:hover { background: var(--surface); transform: none; box-shadow: none; }
html[data-cia] a.card:active, html[data-cia] button.card:active, html[data-cia] a.row:active { transform: none; background: var(--surface-2); }
html[data-cia] .card > *:not(.ico) { grid-column: 2; }
html[data-cia] .card .ico { grid-column: 1; grid-row: 1 / span 4; width: 30px; height: 30px; background: none; color: var(--text-muted); border-radius: 0; display: grid; place-items: center; }
html[data-cia] .card .ico svg, html[data-cia] .row .ico svg { width: 24px; height: 24px; stroke-width: 1.6; }
html[data-cia] .card b { font-size: 1.0625rem; font-weight: 600; line-height: 1.28; color: var(--text); }
html[data-cia] .card small { font-size: .9375rem; line-height: 1.4; color: var(--text-muted); }
html[data-cia] .card::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--faint); border-top: 2px solid var(--faint); transform: translateY(-50%) rotate(45deg); }
html[data-cia] .card-wrap { position: relative; }
html[data-cia] .card-wrap .card { padding-right: 52px; }
html[data-cia] .card-wrap .card::after { display: none; }
html[data-cia] .card-wrap > .fav { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); color: var(--faint); }
html[data-cia] .card-wrap > .fav.is-fav { color: var(--primary); }
html[data-cia] .card.soon { opacity: .55; }
html[data-cia] .card .pill { font-size: .75rem; font-weight: 700; color: var(--primary); letter-spacing: 0; text-transform: none; background: none; padding: 0; }
html[data-cia] .card .tag, html[data-cia] .tag { width: max-content; background: var(--surface-2); color: var(--text-muted); font-family: var(--font-ui); font-size: .75rem; font-weight: 700; letter-spacing: 0; text-transform: none; border-radius: 8px; padding: 2px 8px; margin-top: 4px; }
html[data-cia] .tag.warn { background: var(--warn-bg); color: var(--warn-fg); } html[data-cia] .tag.ok { background: var(--ok-bg); color: var(--ok-fg); }
html[data-cia] .card.destaque, html[data-cia] .card-wrap.destaque .card { background: var(--surface); border: 0; border-radius: 18px; padding: 16px 52px 16px 20px; margin: 12px 0; min-height: 0; }
html[data-cia] .card.destaque::before, html[data-cia] .card-wrap.destaque .card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: var(--todas-degrade); }
html[data-cia] .card.destaque .ico, html[data-cia] .card-wrap.destaque .card .ico { margin-left: 4px; color: var(--primary); }
html[data-cia] .card-wrap.destaque { border-bottom: 0; }
html[data-cia] .card.rede { grid-template-columns: 30px minmax(0, 1fr); }
html[data-cia] .row .ico { background: none; color: var(--text-muted); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 0; }
html[data-cia] .row .txt b { font-size: 1.0625rem; font-weight: 600; } html[data-cia] .row .txt small { font-size: .9375rem; color: var(--text-muted); }
html[data-cia] .list { display: grid; gap: 0; border-top: 1px solid var(--rule); background: none; border-radius: 0; box-shadow: none; }
html[data-cia] .row { grid-template-columns: 30px minmax(0, 1fr) auto; padding-right: 4px; }
html[data-cia] .row + .row { border-top: 0; }
html[data-cia] .row > .i:last-child { color: var(--faint); }

/* Cartão de embarque (Meu voo): a peça só deste app */
html[data-cia] .pass { background: var(--surface); box-shadow: none; border-radius: 20px; overflow: hidden; }
html[data-cia] .pass::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--todas-degrade); }
html[data-cia] .pass .main { padding: 18px 20px 18px 26px; }
html[data-cia] .pass .cities { font-family: var(--font-ui); }
html[data-cia] .pass .cities b { font-size: 1.75rem; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
html[data-cia] .pass .cities .line { background: none; height: 0; border-top: 2px dashed var(--hover-line); }
html[data-cia] .pass .cities .line svg { background: var(--surface); color: var(--text-muted); }
html[data-cia] .pass .stub { border-left-color: var(--hover-line); }
html[data-cia] .pass .stub b { font-family: var(--font-serif); font-weight: 500; font-size: 1.5rem; }
html[data-cia] .pass .cta { color: var(--primary); font-weight: 700; }

/* Avisos */
html[data-cia] .sign { border: 0; border-radius: 16px; padding: 14px 16px; background: var(--surface); color: var(--text); font-size: .9375rem; line-height: 1.5; box-shadow: none; }
html[data-cia] .sign .i { color: var(--text-muted); }
html[data-cia] .sign.warn { background: var(--warn-bg); color: var(--warn-fg); } html[data-cia] .sign.warn .i { color: var(--warn-fg); }
html[data-cia] .sign.ok { background: var(--ok-bg); color: var(--ok-fg); } html[data-cia] .sign.ok .i { color: var(--ok-fg); }
html[data-cia] .sign.wayfind { background: var(--bg); border: 1px solid var(--line); color: var(--text); font-weight: 600; }
html[data-cia] .sign.wayfind .pict { background: none; color: var(--danger-fg); }
html[data-cia] .disclaimer { border-top: 1px solid var(--rule); padding-top: 16px; color: var(--faint); font-size: .8125rem; }
html[data-cia] .rede-pilula { border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 999px; box-shadow: none; }

/* Telas internas e temas */
html[data-cia] .page-head h1 { font-size: 1.75rem; }
html[data-cia] .topic-intro { background: none; border: 0; padding: 4px 0 0; box-shadow: none; display: grid; gap: 6px; }
html[data-cia] .topic-intro > .ico { display: none; }
html[data-cia] .lead { color: var(--text-muted); font-size: 1.0625rem; line-height: 1.55; }
html[data-cia] .topic-tags .tag { background: var(--surface); }
html[data-cia] .indice .chip, html[data-cia] .chips .chip { font-size: .9rem; }

/* Blocos de conteúdo */
html[data-cia] .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; background: var(--surface); border-radius: 20px; overflow: hidden; }
html[data-cia] .fact { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 18px 18px 20px; position: relative; }
html[data-cia] .fact + .fact::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--line); }
html[data-cia] .fact b { font-family: var(--font-serif); font-weight: 500; font-size: 1.75rem; color: var(--text); letter-spacing: -.01em; }
html[data-cia] .fact small { color: var(--text-muted); font-size: .875rem; }
html[data-cia] .steps { gap: 0; border-top: 1px solid var(--rule); }
html[data-cia] .steps li { background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none; padding: 16px 0; }
html[data-cia] .steps li::before { background: none; border: 1.5px solid var(--text); color: var(--text); font-family: var(--font-ui); font-weight: 700; }
html[data-cia] .checks li { border-bottom: 1px solid var(--rule); }
html[data-cia] .can-cant > div, html[data-cia] .can, html[data-cia] .cant { border-radius: 18px; box-shadow: none; }
html[data-cia] .accordion { background: none; border: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--rule); overflow: visible; }
html[data-cia] .accordion details + details { border-top: 1px solid var(--rule); }
html[data-cia] .accordion summary { padding: 16px 0; font-weight: 600; font-size: 1.0625rem; }
html[data-cia] .accordion summary:hover { background: none; color: var(--primary); }
html[data-cia] .acc-body { padding: 0 0 16px; color: var(--text); }
html[data-cia] .airline { background: var(--surface); border: 0; border-radius: 18px; box-shadow: none; }
html[data-cia] .cta-box { background: var(--surface); border: 0; border-radius: 20px; box-shadow: none; }
html[data-cia] .sources a { color: var(--primary); }
html[data-cia] .topo-btn { background: var(--bg); color: var(--text); border: 1px solid var(--line); box-shadow: 0 4px 14px rgb(11 31 58 / .10); }
html[data-cia] .timeline li::before { background: var(--text); }

/* Botões e campos */
html[data-cia] .btn { min-height: 52px; border-radius: 14px; font-weight: 700; font-size: 1rem; background: var(--bg); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
html[data-cia] .btn:hover { background: var(--surface); }
html[data-cia] .btn-primary { background: var(--primary-fill); color: #fff; border: 0; }
html[data-cia] .btn-primary:hover { filter: brightness(1.05); background: var(--primary-fill); }
html[data-cia] .btn-ghost { background: transparent; border-color: transparent; color: var(--primary); }
html[data-cia] .input { min-height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); font-size: 1rem; color: var(--text); box-shadow: none; }
html[data-cia] .input:focus { border-color: var(--focus); outline: 2px solid color-mix(in srgb, var(--focus) 35%, transparent); outline-offset: 0; }
html[data-cia] .setting, html[data-cia] .out-box, html[data-cia] .form fieldset { background: var(--surface); border: 0; border-radius: 18px; box-shadow: none; }
html[data-cia] .progress-bar { background: var(--surface-2); } html[data-cia] .progress-bar span { background: var(--todas-degrade); }
html[data-cia] .toast { background: var(--toast-bg); color: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / .22); }

/* Barra de abas: vidro mantido; rótulos mais discretos, aba ativa em tinta */
html[data-cia] .tabbar a { font-weight: 600; color: var(--text-muted); }
html[data-cia] .tabbar a[aria-current="page"] { color: var(--text); }
html[data-cia] .tabbar a svg { stroke-width: 1.7; }

/* Ajustes da primeira rodada: cabeçalho sem altura mínima do painel antigo e logotipo mais discreto */
html[data-cia] .brand img { height: calc(26px + (var(--appbar-h) - 54px) * .53); }

html[data-cia] .dots span.on { background: var(--text); }
html[data-cia] .pass .muted.mono, html[data-cia] .pass .eyebrow { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
html[data-cia] .pass .muted.mono { font-size: .9375rem; letter-spacing: 0; }

/* ===== Bento: o tabuleiro de blocos (a marca visual do app) =====
   Três tamanhos fixos, 2 colunas, 10px entre blocos, encaixados sem buracos (js/ui/components.js › tabuleiro: ciclo de 6 = largo, alto, 4 pequenos).
   Bloco cheio, sem borda e sem sombra; cada um com o seu tom; texto no canto de baixo; número real do conteúdo quando o tema tem. */
/* Quatro tons em cada paleta. A "todas" já os define (tokens.css); as companhias ganham tons da própria cor. */
html[data-theme][data-cia="gol"] { --tom-1-bg: #FFEBDD; --tom-1-fg: #B84300; --tom-2-bg: #FFF1D6; --tom-2-fg: #8A5A00; --tom-3-bg: #FDE3D4; --tom-3-fg: #A93A00; --tom-4-bg: #F5ECE3; --tom-4-fg: #7A4A1F; }
html[data-theme="dark"][data-cia="gol"] { --tom-1-bg: rgb(255 138 61 / .16); --tom-1-fg: #FFA766; --tom-2-bg: rgb(245 165 36 / .16); --tom-2-fg: #FFC864; --tom-3-bg: rgb(255 112 67 / .16); --tom-3-fg: #FF9A78; --tom-4-bg: rgb(255 214 170 / .10); --tom-4-fg: #F2C9A0; }
html[data-theme][data-cia="latam"] { --tom-1-bg: #ECE9FA; --tom-1-fg: #1B0088; --tom-2-bg: #FDE6EC; --tom-2-fg: #B0124A; --tom-3-bg: #E6EAFB; --tom-3-fg: #2B2BA8; --tom-4-bg: #FFE9E3; --tom-4-fg: #C23B2B; }
html[data-theme="dark"][data-cia="latam"] { --tom-1-bg: rgb(140 123 255 / .2); --tom-1-fg: #C3B8FF; --tom-2-bg: rgb(255 92 122 / .16); --tom-2-fg: #FF9DB1; --tom-3-bg: rgb(110 130 255 / .18); --tom-3-fg: #A9B8FF; --tom-4-bg: rgb(255 120 90 / .16); --tom-4-fg: #FFA38E; }
html[data-theme][data-cia="azul"] { --tom-1-bg: #DFEBFA; --tom-1-fg: #0B4EA2; --tom-2-bg: #DDF3FB; --tom-2-fg: #00749A; --tom-3-bg: #E8EEF9; --tom-3-fg: #1E4C8F; --tom-4-bg: #E2F6F4; --tom-4-fg: #0A6E6A; }
html[data-theme="dark"][data-cia="azul"] { --tom-1-bg: rgb(91 180 255 / .16); --tom-1-fg: #8CC8FF; --tom-2-bg: rgb(0 163 224 / .16); --tom-2-fg: #6FD0F2; --tom-3-bg: rgb(120 160 230 / .16); --tom-3-fg: #A9C6F5; --tom-4-bg: rgb(60 200 190 / .14); --tom-4-fg: #7FE0D8; }

html[data-cia] .bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 152px; grid-auto-flow: dense; gap: 10px; border-top: 0; }
html[data-cia] .bento > * { min-width: 0; min-height: 0; }
html[data-cia] .bento > .b-wide { grid-column: span 2; }
html[data-cia] .bento > .b-tall { grid-row: span 2; }
html[data-cia] .bento > .card-wrap { display: grid; border-bottom: 0; }
html[data-cia] .bento > .tom-1 { --t-bg: var(--tom-1-bg); --t-fg: var(--tom-1-fg); }
html[data-cia] .bento > .tom-2 { --t-bg: var(--tom-2-bg); --t-fg: var(--tom-2-fg); }
html[data-cia] .bento > .tom-3 { --t-bg: var(--tom-3-bg); --t-fg: var(--tom-3-fg); }
html[data-cia] .bento > .tom-4 { --t-bg: var(--tom-4-bg); --t-fg: var(--tom-4-fg); }

html[data-cia] .bento > .card, html[data-cia] .bento > .card-wrap > .card {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; height: 100%; min-height: 0;
  padding: 16px; border: 0; border-bottom: 0; border-radius: 24px; background: var(--t-bg); box-shadow: none; overflow: hidden; position: relative;
  text-align: left; color: var(--text); transition: transform .18s var(--ease), filter .18s;
}
html[data-cia] .bento a.card:hover, html[data-cia] .bento a.card:focus-visible { background: var(--t-bg); filter: brightness(.985); }
html[data-cia] .bento a.card:active { transform: scale(.98); background: var(--t-bg); }
html[data-cia] .bento .card::after { display: none; }
html[data-cia] .bento .card > *:not(.ico) { grid-column: auto; }
html[data-cia] .bento .card .ico { position: absolute; left: 14px; top: 14px; width: 36px; height: 36px; display: grid; place-items: center; background: none; color: var(--t-fg); }
html[data-cia] .bento .card .ico svg { width: 30px; height: 30px; stroke-width: 1.5; }
html[data-cia] .bento .card b { font-family: var(--font-serif); font-weight: 500; font-size: 1.1875rem; line-height: 1.15; letter-spacing: -.005em; color: var(--text); }
html[data-cia] .bento .card small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8125rem; line-height: 1.35; color: var(--text-muted); }
html[data-cia] .bento .card .tag { position: absolute; right: 12px; bottom: 12px; margin: 0; background: var(--bg); }
html[data-cia] .bento .card-wrap > .fav { right: 6px; top: 6px; bottom: auto; transform: none; width: 40px; height: 40px; color: var(--t-fg); opacity: .75; z-index: 2; }
html[data-cia] .bento .card-wrap > .fav.is-fav { opacity: 1; }

/* Número real do conteúdo */
html[data-cia] .bento .card .numero { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
html[data-cia] .bento .card .numero i { font-style: normal; font-family: var(--font-serif); font-weight: 500; font-size: 2.125rem; line-height: 1; letter-spacing: -.02em; color: var(--t-fg); font-variant-numeric: lining-nums; white-space: nowrap; }
html[data-cia] .bento .card .numero em { font-style: normal; font-size: .8125rem; line-height: 1.3; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html[data-cia] .bento .card.tem-numero small { display: none; }
html[data-cia] .bento .b-small .numero em { display: none; }
html[data-cia] .bento .b-small .numero i { font-size: 1.875rem; }
html[data-cia] .bento .b-wide .numero { position: absolute; right: 18px; top: 14px; align-items: flex-end; text-align: right; max-width: 52%; margin: 0; }
html[data-cia] .bento .b-wide .numero i { font-size: 2.5rem; }
html[data-cia] .bento .b-wide .numero em { -webkit-line-clamp: 2; }
html[data-cia] .bento .b-tall .numero i { font-size: 2.75rem; }
html[data-cia] .bento .b-tall .numero { margin-bottom: 10px; }
html[data-cia] .bento .b-tall .ico svg, html[data-cia] .bento .b-wide:not(.tem-numero) .ico svg { width: 34px; height: 34px; }
html[data-cia] .bento .b-tall b { font-size: 1.375rem; }
html[data-cia] .bento .b-wide b { font-size: 1.3125rem; }
html[data-cia] .bento .b-tall small, html[data-cia] .bento .b-wide small { -webkit-line-clamp: 3; font-size: .875rem; }

/* Bloco de destaque ("Comece por aqui"): o único em tinta, com o degradê da marca na base */
html[data-cia] .bento .card.destaque { background: var(--text); color: var(--bg); }
html[data-cia] .bento .card.destaque b { color: var(--bg); font-size: 1.5rem; }
html[data-cia] .bento .card.destaque small { color: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-line-clamp: 3; }
html[data-cia] .bento .card.destaque .ico { color: var(--bg); }
html[data-cia] .bento .card.destaque .pill { color: color-mix(in srgb, var(--bg) 78%, transparent); font-size: .8125rem; font-weight: 700; }
html[data-cia] .bento .card.destaque::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 5px; width: auto; border-radius: 0; background: var(--todas-degrade); }
html[data-cia] .bento .card-wrap.destaque > .fav { color: var(--bg); }
html[data-theme="dark"][data-cia] .bento .card.destaque { background: var(--surface-2); color: var(--text); }
html[data-theme="dark"][data-cia] .bento .card.destaque b, html[data-theme="dark"][data-cia] .bento .card.destaque .ico { color: var(--text); }
html[data-theme="dark"][data-cia] .bento .card.destaque small, html[data-theme="dark"][data-cia] .bento .card.destaque .pill { color: var(--text-muted); }
html[data-theme="dark"][data-cia] .bento .card-wrap.destaque > .fav { color: var(--text); }
html[data-cia] .card.soon { opacity: .6; }
html[data-cia] .cap { margin: 4px 0 -2px; color: var(--text-muted); font-size: .9375rem; font-weight: 600; }

/* Acertos do bento: números longos, título do bloco alto, selo e estrela */
html[data-cia] .bento .b-small .numero.n-m i { font-size: 1.5rem; } html[data-cia] .bento .b-small .numero.n-g i { font-size: 1.25rem; }
html[data-cia] .bento .b-tall .numero.n-m i { font-size: 1.875rem; } html[data-cia] .bento .b-tall .numero.n-g i { font-size: 1.5rem; }
html[data-cia] .bento .b-wide .numero.n-m i { font-size: 2.25rem; } html[data-cia] .bento .b-wide .numero.n-g i { font-size: 1.75rem; }
html[data-cia] .bento .b-tall b { font-size: 1.1875rem; overflow-wrap: anywhere; hyphens: auto; }
html[data-cia] .bento .b-wide .numero { top: 46px; }
html[data-cia] .bento .card .tag { position: static; order: -1; margin: 0 0 6px; background: var(--bg); color: var(--text-muted); }
html[data-cia] .bento .card .tag.warn { background: var(--warn-bg); color: var(--warn-fg); }
html[data-cia] .bento .card .tag { position: absolute; order: 0; left: 54px; top: 19px; right: auto; bottom: auto; margin: 0; }
html[data-cia] .bento .card.destaque .tag { left: auto; right: 52px; }

/* O painel em degradê com a arte (nuvens, estrelas, monumentos do exterior) VOLTOU: é o destaque do app. Muda com Nacional/Internacional e com a companhia.
   Aqui só ajusto a letra do título para a serifa do resto do app. */
html[data-cia] .board h1, html[data-cia] .onb-slide h1 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.012em; color: inherit; }
html[data-cia] .board .eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--board-accent); font-weight: 600; }