:root {
  --forest: #4A5A52;
  --forest-2: #3c4a43;
  --sage: #8FA493;
  --gold: #C9A878;
  --gold-2: #b08d58;

  --bg: #F6F4EF;
  --surface: #FFFFFF;
  --surface-2: #FAF8F4;
  --line: #E6E1D7;
  --ink: #1F2723;
  --ink-2: #5B655F;
  --ink-3: #8A928D;

  --livelo: #C8187A;
  --esfera: #E52421;
  --meliuz: #F2762E;
  --up: #1F8A5B;
  --up-bg: #E5F4EC;
  --hot-bg: #FFF3E6;
  --hot: #B4570F;

  --r: 14px;
  --shadow: 0 1px 2px rgba(31, 39, 35, .05), 0 4px 16px rgba(31, 39, 35, .05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141a17;
    --surface: #1c2420;
    --surface-2: #212b26;
    --line: #2f3a34;
    --ink: #EEF1EE;
    --ink-2: #B3BDB7;
    --ink-3: #85908A;
    --up: #5BCB94;
    --up-bg: #1d3329;
    --hot-bg: #3a2a18;
    --hot: #F2B26B;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #141a17; --surface: #1c2420; --surface-2: #212b26; --line: #2f3a34;
  --ink: #EEF1EE; --ink-2: #B3BDB7; --ink-3: #85908A; --up: #5BCB94; --up-bg: #1d3329;
  --hot-bg: #3a2a18; --hot: #F2B26B; --shadow: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, .brand__name { font-family: Jost, Futura, "Avenir Next", Inter, sans-serif; letter-spacing: -.01em; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }

/* header */
.top { background: var(--forest); color: #fff; }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.1); color: var(--gold); display: grid; place-items: center; }
.brand__mark svg { width: 22px; height: 22px; }
.brand__name { font-weight: 700; font-size: 18px; line-height: 1.1; }
.brand__sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #cfd8d2; }
.updated { font-size: 13px; color: #dfe6e1; text-align: right; }
.updated b { color: var(--gold); font-weight: 600; }

/* hero */
.hero { padding: 32px 0 18px; max-width: 760px; }
.hero h1 { font-size: clamp(28px, 4.4vw, 42px); line-height: 1.1; margin: 0 0 10px; }
.hero h1 em { font-style: normal; color: var(--gold-2); }
.hero p { margin: 0; color: var(--ink-2); font-size: 16px; }

/* settings */
.settings { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; padding: 16px 18px; margin: 10px 0 18px; }
.settings__item label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.money { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 0 10px; height: 40px; }
.money span { color: var(--ink-3); font-size: 14px; margin-right: 4px; }
.money input { border: 0; background: transparent; width: 92px; height: 38px; outline: none; font-weight: 600; font-size: 16px; }
.money:focus-within { border-color: var(--sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 25%, transparent); }
.settings__hint { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--ink-3); }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; height: 40px; font-weight: 500; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__ui { width: 40px; height: 24px; border-radius: 99px; background: var(--line); position: relative; transition: background .2s; }
.switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.switch input:checked + .switch__ui { background: var(--livelo); }
.switch input:checked + .switch__ui::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__ui { outline: 2px solid var(--sage); outline-offset: 2px; }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot--livelo { background: var(--livelo); }
.dot--esfera { background: var(--esfera); }
.dot--meliuz { background: var(--meliuz); }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.kpi { padding: 14px 16px; }
.kpi__label { font-size: 12px; color: var(--ink-2); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kpi__value { font-family: Jost, Inter, sans-serif; font-size: 30px; font-weight: 700; line-height: 1.15; margin-top: 4px; }
.kpi__sub { font-size: 12.5px; color: var(--ink-3); }

/* blocks */
.block { margin-bottom: 34px; }
.block__head { margin-bottom: 12px; }
.block__head h2 { font-size: 24px; margin: 0; }
.block__head p { margin: 2px 0 0; color: var(--ink-2); }

/* hot cards */
.hot { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.hc { display: flex; flex-direction: column; gap: 10px; padding: 14px; text-decoration: none; transition: transform .15s, border-color .15s; }
.hc:hover { transform: translateY(-2px); border-color: var(--sage); }
.hc__top { display: flex; align-items: center; gap: 10px; }
.hc__name { font-weight: 600; line-height: 1.2; }
.hc__prog { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
.hc__big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hc__big b { font-family: Jost, Inter, sans-serif; font-size: 28px; line-height: 1; }
.hc__big span { color: var(--ink-2); font-size: 13px; }
.hc__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); margin-top: auto; }

.logo { width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--line); object-fit: contain; padding: 3px; flex: none; }
.logo--txt { display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--forest); background: color-mix(in srgb, var(--sage) 22%, #fff); padding: 0; }

.badge { display: inline-flex; align-items: center; gap: 3px; border-radius: 99px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.badge--up { background: var(--up-bg); color: var(--up); }
.badge--hot { background: var(--hot-bg); color: var(--hot); }
.badge--club { background: color-mix(in srgb, var(--livelo) 12%, transparent); color: var(--livelo); }
.badge--new { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold-2); }

/* filters */
.filters { padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; z-index: 5; }
.search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; height: 46px; background: var(--surface-2); }
.search:focus-within { border-color: var(--sage); }
.search svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; min-width: 0; }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.seg button.on { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.1); font-weight: 600; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.check input { accent-color: var(--forest); width: 16px; height: 16px; }
select { border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; height: 36px; padding: 0 10px; margin-left: auto; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 5px 12px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.chip.on { background: var(--forest); border-color: var(--forest); color: #fff; }
.chip small { opacity: .65; margin-left: 3px; }
.intent { font-size: 13.5px; color: var(--ink-2); background: color-mix(in srgb, var(--gold) 14%, transparent); border-radius: 10px; padding: 8px 12px; }

/* table */
.table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.thead, .tr { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(140px, 1fr)); align-items: center; gap: 10px; padding: 10px 16px; }
.thead { background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.thead > div { display: flex; align-items: center; gap: 6px; }
.tr { border-bottom: 1px solid var(--line); cursor: pointer; }
.tr:hover { background: var(--surface-2); }
.tr.open { background: var(--surface-2); }
.store { display: flex; align-items: center; gap: 10px; min-width: 0; }
.store__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.store__cat { font-size: 12px; color: var(--ink-3); }
.cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell__main { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cell__sub { font-size: 12px; color: var(--ink-3); }
.cell--empty { color: var(--ink-3); font-size: 13px; }
.cell--best .cell__main { color: var(--up); }
.cell__lbl { display: none; }
.best { display: flex; flex-direction: column; gap: 2px; }
.best__prog { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.best__val { font-size: 12.5px; color: var(--ink-2); }
.bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 4px; }
.bar i { display: block; height: 100%; background: var(--up); border-radius: 4px; }

.detail { padding: 6px 16px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dbox { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 13.5px; }
.dbox h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.dbox p { margin: 4px 0; color: var(--ink-2); }
.dbox .terms { font-size: 12px; color: var(--ink-3); max-height: 90px; overflow: auto; }
.dbox a.go { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--forest); text-decoration: none; }
:root[data-theme="dark"] .dbox a.go { color: var(--sage); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dbox a.go { color: var(--sage); } }
.dbox ul { margin: 6px 0 0; padding-left: 16px; color: var(--ink-2); font-size: 12.5px; }
.spark { grid-column: 1 / -1; }
.spark svg { width: 100%; height: 90px; display: block; }
.spark .legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.empty { padding: 40px 16px; text-align: center; color: var(--ink-3); }
.more { display: block; margin: 14px auto 0; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 10px 22px; font-weight: 600; cursor: pointer; }

.notes { margin: 10px 0 30px; color: var(--ink-2); font-size: 14px; }
.notes h3 { color: var(--ink); margin: 0 0 6px; }
.notes ul { margin: 0; padding-left: 18px; }
.notes li { margin-bottom: 4px; }
.foot { font-size: 12.5px; color: var(--ink-3); padding-bottom: 30px; }

/* responsivo */
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .detail { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .thead { display: none; }
  .hot { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .hot::-webkit-scrollbar { display: none; }
  .hc { scroll-snap-align: start; }
  .tr { grid-template-columns: repeat(3, 1fr); gap: 10px 8px; padding: 14px; }
  .tr > .store { grid-column: 1 / -1; }
  .tr > .bestcol { grid-column: 1 / -1; order: 2; background: var(--up-bg); border-radius: 10px; padding: 8px 10px; }
  .cell__lbl { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; }
  select { margin-left: 0; }
  .filters { position: static; }
  .settings { gap: 12px 14px; }
  .money input { width: 80px; }
  .updated { font-size: 12px; }
}

/* v2: números nativos */
.block__head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.copy { border: 1px solid var(--forest); background: var(--forest); color: #fff; border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 14px; cursor: pointer; }
.copy.done { background: var(--up); border-color: var(--up); }
.hot-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.hot-note { font-size: 13px; color: var(--ink-2); background: color-mix(in srgb, var(--gold) 14%, transparent); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.hot { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.hl { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; }
.hl:hover { border-color: var(--sage); }
.hl__body { flex: 1; min-width: 0; }
.hl__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl__val { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.hl__val b { font-family: Jost, Inter, sans-serif; font-size: 20px; }
.hl__val span { font-size: 12.5px; color: var(--ink-3); }
.hl__side { text-align: right; font-size: 12px; color: var(--ink-3); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.num { font-family: Jost, Inter, sans-serif; font-size: 19px; font-weight: 700; }
.num small { font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-left: 2px; }
.cell--top .num { color: var(--up); }
.cell--top .num small { color: var(--up); }
.tag-top { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--up); }
@media (max-width: 760px) {
  .hot { grid-auto-columns: none; grid-auto-flow: row; grid-template-columns: 1fr; overflow: visible; }
  .num { font-size: 17px; }
}

/* v3: card de loja com os 3 programas */
.hot { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.sc { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.sc__head { display: flex; align-items: center; gap: 10px; }
.sc__title { flex: 1; min-width: 0; }
.sc__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc__cat { font-size: 12px; color: var(--ink-3); }
.sc__end { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.sc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mc { border: 1px solid var(--line); border-radius: 10px; padding: 8px 9px; background: var(--surface-2); min-width: 0; }
.mc--promo { background: var(--up-bg); border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.mc--off { opacity: .55; }
.mc__lbl { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.mc__val { font-family: Jost, Inter, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.15; margin-top: 4px; white-space: nowrap; }
.mc__val small { font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.mc--promo .mc__val { color: var(--up); }
.mc__sub { font-size: 11.5px; color: var(--ink-3); min-height: 1em; }
.mc__sub b { color: var(--up); }
.more--hot { grid-column: 1 / -1; margin-top: 4px; }
@media (max-width: 760px) {
  .hot { grid-template-columns: 1fr; }
  .mc__val { font-size: 19px; }
}

/* v4: card vitrine */
.hot { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pc { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pc__top { display: flex; justify-content: space-between; align-items: center; min-height: 22px; }
.pc__badge { background: var(--up); color: #fff; font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 2px 8px; }
.pc__end { font-size: 11.5px; color: var(--ink-3); }
.pc__logo { height: 64px; display: grid; place-items: center; background: #fff; border-radius: 10px; overflow: hidden; }
.pc__logo img { max-height: 56px; max-width: 75%; object-fit: contain; }
.pc__logo--txt { font-family: Jost, Inter, sans-serif; font-weight: 700; font-size: 18px; color: var(--forest); text-align: center; padding: 0 8px; }
.pc__name { font-weight: 600; font-size: 14px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc__rows { display: flex; flex-direction: column; gap: 6px; }
.pr { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; text-decoration: none; min-height: 46px; }
a.pr:hover { border-color: var(--sage); }
.pr__txt { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; line-height: 1.3; }
.pr__txt b { font-size: 15px; }
.pr__txt small { font-size: 11.5px; color: var(--ink-3); }
.pr__icon { width: 22px; height: 22px; border-radius: 5px; flex: none; object-fit: contain; }
.pr--promo { background: var(--up-bg); border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.pr--promo .pr__txt b { color: var(--up); }
.pr--off .pr__txt { color: var(--ink-3); font-size: 12.5px; }
.pr--off .pr__icon { opacity: .35; filter: grayscale(1); }
@media (max-width: 760px) {
  .hot { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; overflow: visible; }
  .pc { padding: 10px; }
  .pr__txt { font-size: 12.5px; }
  .pr__txt b { font-size: 14px; }
}
@media (max-width: 420px) { .hot { grid-template-columns: 1fr; } }

/* v5: comparar, não eleger — sem destaques coloridos */
.pc__badge { background: var(--forest); }
.badge--up, .badge--hot { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }

/* v6: filtro por programa esmaece os outros */
.pr--dim { opacity: .42; filter: grayscale(1); background: transparent; }
.pr--dim:hover { opacity: .7; }
.hot-tabs select { margin-left: 0; height: 40px; }
.chips--hot { margin-bottom: 14px; flex-wrap: wrap; overflow: visible; }
@media (max-width: 760px) { .chips--hot { flex-wrap: nowrap; overflow-x: auto; } }

/* v7: tela única — barra de filtros + abas + grade de cards */
.hero { padding: 26px 0 14px; }
.toolbar { padding: 12px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; z-index: 10; margin-bottom: 14px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.tabs button { border: 0; background: transparent; border-radius: 9px; padding: 10px 12px; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--ink-2); }
.tabs button.on { background: var(--forest); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.tabs small, .seg small { font-weight: 500; opacity: .7; margin-left: 4px; font-size: 12px; }
.toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.toolbar__row select { margin-left: auto; height: 38px; }
.toolbar__row .copy { height: 38px; }
.toolbar .chips { flex-wrap: wrap; overflow: visible; }
.note { font-size: 13.5px; color: var(--ink-2); background: color-mix(in srgb, var(--gold) 14%, transparent); border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.grid .empty { grid-column: 1 / -1; }
.link { border: 0; background: none; color: var(--forest); font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0 0 0 4px; }
.more { margin-top: 16px; }
@media (max-width: 760px) {
  .toolbar { position: static; }
  .toolbar .chips { flex-wrap: nowrap; overflow-x: auto; }
  .toolbar__row select { margin-left: 0; flex: 1; }
  .toolbar__row .copy { width: 100%; }
  .tabs button { font-size: 14px; padding: 9px 6px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 420px) { .grid { grid-template-columns: 1fr; } }


/* =====================================================================
   v8 · visual: fundo branco, logo VCC, Montserrat + DM Serif Display
   ===================================================================== */
:root, :root[data-theme="light"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F7F6F3;
  --line: #E9E6E0;
  --ink: #1E2522;
  --ink-2: #55605B;
  --ink-3: #8C948F;
  --forest: #3F524B;
  --gold: #C29E6E;
  --gold-2: #A7824F;
  --gold-soft: #F6EFE4;
  --shadow: 0 1px 2px rgba(30, 37, 34, .04), 0 8px 24px rgba(30, 37, 34, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F7F6F3; --line: #E9E6E0;
    --ink: #1E2522; --ink-2: #55605B; --ink-3: #8C948F; --up: #1F8A5B; --up-bg: #E5F4EC;
    --shadow: 0 1px 2px rgba(30, 37, 34, .04), 0 8px 24px rgba(30, 37, 34, .06);
  }
}
body { font-family: Montserrat, -apple-system, "Segoe UI", system-ui, sans-serif; font-size: 14.5px; letter-spacing: -.005em; }
h1, h2, h3 { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; letter-spacing: 0; }
.pr__txt b, .tabs button, .chip, .seg button, .copy, select, .pc__name { font-family: Montserrat, sans-serif; }

/* header */
.top { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); }
.top__row { min-height: 84px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand__logo { height: 64px; width: auto; display: block; }
.brand__div { width: 1px; height: 38px; background: var(--line); }
.brand__prod { font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.35; color: var(--forest); }
.updated { color: var(--ink-3); font-size: 12.5px; }
.updated b { color: var(--ink); font-weight: 600; }

/* hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 44px 0 36px; max-width: none; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.live { width: 7px; height: 7px; border-radius: 50%; background: #2FA36B; box-shadow: 0 0 0 4px rgba(47, 163, 107, .15); }
.hero h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.04; margin: 14px 0 16px; color: var(--ink); }
.hero h1 em { font-style: italic; color: var(--gold-2); }
.hero p { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 520px; margin: 0; }
.hero__stats { display: flex; gap: 28px; margin-top: 26px; flex-wrap: wrap; }
.hero__stats div { display: flex; flex-direction: column; }
.hero__stats b { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1; color: var(--forest); }
.hero__stats span { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.hero__media { position: relative; padding: 0 0 36px 36px; }
.hero__photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; display: block; box-shadow: var(--shadow); }
.hero__card { position: absolute; left: 0; bottom: 0; width: 270px; background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 12px 40px rgba(30, 37, 34, .18); display: flex; flex-direction: column; gap: 8px; }
.hero__card-head { display: flex; align-items: center; gap: 10px; }
.hero__card-head .pc__logo { width: 52px; height: 40px; flex: none; border: 1px solid var(--line); }
.hero__card-head .pc__logo img { max-height: 32px; max-width: 85%; }
.hero__card-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.hero__card-name { font-weight: 700; font-size: 14px; }
.hero__card .pr { min-height: 40px; padding: 6px 9px; pointer-events: none; }

/* barra, abas e chips sem o "verdinho" */
.toolbar { border-radius: 18px; }
.tabs { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; gap: 0; }
.tabs button { border-radius: 0; padding: 12px 8px 13px; font-size: 15px; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { background: transparent; color: var(--ink); box-shadow: none; border-bottom-color: var(--gold); }
.chip { border-color: var(--line); color: var(--ink-2); font-weight: 500; }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.copy { background: var(--ink); border-color: var(--ink); border-radius: 10px; }
.search { background: var(--surface-2); border-color: transparent; border-radius: 12px; }
.search:focus-within { border-color: var(--gold); background: #fff; }
.seg { background: var(--surface-2); border-color: transparent; }
select { background: var(--surface-2); border-color: transparent; }

/* cards */
.pc { border-radius: 16px; border-color: var(--line); box-shadow: none; transition: box-shadow .2s, transform .2s; }
.pc:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.pc__badge { background: var(--gold-soft); color: var(--gold-2); font-weight: 700; letter-spacing: .02em; }
.pc__logo { border-radius: 12px; }
.pr { border-radius: 11px; border-color: var(--line); }
a.pr:hover { border-color: var(--gold); }
.note { background: var(--gold-soft); color: #6F5634; }
.notes h3 { font-size: 24px; }
.foot { border-top: 1px solid var(--line); padding-top: 18px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 24px; padding: 26px 0 22px; }
  .hero__media { padding: 0 0 70px 0; }
  .hero__card { left: 12px; right: 12px; width: auto; bottom: 0; }
}
@media (max-width: 760px) {
  .top__row { min-height: 68px; }
  .brand__logo { height: 44px; }
  .brand__prod { font-size: 10.5px; }
  .hero__stats { gap: 18px; }
  .hero__stats b { font-size: 28px; }
  .hero__media { padding-bottom: 150px; }
}

.toolbar { position: static; }
@media (max-width: 760px) {
  .hero { padding: 18px 0 16px; gap: 18px; }
  .hero h1 { font-size: 34px; margin: 10px 0 10px; }
  .hero p { font-size: 14.5px; }
  .hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
  .hero__stats b { font-size: 26px; }
  .hero__stats span { font-size: 11px; }
  .hero__photo { aspect-ratio: 16 / 9; border-radius: 16px; }
  .hero__media { padding-bottom: 170px; }
  .updated { font-size: 11px; line-height: 1.3; }
}
@media (max-width: 760px) {
  #prog { display: grid; grid-template-columns: repeat(4, auto); width: 100%; }
  #prog button { padding: 7px 4px; font-size: 13px; justify-content: center; gap: 4px; }
  #prog small { display: none; }
  .toolbar { min-width: 0; overflow: hidden; }
}


/* =====================================================================
   v9 · banner escuro com foto integrada (curva)
   ===================================================================== */
.banner {
  --banner-bg: #18211D;
  position: relative; overflow: hidden; border-radius: 22px; margin: 26px 0 22px;
  background: var(--banner-bg); color: #fff; min-height: 400px;
  display: grid; grid-template-columns: 1fr;
}
.banner__photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 58%;
  background: url("img/hero.jpg") 62% 40% / cover no-repeat;
}
.banner__wave-h { display: none; position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 44px; color: var(--banner-bg); }
.banner__wave { position: absolute; top: 0; bottom: 0; left: calc(42% - 1px); width: 13%; height: 100%; color: var(--banner-bg); }
.banner__text { position: relative; z-index: 1; padding: 40px 0 40px 48px; max-width: 52%; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.banner__brand { display: flex; align-items: center; gap: 14px; }
.banner__logo { height: 54px; width: auto; }
.banner__tag {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px 0 12px; border-radius: 6px;
  background: var(--gold); color: #18211D; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  position: relative;
}
.banner__tag::after { content: ""; position: absolute; right: -9px; top: 0; border-left: 9px solid var(--gold); border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.banner h1 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.05; margin: 4px 0 0; color: #fff; }
.banner h1 em { font-style: italic; color: var(--gold); }
.banner p { margin: 0; font-size: 16.5px; line-height: 1.5; color: #D9DFDB; max-width: 440px; }
.banner__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.btn-gold {
  display: inline-flex; align-items: center; height: 50px; padding: 0 28px; border-radius: 99px;
  background: var(--gold); color: #18211D; font-weight: 700; font-size: 15px; text-decoration: none;
  transition: transform .15s, background .15s;
}
.btn-gold:hover { background: #D3B184; transform: translateY(-1px); }
.banner__stats { display: flex; gap: 18px; font-size: 13px; color: #B9C2BD; }
.banner__stats b { color: #fff; font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-size: 22px; margin-right: 4px; }

@media (max-width: 900px) {
  .banner { min-height: 0; }
  .banner__photo { position: relative; width: 100%; height: 230px; background-position: 60% 35%; }
  .banner__wave { display: none; }
  .banner__wave-h { display: block; }
  .banner__text { max-width: none; padding: 6px 22px 26px; }
}
@media (max-width: 760px) {
  .banner { margin: 14px 0 16px; border-radius: 18px; }
  .banner__photo { height: 200px; }
  .banner__logo { height: 42px; }
  .banner h1 { font-size: 31px; }
  .banner p { font-size: 14.5px; }
  .btn-gold { height: 46px; width: 100%; justify-content: center; }
}

/* v10: foto do Rony apontando pro celular */
.banner__photo { background-image: url("img/hero-rony.jpg"); background-position: right 30%; }
@media (max-width: 900px) { .banner__photo { background-position: 72% 22%; height: 240px; } }
@media (max-width: 760px) { .banner__photo { height: 220px; } }

/* v11: banner no verde do logo + texto sem invadir a foto */
.banner { --banner-bg: #3F514E; --gold: #C1A074; background: var(--banner-bg); }
.banner__tag { background: #C1A074; color: #2B3836; }
.banner__tag::after { border-left-color: #C1A074; }
.banner h1 em { color: #D4B587; }
.banner p { color: #E3EAE6; }
.btn-gold { background: #C1A074; color: #253230; }
.btn-gold:hover { background: #D0B184; }
.banner__stats { color: #C9D4CF; }
@media (min-width: 901px) {
  .banner__photo { width: 54%; }
  .banner__wave { left: calc(46% - 1px); width: 11%; }
  .banner__text { max-width: 44%; padding-right: 8px; }
  .banner h1 { font-size: clamp(30px, 3.3vw, 44px); }
}

/* v12: foto recortada sobre fundo branco */
.banner__photo { background-color: #fff; background-position: right 30%; }
.banner { border: 1px solid var(--line); }


/* =====================================================================
   v13 · banner com recorte + balão do logo (A = verde, B = off-white)
   ===================================================================== */
.hb { position: relative; overflow: hidden; border-radius: 24px; margin: 24px 0 22px;
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: stretch; min-height: 380px; }
.hb__text { padding: 44px 0 44px 52px; display: flex; flex-direction: column; justify-content: center; gap: 16px; position: relative; z-index: 1; }
.hb__tag { align-self: flex-start; position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 14px 0 12px;
  border-radius: 6px; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.hb__tag::after { content: ""; position: absolute; right: -9px; top: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 9px solid; }
.hb h1 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; margin: 2px 0 0; max-width: 560px; }
.hb h1 em { font-style: italic; }
.hb p { margin: 0; font-size: 16px; line-height: 1.55; max-width: 440px; }
.hb__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.hb__btn { display: inline-flex; align-items: center; height: 50px; padding: 0 28px; border-radius: 99px; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .15s, filter .15s; }
.hb__btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.hb__stats { display: flex; gap: 18px; font-size: 13px; }
.hb__stats b { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-size: 22px; margin-right: 4px; }
.hb__art { position: relative; min-height: 300px; }
.hb__bubble { position: absolute; width: min(380px, 92%); right: 6%; top: 50%; transform: translateY(-46%); }
.hb__person { position: absolute; bottom: 0; right: 9%; height: 94%; width: auto; max-width: none; filter: drop-shadow(0 18px 30px rgba(20, 30, 28, .18)); }

/* A · verde do logo */
.hb--a { background: #3F514E; color: #fff; }
.hb--a .hb__tag { background: #C1A074; color: #2B3836; }
.hb--a .hb__tag::after { border-left-color: #C1A074; }
.hb--a h1 em { color: #D4B587; }
.hb--a p { color: #E3EAE6; }
.hb--a .hb__btn { background: #C1A074; color: #253230; }
.hb--a .hb__stats { color: #C9D4CF; }
.hb--a .hb__stats b { color: #fff; }
.hb--a .hb__bubble { fill: #8AA889; opacity: .55; }

/* B · off-white */
.hb--b { background: #F4EFE6; color: #2E3D3A; }
.hb--b .hb__tag { background: #3F514E; color: #fff; }
.hb--b .hb__tag::after { border-left-color: #3F514E; }
.hb--b h1 { color: #2E3D3A; }
.hb--b h1 em { color: #A7824F; }
.hb--b p { color: #55605B; }
.hb--b .hb__btn { background: #3F514E; color: #fff; }
.hb--b .hb__stats { color: #6B746F; }
.hb--b .hb__stats b { color: #3F514E; }
.hb--b .hb__bubble { fill: #8AA889; }

@media (max-width: 900px) {
  .hb { grid-template-columns: 1fr; min-height: 0; }
  .hb__art { order: -1; height: 270px; min-height: 0; }
  .hb__bubble { width: 250px; right: 50%; transform: translate(50%, -50%); }
  .hb__person { right: 50%; transform: translateX(50%); height: 100%; }
  .hb__text { padding: 22px 22px 26px; }
}
@media (max-width: 760px) {
  .hb { margin: 14px 0 16px; border-radius: 18px; }
  .hb h1 { font-size: 31px; }
  .hb p { font-size: 14.5px; }
  .hb__btn { width: 100%; justify-content: center; height: 46px; }
}

.hb--a .hb__bubble { opacity: .85; fill: #6E8A72; }
.hb__bubble { width: min(400px, 96%); }
.hb__person { height: 96%; }

/* v14: balão maior, cabeça com folga dentro dele */
.hb__bubble { width: min(500px, 118%); right: -2%; top: 50%; transform: translateY(-42%); }
.hb__person { height: 90%; right: 11%; }
@media (max-width: 900px) {
  .hb__art { height: 290px; }
  .hb__bubble { width: 330px; right: 50%; transform: translate(50%, -44%); }
  .hb__person { height: 92%; right: 50%; transform: translateX(50%); }
}

@media (max-width: 900px) { .hb__art { overflow: hidden; } .hb__bubble { transform: translate(50%, -40%); } }

/* v15: "Radar de Pontos" grande no cabeçalho */
.brand__prod { font-size: 30px; font-weight: 800; letter-spacing: .04em; line-height: 1; color: #3F514E; white-space: nowrap; }
.brand__prod em { font-style: normal; color: #C1A074; }
.brand__div { height: 48px; }
@media (max-width: 760px) {
  .brand { gap: 10px; }
  .brand__logo { height: 40px; }
  .brand__div { height: 30px; }
  .brand__prod { font-size: 17px; letter-spacing: .02em; }
  .updated { display: none; }
}

.brand__prod em { color: inherit; }


/* =====================================================================
   v16 · barra de filtros redesenhada
   ===================================================================== */
.tb { display: flex; flex-direction: column; gap: 18px; margin: 4px 0 22px; }
.tb__top { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.tb__mode { display: inline-flex; background: #EEF1EE; border-radius: 99px; padding: 5px; gap: 4px; }
.tb__mode button { border: 0; background: transparent; border-radius: 99px; height: 46px; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px;
  font: 600 15px Montserrat, sans-serif; color: #3F514E; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.tb__mode button small { font-size: 12px; font-weight: 700; background: rgba(63, 81, 78, .1); border-radius: 99px; padding: 2px 8px; }
.tb__mode button.on { background: #3F514E; color: #fff; box-shadow: 0 4px 14px rgba(63, 81, 78, .25); }
.tb__mode button.on small { background: rgba(255, 255, 255, .18); }
.tb__search { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; border-radius: 99px; background: #fff;
  border: 1.5px solid var(--line); transition: border-color .2s, box-shadow .2s; cursor: text; }
.tb__search:focus-within { border-color: #C1A074; box-shadow: 0 0 0 4px rgba(193, 160, 116, .15); }
.tb__search svg { width: 20px; height: 20px; fill: none; stroke: #3F514E; stroke-width: 2; stroke-linecap: round; flex: none; }
.tb__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 15px Montserrat, sans-serif; color: var(--ink); }
.tb__search input::placeholder { color: var(--ink-3); }

.tb__mid { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tb__progs { display: flex; gap: 8px; flex-wrap: wrap; }
.tb__progs button { --c: #3F514E; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 10px; border-radius: 12px;
  background: #fff; border: 1.5px solid var(--line); cursor: pointer; font: 600 14px Montserrat, sans-serif; color: var(--ink); transition: all .15s; }
.tb__progs button[data-v="all"] { padding: 0 18px; }
.tb__progs button[data-v="livelo"] { --c: #C8187A; }
.tb__progs button[data-v="esfera"] { --c: #E52421; }
.tb__progs button[data-v="meliuz"] { --c: #F2762E; }
.tb__progs button img { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; }
.tb__progs button small { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.tb__progs button:hover { border-color: var(--c); }
.tb__progs button.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, #fff); box-shadow: inset 0 0 0 1px var(--c); }
.tb__progs button.on small { color: var(--c); }
.tb__tools { display: flex; align-items: center; gap: 8px; }
.tb__sort { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 6px 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; }
.tb__sort span { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.tb__sort select { border: 0; background: transparent; height: 40px; font: 600 14px Montserrat, sans-serif; color: var(--ink); padding: 0 4px; margin: 0; cursor: pointer; }
.tb__wa { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #CDE8D6;
  background: #F0FAF3; color: #1D7A45; font: 600 14px Montserrat, sans-serif; cursor: pointer; }
.tb__wa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.tb__wa:hover { background: #E3F5E9; }
.tb__wa.done { background: #1D7A45; color: #fff; border-color: #1D7A45; }
.tb__wa[hidden] { display: none; }

.tb__cats { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.cat { flex: none; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px 8px; border: 0; background: transparent;
  border-radius: 14px; cursor: pointer; scroll-snap-align: start; transition: background .15s; }
.cat:hover { background: #F5F4F0; }
.cat__ic { position: relative; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #F2F4F1; transition: all .15s; }
.cat__ic svg { width: 26px; height: 26px; fill: none; stroke: #3F514E; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cat__ic small { position: absolute; top: -6px; right: -8px; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: #fff;
  border: 1.5px solid var(--line); font: 700 11px/17px Montserrat, sans-serif; color: var(--ink-2); text-align: center; }
.cat__lbl { font: 600 12.5px Montserrat, sans-serif; color: var(--ink-2); white-space: nowrap; }
.cat.on .cat__ic { background: #3F514E; box-shadow: 0 6px 16px rgba(63, 81, 78, .28); }
.cat.on .cat__ic svg { stroke: #fff; }
.cat.on .cat__ic small { background: #C1A074; border-color: #C1A074; color: #fff; }
.cat.on .cat__lbl { color: #3F514E; font-weight: 700; }

@media (max-width: 900px) {
  .tb__top { grid-template-columns: 1fr; }
  .tb__mode { display: grid; grid-template-columns: 1fr 1fr; }
  .tb__mode button { justify-content: center; padding: 0 10px; font-size: 14px; }
}
@media (max-width: 760px) {
  .tb { gap: 14px; }
  .tb__search { height: 50px; }
  .tb__search input { font-size: 14px; }
  .tb__progs { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; gap: 6px; }
  .tb__progs button { flex-direction: column; justify-content: center; height: 62px; padding: 4px; gap: 3px; font-size: 12px; }
  .tb__progs button[data-v="all"] { padding: 4px; }
  .tb__progs button small { display: none; }
  .tb__tools { width: 100%; }
  .tb__sort { flex: 1; }
  .tb__sort select { flex: 1; }
  .tb__wa span { display: none; }
  .tb__wa { padding: 0 14px; }
  .cat { width: 78px; }
  .cat__ic { width: 50px; height: 50px; border-radius: 16px; }
}
.tb__cats { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); padding-top: 8px; }
.tb__cats::-webkit-scrollbar { display: none; }

.tb, .tb__top, .tb__top > *, .tb__mid { min-width: 0; max-width: 100%; }
@media (max-width: 900px) { .tb__mode { width: 100%; } .tb__search { width: 100%; } }

.more[hidden] { display: none; }


/* =====================================================================
   v17 · Lojas do dia a dia
   ===================================================================== */
.feat { margin: 4px 0 30px; }
.feat__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.feat__head h2 { font-size: 26px; margin: 0; color: var(--ink); }
.feat__head p { margin: 0; color: var(--ink-3); font-size: 14px; }
.feat__row { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); }
.feat__row::-webkit-scrollbar { display: none; }
.fc { flex: none; width: 188px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 6px;
  scroll-snap-align: start; transition: box-shadow .2s, transform .2s; }
.fc:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.fc__logo { height: 44px; display: grid; place-items: center; font: 700 14px Montserrat, sans-serif; color: var(--forest); text-align: center; }
.fc__logo img { max-height: 40px; max-width: 80%; object-fit: contain; }
.fc__name { font: 600 13px Montserrat, sans-serif; text-align: center; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 9px; background: #F7F6F3; text-decoration: none; color: var(--ink);
  font: 500 13px Montserrat, sans-serif; }
a.fr:hover { background: #EFEDE7; }
.fr img { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; flex: none; }
.fr b { font-size: 14.5px; font-weight: 700; }
.fr span { flex: 1; white-space: nowrap; }
.fr i { font-style: normal; font-size: 11px; color: #A7824F; }
.fr--off { color: var(--ink-3); }
.fr--off img { opacity: .35; filter: grayscale(1); }
@media (max-width: 760px) {
  .feat { margin-bottom: 22px; }
  .feat__head h2 { font-size: 22px; }
  .feat__head p { font-size: 13px; }
  .fc { width: 168px; }
}
@media (max-width: 760px) {
  .tb__mode { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tb__mode button { min-width: 0; padding: 0 6px; font-size: 13px; gap: 5px; height: 44px; }
  .tb__mode button span { overflow: hidden; text-overflow: ellipsis; }
  .tb__mode button small { font-size: 11px; padding: 1px 6px; }
}
@media (max-width: 380px) { .tb__mode button small { display: none; } }

/* =====================================================================
   v18 · menu + páginas Transferências e Histórico
   ===================================================================== */
.top__row { gap: 18px; }
.nav { display: flex; gap: 4px; margin-left: auto; margin-right: 18px; }
.nav a { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 99px;
  font: 600 14px Montserrat, sans-serif; color: var(--ink-2); text-decoration: none; transition: background .15s, color .15s; }
.nav a:hover { background: #F2F4F1; color: #3F514E; }
.nav a.on { background: #3F514E; color: #fff; }
.nav__dot { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #C1A074; color: #fff; font: 700 11px/18px Montserrat, sans-serif; text-align: center; }
.nav__dot[hidden] { display: none; }

.ph { padding: 34px 0 10px; max-width: 760px; }
.ph__tag { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #A7824F; }
.ph h1 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.05; margin: 10px 0 12px; }
.ph h1 em { font-style: italic; color: #A7824F; }
.ph p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.block { margin: 30px 0 38px; }
.block__head h2 { font-size: 28px; }

/* cards de transferência */
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.tcard { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tcard__route { display: flex; align-items: center; gap: 10px; font: 600 14px Montserrat, sans-serif; }
.tcard__route svg { width: 20px; height: 20px; fill: none; stroke: #A7824F; stroke-width: 2; stroke-linecap: round; flex: none; }
.tcard__o { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.tcard__o img { width: 22px; height: 22px; border-radius: 5px; }
.tcard__d { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tcard__dlogo { height: 26px; max-width: 70px; object-fit: contain; }
.tcard__big { font-family: "DM Serif Display", Georgia, serif; color: #3F514E; line-height: 1; }
.tcard__big b { font-weight: 400; font-size: 54px; }
.tcard__big span { font: 600 15px Montserrat, sans-serif; color: var(--ink-2); }
.tcard__split { display: flex; gap: 8px; flex-wrap: wrap; }
.tcard__split span { font-size: 12.5px; font-weight: 600; background: #F6EFE4; color: #7A5E35; border-radius: 99px; padding: 4px 10px; }
.tcard__calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; background: #F7F6F3; border-radius: 12px; padding: 12px; }
.tcard__calc div { display: flex; flex-direction: column; }
.tcard__calc small { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.tcard__calc b { font: 700 20px Montserrat, sans-serif; color: var(--ink); }
.tcard__calc p { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--ink-3); }
.tcard__rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.tcard__go { margin-top: auto; align-self: flex-start; font: 700 14px Montserrat, sans-serif; color: #3F514E; text-decoration: none; }
.tcard__go:hover { text-decoration: underline; }

/* tabelas */
.rt, .ht { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-size: 14px; }
.rt th, .rt td, .ht th, .ht td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rt thead th, .ht thead th { background: #F7F6F3; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.rt thead img, .ht td img { width: 18px; height: 18px; border-radius: 4px; vertical-align: -4px; margin-right: 6px; }
.rt tbody tr:last-child > *, .ht tbody tr:last-child > * { border-bottom: 0; }
.rt tbody th { font-weight: 600; }
.rt td small { display: block; font-size: 11.5px; color: var(--ink-3); }
.rt__bonus { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 700; color: #7A5E35; background: #F6EFE4; border-radius: 99px; padding: 2px 8px; }
.rt--off { color: var(--ink-3); }
.ht__x { font-size: 11.5px; color: #A7824F; font-weight: 700; }
.pill { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 99px; padding: 3px 10px; background: #F0EFEB; color: var(--ink-3); }
.pill--on { background: #E5F4EC; color: #1F8A5B; }
.hnote { font-size: 12.5px; color: var(--ink-3); margin: 10px 2px 0; }
.hfilters { display: flex; gap: 8px; flex-wrap: wrap; }
.hfilters select { height: 42px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; padding: 0 12px; font: 600 14px Montserrat, sans-serif; margin: 0; }
.hfilters2 { margin-bottom: 14px; }
.hstats { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.hstat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink-3); }
.hstat b { font: 700 15px Montserrat, sans-serif; color: var(--ink); }

@media (max-width: 900px) {
  .top__row { flex-wrap: wrap; padding-bottom: 8px; }
  .nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .nav a { height: 36px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 760px) {
  .tr-grid { grid-template-columns: 1fr; }
  .rt, .ht { font-size: 13px; }
  .rt th, .rt td, .ht th, .ht td { padding: 10px; }
  .htable, .routes { overflow-x: auto; }
  .ht { min-width: 620px; }
}

.hfilters2 { grid-template-columns: 1fr auto; }
@media (max-width: 900px) { .hfilters2 { grid-template-columns: 1fr; } }


/* =====================================================================
   v19 · Transferências no padrão da home
   ===================================================================== */
.hb--tr .hb__art--num { display: grid; place-items: center; }
.hb__num { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; color: #fff; text-align: center; line-height: 1; }
.hb__num small { font: 700 16px Montserrat, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #E3EAE6; }
.hb__num b { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-size: clamp(84px, 9vw, 128px); color: #fff; }
.hb__num span { font: 600 15px Montserrat, sans-serif; color: #E3EAE6; margin-top: 6px; }
.hb--tr .hb__bubble { width: min(330px, 86%); right: 50%; top: 50%; transform: translate(50%, -50%); opacity: 1; fill: #5B7360; }

.tr-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.tc { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.tc:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.tc__media { position: relative; display: block; aspect-ratio: 630 / 230; background: #F2F4F1; text-decoration: none; }
.tc__banner { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc__fake { position: absolute; inset: 0; background: linear-gradient(120deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); color: #fff;
  display: flex; flex-direction: column; justify-content: center; padding: 16px 20px; gap: 2px; }
.tc__fake div { display: flex; align-items: center; gap: 8px; font: 700 14px Montserrat, sans-serif; }
.tc__fakelogo { height: 24px; max-width: 70px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px 4px; }
.tc__fake b { font: 800 46px/1 Montserrat, sans-serif; }
.tc__fake b small { font-size: 16px; margin-right: 4px; font-weight: 700; }
.tc__fake em { font: 600 13px Montserrat, sans-serif; font-style: normal; opacity: .9; }
.tc__flag { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, .95); color: #3F514E; font: 700 11.5px Montserrat, sans-serif;
  border-radius: 99px; padding: 4px 10px; }
.tc__flag--hot { background: #C1A074; color: #fff; }
.tc__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tc__route { display: flex; align-items: center; gap: 6px; font: 600 13px Montserrat, sans-serif; color: var(--ink-2); }
.tc__route img { width: 18px; height: 18px; border-radius: 4px; }
.tc__route svg { width: 16px; height: 16px; fill: none; stroke: #A7824F; stroke-width: 2; stroke-linecap: round; }
.tc__route b { color: var(--ink); }
.tc__pct { font: 800 30px/1 Montserrat, sans-serif; color: #3F514E; }
.tc__pct small { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.tc__pct span { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.tc__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tc__chips span { font: 600 12px Montserrat, sans-serif; background: #F6EFE4; color: #7A5E35; border-radius: 99px; padding: 4px 10px; }
.tc__calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; background: #F7F6F3; border-radius: 12px; padding: 10px 12px; }
.tc__calc div { display: flex; flex-direction: column; }
.tc__calc small { font: 600 11px Montserrat, sans-serif; color: var(--ink-3); }
.tc__calc b { font: 700 18px Montserrat, sans-serif; }
.tc__calc p { grid-column: 1 / -1; margin: 0; font-size: 11.5px; color: var(--ink-3); }
.tc__rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.tc__rules b { color: var(--ink); font-weight: 600; }
.tc__warn { background: #FFF6E5; border-radius: 8px; padding: 6px 8px; color: #7A5E35; }
.tc__go { margin-top: auto; display: inline-flex; justify-content: center; align-items: center; height: 42px; border-radius: 99px; background: #3F514E; color: #fff;
  font: 700 14px Montserrat, sans-serif; text-decoration: none; }
.tc__go:hover { filter: brightness(1.1); }
.block .feat__head { margin-bottom: 14px; }
@media (max-width: 900px) {
  .hb--tr .hb__art { height: 230px; }
  .hb--tr .hb__bubble { width: 230px; }
}
@media (max-width: 760px) { .tr-grid { grid-template-columns: 1fr; } .hb__num b { font-size: 84px; } }