/* =====================================================================
   21 · Grid de contrapartidas (p21–p22) — em blocos
   Abertura (como ler + as 4 cotas) → 5 frentes, uma por tela → resumo.
   Dois arranjos para o MESMO HTML:
   - .is-deck (desktop com movimento): cena fixada, os slides empilhados
     e trocados pela rolagem (js); a legenda das cotas vira barra fixa.
   - fluxo (celular, movimento reduzido, sem js, tela baixa): um bloco
     por tela em fluxo, legenda/abas grudadas sob o HUD; no celular a
     tabela vira lista da cota escolhida (a <table> segue para leitor).
   Tokens das cotas (--t-*) iguais aos do 20-cotas.css.
   ===================================================================== */

#contrapartidas {
  --t-co: #00d8f8; --t-pat: #4f8dff; --t-nam: #a855ff; --t-apr: #f000f0;
  --rail-h: 48px;
  --row: clamp(42px, calc((100svh - 366px) / 7), 68px);
  --chamf: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
#contrapartidas .wrap { max-width: 1400px; }
#contrapartidas [data-col="apresenta"], #contrapartidas [data-tier="apresenta"] { --t: var(--t-apr); }
#contrapartidas [data-col="naming"], #contrapartidas [data-tier="naming"] { --t: var(--t-nam); }
#contrapartidas [data-col="patrocinador"], #contrapartidas [data-tier="patrocinador"] { --t: var(--t-pat); }
#contrapartidas [data-col="copatrocinador"], #contrapartidas [data-tier="copatrocinador"] { --t: var(--t-co); }
#contrapartidas .ctp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#contrapartidas .ctp-stage > .ctp-slide { height: auto; } /* o núcleo dá height:100% a .stage > .wrap */

/* ---------- Marcas: ✓ incluído · 4X selo · — não incluído ---------- */
#contrapartidas .ctp-m { display: inline-grid; place-items: center; vertical-align: middle; }
#contrapartidas .ctp-m--yes {
  /* acompanha a altura da linha: em tela baixa (linha de 42 px) os círculos não encostam no vizinho */
  width: min(40px, calc(var(--row) - 10px)); aspect-ratio: 1; border-radius: 50%; color: var(--t, var(--cyan));
  background: color-mix(in srgb, var(--t, var(--cyan)) 15%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t, var(--cyan)) 60%, transparent);
}
#contrapartidas .ctp-m--yes svg {
  width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--t, var(--cyan)) 80%, transparent));
}
#contrapartidas .ctp-m--n {
  min-width: 54px; height: min(34px, calc(var(--row) - 12px)); padding: 0 10px; border-radius: 999px;
  font-family: var(--f-mono); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: .04em; color: #fff;
  background: color-mix(in srgb, var(--t, var(--cyan)) 28%, #0a0616);
  box-shadow: inset 0 0 0 1.5px var(--t, var(--cyan)), 0 0 14px color-mix(in srgb, var(--t, var(--cyan)) 38%, transparent);
}
#contrapartidas .ctp-m--no { width: 18px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .26); }

/* ---------- Abertura ---------- */
#contrapartidas .ctp-title { font-size: clamp(52px, 6.6vw, 112px); margin-top: 12px; }
#contrapartidas .ctp-howto { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(10px, 2vh, 22px); }
#contrapartidas .ctp-howto__t { font-size: clamp(19px, .55vw + 12px, 24px); line-height: 1.4; color: #eeeaf8; text-wrap: pretty; }
#contrapartidas .ctp-howto__list { display: none; }
#contrapartidas .ctp-key { --t: var(--cyan); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
#contrapartidas .ctp-key li { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #d6d0ec; }
#contrapartidas .ctp-key .ctp-m--yes { width: 32px; height: 32px; }
#contrapartidas .ctp-key .ctp-m--yes svg { width: 19px; height: 19px; }
#contrapartidas .ctp-key .ctp-m--n { min-width: 44px; height: 28px; font-size: 14px; }

#contrapartidas .ctp-agenda ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: clamp(18px, 3.4vh, 40px); }
#contrapartidas .ctp-agenda a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico num" "ico nm" "ico n"; align-items: center; column-gap: 14px;
  min-height: 44px; padding: 14px 16px; text-decoration: none; color: #fff;
  background: rgba(12, 8, 28, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11); clip-path: var(--chamf);
  transition: background .25s, box-shadow .25s;
}
#contrapartidas .ctp-agenda a:hover { background: rgba(28, 20, 58, .8); box-shadow: inset 0 0 0 1px rgba(0, 216, 248, .5); }
#contrapartidas .ctp-agenda__ico { grid-area: ico; width: 40px; height: 40px; display: grid; place-items: center; color: #fff; }
#contrapartidas .ctp-agenda__ico svg, #contrapartidas .ctp-bh__ico svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(0, 216, 248, .75)) drop-shadow(0 0 12px rgba(120, 0, 240, .55));
}
#contrapartidas .ctp-agenda small { grid-area: num; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; color: var(--cyan); }
#contrapartidas .ctp-agenda__nm { grid-area: nm; font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(19px, .8vw + 9px, 23px); line-height: 1.12; letter-spacing: .02em; padding-top: .04em; }
#contrapartidas .ctp-agenda__n { grid-area: n; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
#contrapartidas .ctp-agenda__n b { color: #fff; font-weight: 700; }
#contrapartidas .ctp-open__cap { text-wrap: balance; margin-top: clamp(18px, 3.4vh, 40px); font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
#contrapartidas .ctp-slot { height: var(--rail-h); margin-top: 10px; }

/* ---------- Legenda das cotas = seletor ---------- */
#contrapartidas .ctp-rail__in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#contrapartidas .ctp-pick {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px;
  font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 17px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: #e2ddf4;
  background: rgba(12, 8, 28, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: color .25s, background .25s, box-shadow .25s, opacity .25s;
}
#contrapartidas .ctp-pick i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--t); box-shadow: 0 0 8px var(--t); }
#contrapartidas .ctp-pick__n { font-family: var(--f-mega); font-weight: 400; font-style: normal; font-size: 23px; line-height: 1.04; letter-spacing: 0; color: var(--t); display: inline-block; transform: skewX(-8deg); padding-top: .04em; }
#contrapartidas .ctp-pick:hover { color: #fff; background: rgba(30, 22, 60, .9); }
#contrapartidas .ctp-pick[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--t) 42%, #0a0616), color-mix(in srgb, var(--t) 18%, #0a0616));
  box-shadow: inset 0 0 0 1.5px var(--t), 0 0 20px color-mix(in srgb, var(--t) 40%, transparent);
}
#contrapartidas .ctp-pick--all { --t: #ffffff; }
#contrapartidas :is(.ctp-pick, .ctp-agenda a):focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--cyan); }
#contrapartidas .ctp-pick--all[aria-pressed="true"] { background: rgba(255, 255, 255, .14); }
#contrapartidas .ctp-pick[aria-pressed="true"] .ctp-pick__n { color: #fff; }

/* ---------- Bloco: cabeçalho ---------- */
#contrapartidas .ctp-bh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px clamp(16px, 1.6vw, 24px); margin-bottom: clamp(12px, 2.2vh, 22px); }
#contrapartidas .ctp-bh__ico {
  width: clamp(54px, 4.4vw, 66px); aspect-ratio: 1; display: grid; place-items: center; padding: 13px; color: #fff;
  background: linear-gradient(135deg, rgba(0, 216, 248, .2), rgba(120, 0, 240, .22) 50%, rgba(240, 0, 240, .2));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2);
  clip-path: var(--chamf);
}
#contrapartidas .ctp-bh__k { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
#contrapartidas .ctp-prog { display: inline-flex; gap: 4px; }
#contrapartidas .ctp-prog b { width: 16px; height: 3px; background: rgba(255, 255, 255, .2); }
#contrapartidas .ctp-prog b.is-on { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
#contrapartidas .ctp-bh__nm {
  margin-top: 2px; font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(36px, 3.5vw, 58px); line-height: 1.12; padding-top: .06em; letter-spacing: 0;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(-1.5px 0 0 rgba(0, 216, 248, .7)) drop-shadow(1.5px 0 0 rgba(240, 0, 240, .65)) drop-shadow(0 4px 12px rgba(0, 0, 0, .8));
}
#contrapartidas .ctp-bh__r { display: grid; justify-items: end; gap: 4px; text-align: right; }
#contrapartidas .ctp-bh__n { font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 19px; letter-spacing: .04em; color: #e9e6f7; white-space: nowrap; }
#contrapartidas .ctp-bh__n b { font-family: var(--f-mega); font-weight: 400; font-style: normal; font-size: clamp(36px, 3.2vw, 50px); line-height: 1.04; color: #fff; display: inline-block; transform: skewX(-8deg); margin-right: 8px; vertical-align: -.1em; filter: drop-shadow(0 0 12px rgba(120, 0, 240, .8)); }
#contrapartidas .ctp-bh__sel { min-height: 1.4em; font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t, var(--mute)); white-space: nowrap; }

/* ---------- Bloco: placa + tabela ---------- */
#contrapartidas .ctp-plate {
  --bv: 14px; --b: 1.5px;
  position: relative; isolation: isolate; padding: 4px clamp(6px, .8vw, 12px) 4px;
  background: linear-gradient(100deg, rgba(0, 216, 248, .6), rgba(120, 0, 240, .55) 50%, rgba(240, 0, 240, .6));
  clip-path: polygon(var(--bv) 0, calc(100% - var(--bv)) 0, 100% var(--bv), 100% calc(100% - var(--bv)), calc(100% - var(--bv)) 100%, var(--bv) 100%, 0 calc(100% - var(--bv)), 0 var(--bv));
}
#contrapartidas .ctp-plate::before {
  content: ''; position: absolute; inset: var(--b); z-index: -1; pointer-events: none;
  --bi: calc(var(--bv) - var(--b) * .42);
  clip-path: polygon(var(--bi) 0, calc(100% - var(--bi)) 0, 100% var(--bi), 100% calc(100% - var(--bi)), calc(100% - var(--bi)) 100%, var(--bi) 100%, 0 calc(100% - var(--bi)), 0 var(--bi));
  background: linear-gradient(180deg, rgba(22, 17, 44, .98), rgba(8, 5, 20, .98) 40%, rgba(12, 8, 28, .98));
}
#contrapartidas .ctp-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
#contrapartidas .ctp-col-e { width: 44%; }
#contrapartidas .ctp-col { width: 14%; }
#contrapartidas .ctp-table th, #contrapartidas .ctp-table td { padding: 0; }
#contrapartidas .ctp-table thead th {
  height: 50px; padding: 8px 8px; vertical-align: middle; text-align: center;
  font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  font-size: clamp(15px, .4vw + 10.5px, 18px); line-height: 1.12; color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
#contrapartidas .ctp-table thead th[data-col] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--t) 26%, transparent), color-mix(in srgb, var(--t) 8%, transparent));
  box-shadow: inset 0 3px 0 var(--t), inset 1px 0 0 rgba(255, 255, 255, .06);
}
#contrapartidas .ctp-table thead th span { padding-top: .04em; display: inline-block; }
#contrapartidas .ctp-table thead .ctp-th-e { text-align: left; padding-left: clamp(14px, 1.4vw, 22px); font-family: var(--f-mono); font-style: normal; font-weight: 500; font-size: 12px; letter-spacing: .16em; color: var(--mute); }
#contrapartidas .ctp-row { height: var(--row); transition: opacity .35s; }
#contrapartidas .ctp-row:nth-child(even) { background: rgba(255, 255, 255, .03); }
#contrapartidas .ctp-row th, #contrapartidas .ctp-row td { border-bottom: 1px solid rgba(255, 255, 255, .07); }
#contrapartidas .ctp-row:last-child th, #contrapartidas .ctp-row:last-child td { border-bottom: 0; }
#contrapartidas .ctp-row th {
  text-align: left; padding: 6px clamp(14px, 1.4vw, 22px); vertical-align: middle;
  font-family: var(--f-body); font-weight: 400; font-size: clamp(18px, .35vw + 13.5px, 20px); line-height: 1.3; color: #f2effa;
  transition: color .35s;
}
#contrapartidas .ctp-nw { white-space: nowrap; }
#contrapartidas .ctp-row th, #contrapartidas .ctp-list__t { text-wrap: pretty; }
#contrapartidas .ctp-row th sup, #contrapartidas .ctp-list sup { color: var(--magenta); font-weight: 700; font-size: .7em; margin-left: 1px; }
#contrapartidas .ctp-row td { text-align: center; vertical-align: middle; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .05); transition: opacity .35s, background-color .35s; }
#contrapartidas .ctp-table tfoot th, #contrapartidas .ctp-table tfoot td { height: 46px; border-top: 1px solid rgba(255, 255, 255, .16); vertical-align: middle; }
#contrapartidas .ctp-table tfoot th { text-align: left; padding: 0 clamp(14px, 1.4vw, 22px); font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
#contrapartidas .ctp-table tfoot td { text-align: center; font-family: var(--f-mega); font-size: 26px; line-height: 1.04; color: var(--t); transition: opacity .35s; }

/* ---------- Cota destacada (seletor ou evento 'tier' do capítulo 20) ---------- */
#contrapartidas[data-sel] .ctp-table :is(td, th)[data-col] { opacity: .26; }
#contrapartidas[data-sel="apresenta"] .ctp-table :is(td, th)[data-col="apresenta"],
#contrapartidas[data-sel="naming"] .ctp-table :is(td, th)[data-col="naming"],
#contrapartidas[data-sel="patrocinador"] .ctp-table :is(td, th)[data-col="patrocinador"],
#contrapartidas[data-sel="copatrocinador"] .ctp-table :is(td, th)[data-col="copatrocinador"] { opacity: 1; }
#contrapartidas[data-sel="apresenta"] .ctp-table td[data-col="apresenta"],
#contrapartidas[data-sel="naming"] .ctp-table td[data-col="naming"],
#contrapartidas[data-sel="patrocinador"] .ctp-table td[data-col="patrocinador"],
#contrapartidas[data-sel="copatrocinador"] .ctp-table td[data-col="copatrocinador"] {
  background-color: color-mix(in srgb, var(--t) 13%, transparent);
  box-shadow: inset 1.5px 0 0 color-mix(in srgb, var(--t) 70%, transparent), inset -1.5px 0 0 color-mix(in srgb, var(--t) 70%, transparent);
}
#contrapartidas[data-sel="apresenta"] .ctp-table thead th[data-col="apresenta"],
#contrapartidas[data-sel="naming"] .ctp-table thead th[data-col="naming"],
#contrapartidas[data-sel="patrocinador"] .ctp-table thead th[data-col="patrocinador"],
#contrapartidas[data-sel="copatrocinador"] .ctp-table thead th[data-col="copatrocinador"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--t) 70%, #0a0616), color-mix(in srgb, var(--t) 38%, #0a0616));
  box-shadow: inset 0 3px 0 #fff;
}
#contrapartidas .ctp-row.is-off th { color: rgba(242, 239, 250, .4); }
@keyframes ctp-flash { 0% { filter: brightness(1); } 30% { filter: brightness(2.3); } 100% { filter: brightness(1); } }
#contrapartidas.is-flash[data-sel="apresenta"] [data-col="apresenta"] .ctp-m:not(.ctp-m--no),
#contrapartidas.is-flash[data-sel="naming"] [data-col="naming"] .ctp-m:not(.ctp-m--no),
#contrapartidas.is-flash[data-sel="patrocinador"] [data-col="patrocinador"] .ctp-m:not(.ctp-m--no),
#contrapartidas.is-flash[data-sel="copatrocinador"] [data-col="copatrocinador"] .ctp-m:not(.ctp-m--no),
#contrapartidas.is-flash .ctp-list .ctp-m:not(.ctp-m--no) { animation: ctp-flash .8s ease-out; }

/* ---------- Lista do celular (montada pelo js a partir da tabela) ---------- */
#contrapartidas .ctp-list { display: none; }
#contrapartidas .ctp-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) 58px; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 0 8px 2px; border-bottom: 1px solid rgba(255, 255, 255, .09);
  font-size: 17px; line-height: 1.35; color: #f2effa;
}
#contrapartidas .ctp-list li:last-child { border-bottom: 0; }
#contrapartidas .ctp-list li.is-no .ctp-list__t { color: rgba(242, 239, 250, .42); }
#contrapartidas .ctp-list .ctp-m { justify-self: center; }
#contrapartidas .ctp-list .ctp-m--yes { width: 38px; height: 38px; }

/* ---------- Resumo: comparativo dos totais ---------- */
#contrapartidas .ctp-close__t {
  margin-top: 10px; font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; text-wrap: balance;
  font-size: clamp(40px, 4.6vw, 78px); line-height: 1.12; padding-top: .06em;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(-2px 0 0 rgba(0, 216, 248, .7)) drop-shadow(2px 0 0 rgba(240, 0, 240, .65)) drop-shadow(0 6px 16px rgba(0, 0, 0, .85));
}
#contrapartidas .ctp-bars { display: grid; gap: clamp(10px, 1.8vh, 16px); margin-top: clamp(18px, 3.6vh, 40px); }
#contrapartidas .ctp-bar {
  display: grid; grid-template-columns: minmax(200px, 17rem) minmax(0, 1fr) minmax(8.5rem, auto); align-items: center; gap: clamp(16px, 2vw, 32px);
  min-height: clamp(58px, 7.4vh, 72px); padding: 8px clamp(16px, 1.6vw, 24px);
  background: rgba(12, 8, 28, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); clip-path: var(--chamf);
  transition: opacity .35s, box-shadow .35s;
}
#contrapartidas .ctp-bar__nm { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(19px, .9vw + 8px, 25px); line-height: 1.12; letter-spacing: .04em; color: #fff; padding-top: .04em; }
#contrapartidas .ctp-bar__nm i { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--t); box-shadow: 0 0 10px var(--t); }
#contrapartidas .ctp-bar__segs { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 4px; height: 24px; }
#contrapartidas .ctp-bar__segs:empty { display: block; height: 14px; background: linear-gradient(90deg, var(--t) calc(var(--n) / 21 * 100%), rgba(255, 255, 255, .08) 0); }
#contrapartidas .ctp-bar__segs i { border-radius: 2px; background: rgba(255, 255, 255, .08); }
#contrapartidas .ctp-bar__segs i.is-on { background: linear-gradient(180deg, color-mix(in srgb, var(--t) 70%, #fff), var(--t)); box-shadow: 0 0 10px color-mix(in srgb, var(--t) 55%, transparent); }
#contrapartidas .ctp-bar__v { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 10px; white-space: nowrap; }
#contrapartidas .ctp-bar__n { font-family: var(--f-mega); font-weight: 400; font-size: clamp(36px, 3.2vw, 52px); line-height: 1.04; color: var(--t); display: inline-block; transform: skewX(-8deg); padding-top: .04em; min-width: 1.2em; text-align: right; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--t) 50%, transparent)); }
#contrapartidas .ctp-bar__v > span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
#contrapartidas[data-sel] .ctp-bar { opacity: .34; }
#contrapartidas[data-sel="apresenta"] .ctp-bar[data-tier="apresenta"],
#contrapartidas[data-sel="naming"] .ctp-bar[data-tier="naming"],
#contrapartidas[data-sel="patrocinador"] .ctp-bar[data-tier="patrocinador"],
#contrapartidas[data-sel="copatrocinador"] .ctp-bar[data-tier="copatrocinador"] { opacity: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--t) 26%, #0a0616), rgba(12, 8, 28, .78) 60%); box-shadow: inset 4px 0 0 var(--t); }

/* =====================================================================
   Fluxo (padrão): celular, movimento reduzido, sem js, tela baixa
   ===================================================================== */
#contrapartidas:not(.is-deck) { padding-block: clamp(72px, 12vh, 140px) clamp(24px, 6vh, 72px); }
#contrapartidas:not(.is-deck) .ctp-stage { height: auto; overflow: visible; }
#contrapartidas:not(.is-deck) .ctp-bg, #contrapartidas:not(.is-deck) .ctp-slot { display: none; }
/* a abertura + a legenda ocupam a primeira tela inteira: o primeiro bloco nasce abaixo da dobra */
#contrapartidas:not(.is-deck) .ctp-open { padding-bottom: 14px; min-height: calc(100svh - clamp(72px, 12vh, 140px) - var(--rail-h)); display: flex; flex-direction: column; justify-content: flex-end; }
#contrapartidas:not(.is-deck) .ctp-rail {
  position: sticky; top: var(--hud-h); z-index: 6; padding-block: 8px;
  background: rgba(4, 2, 12, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* grudada: uma faixa cobre o vão do HUD, para nada rolar visível por trás dele */
#contrapartidas:not(.is-deck) .ctp-rail.is-stuck::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--hud-h) + 2px); pointer-events: none;
  background: linear-gradient(180deg, #030109, #04020c); /* opaca: a .96 o texto que passava por baixo aparecia como fantasma sob o HUD */
}
#contrapartidas:not(.is-deck) :is(.ctp-block, .ctp-close) {
  min-height: calc(100svh - var(--hud-h) - var(--rail-h));
  padding-block: clamp(24px, 4vh, 44px);
  display: flex; flex-direction: column;
}

@media (min-width: 821px) {
  /* a parada põe o topo do bloco sob a legenda; o conteúdo fica no centro da área visível */
  #contrapartidas:not(.is-deck) :is(.ctp-block, .ctp-close) { justify-content: center; }
  /* abertura: o título no meio da primeira tela, a legenda (com a sua linha) embaixo */
  #contrapartidas:not(.is-deck) .ctp-open .ctp-slide__in { flex: 1 0 auto; display: flex; flex-direction: column; }
  #contrapartidas:not(.is-deck) .ctp-open__k { margin-top: auto; align-self: flex-start; }
  #contrapartidas:not(.is-deck) .ctp-open__cap { margin-top: auto; padding-top: 28px; }
}

/* =====================================================================
   Deck: cena fixada, slides empilhados (desktop com movimento)
   ===================================================================== */
#contrapartidas.is-deck .ctp-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#contrapartidas.is-deck .ctp-bg__glow { position: absolute; inset: 0; background: radial-gradient(70% 62% at 50% 56%, rgba(5, 1, 15, .82), rgba(5, 1, 15, .4) 60%, transparent 100%); }
#contrapartidas.is-deck .ctp-bg__grid {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 34%;
  background-image: linear-gradient(rgba(120, 0, 240, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 0, 240, .16) 1px, transparent 1px);
  background-size: 72px 72px; transform: perspective(600px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 85%); mask-image: linear-gradient(0deg, #000 0%, transparent 85%);
  opacity: .7;
}
#contrapartidas.is-deck .ctp-rail { position: absolute; left: 0; right: 0; top: calc(var(--hud-h) + 12px); z-index: 5; will-change: transform; }
#contrapartidas.is-deck .ctp-slide {
  position: absolute; left: 0; right: 0; margin-inline: auto;
  top: calc(var(--hud-h) + 12px + var(--rail-h) + clamp(14px, 2.4vh, 24px)); bottom: clamp(14px, 2.4vh, 26px);
  will-change: transform, opacity;
  display: flex; flex-direction: column;
}
/* centro ótico: a sobra se divide 0,6 em cima e 1 embaixo; sem sobra, o slide começa no topo */
#contrapartidas.is-deck .ctp-slide::before { content: ''; flex: .6 1 0; }
#contrapartidas.is-deck .ctp-slide::after { content: ''; flex: 1 1 0; }
#contrapartidas.is-deck .ctp-open { top: calc(var(--hud-h) + clamp(14px, 3vh, 34px)); }
#contrapartidas.is-deck .ctp-slide__in { flex: none; transform-origin: 50% 0; }
#contrapartidas.is-deck .ctp-open .ctp-slide__in { transform-origin: 0 0; } /* a vaga da legenda mede a partir da esquerda */

/* ---------- Telas médias (tablet deitado, janela estreita) ---------- */
@media (max-width: 1180px) {
  #contrapartidas .ctp-agenda a { padding: 12px; column-gap: 10px; }
  #contrapartidas .ctp-agenda__ico { width: 32px; height: 32px; }
  #contrapartidas .ctp-pick { padding: 0 13px; font-size: 15px; gap: 8px; }
  #contrapartidas .ctp-col-e { width: 40%; }
  #contrapartidas .ctp-col { width: 15%; }
  #contrapartidas .ctp-bar { grid-template-columns: minmax(170px, 14rem) minmax(0, 1fr) minmax(7.5rem, auto); }
}

@media (min-width: 821px) and (max-width: 1023px) {
  #contrapartidas .ctp-agenda li { display: grid; }
  #contrapartidas .ctp-agenda a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ico" "num" "nm" "n"; align-content: start; justify-items: start; row-gap: 4px; }
  #contrapartidas .ctp-agenda__ico { width: 30px; height: 30px; margin-bottom: 4px; }
  #contrapartidas .ctp-agenda__nm { font-size: 18px; white-space: nowrap; }
  #contrapartidas .ctp-agenda__n { white-space: nowrap; }
  #contrapartidas .ctp-table thead th { padding: 8px 3px; font-size: 13px; letter-spacing: .02em; }
  #contrapartidas .ctp-table thead th span { white-space: nowrap; }
}

/* =====================================================================
   Celular
   ===================================================================== */
@media (max-width: 820px) {
  #contrapartidas .ctp-title { font-size: clamp(40px, 11.4vw, 64px); }
  #contrapartidas .ctp-howto { display: grid; gap: 14px; }
  #contrapartidas .ctp-howto__t { font-size: 19px; text-wrap: balance; }
  #contrapartidas.is-js .ctp-howto__grid { display: none; }
  #contrapartidas.is-js .ctp-howto__list { display: inline; }
  #contrapartidas .ctp-key { gap: 10px 18px; }
  #contrapartidas .ctp-agenda ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 20px; }
  #contrapartidas .ctp-agenda a { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "ico nm" "ico n"; column-gap: 10px; row-gap: 1px; min-height: 50px; padding: 7px 10px; }
  #contrapartidas .ctp-agenda small { display: none; }
  #contrapartidas .ctp-agenda__ico { width: 26px; height: 26px; }
  #contrapartidas .ctp-agenda__nm { font-size: 18px; white-space: nowrap; }
  #contrapartidas .ctp-open__cap { margin-top: 20px; }

  /* abas: as 4 cotas em 2 × 2, sempre uma escolhida (sem "Todas") */
  #contrapartidas.is-js .ctp-rail__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #contrapartidas.is-js .ctp-pick--all { display: none; }
  #contrapartidas .ctp-pick { min-height: 46px; padding: 0 11px; font-size: 14px; gap: 7px; }
  #contrapartidas .ctp-pick__n { margin-left: auto; padding-left: 4px; font-size: 21px; }
  #contrapartidas .ctp-pick__nm { white-space: nowrap; min-width: 0; }

  #contrapartidas .ctp-bh { grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; margin-bottom: 8px; }
  #contrapartidas .ctp-bh__ico { width: 50px; padding: 11px; }
  #contrapartidas .ctp-bh__nm { font-size: clamp(30px, 8.6vw, 42px); }
  #contrapartidas .ctp-bh__r { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--t, rgba(255, 255, 255, .2)); }
  #contrapartidas .ctp-bh__n { font-size: 17px; }
  #contrapartidas .ctp-bh__n b { font-size: 34px; }
  #contrapartidas .ctp-bh__sel { font-size: 12px; }

  /* sem js: a tabela rola dentro da placa (nunca a página) */
  #contrapartidas:not(.is-js) .ctp-plate { overflow-x: auto; }
  #contrapartidas:not(.is-js) .ctp-table { min-width: 620px; }
  /* com js: a lista da cota escolhida; a tabela segue no DOM para leitor de tela */
  #contrapartidas.is-js .ctp-plate { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  #contrapartidas.is-js .ctp-list { display: block; }

  #contrapartidas .ctp-close__t { font-size: clamp(30px, 8.6vw, 44px); }
  #contrapartidas .ctp-bars { gap: 8px; margin-top: 16px; }
  #contrapartidas .ctp-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm v" "segs segs"; gap: 6px 12px; min-height: 0; padding: 8px 14px 12px; }
  #contrapartidas .ctp-bar__nm { grid-area: nm; font-size: 18px; }
  #contrapartidas .ctp-bar__segs { grid-area: segs; gap: 3px; height: 14px; }
  #contrapartidas .ctp-bar__v { grid-area: v; }
  #contrapartidas .ctp-bar__n { font-size: 32px; }
  /* no celular sempre há uma cota escolhida: o resumo marca a dela sem apagar a comparação */
  #contrapartidas[data-sel] .ctp-bar { opacity: 1; }
  #contrapartidas:not(.is-deck) { padding-top: 64px; }
  #contrapartidas:not(.is-deck) .ctp-open { min-height: calc(100svh - 64px - var(--rail-h)); }
  #contrapartidas:not(.is-deck) :is(.ctp-block, .ctp-close) { padding-block: 18px 24px; }
}
/* celular estreito: "CO-PATROCINADOR" encostava no "10" da própria aba (360 px) */
@media (max-width: 380px) {
  #contrapartidas .ctp-pick { padding: 0 9px; gap: 6px; font-size: 13px; letter-spacing: .03em; }
  #contrapartidas .ctp-pick__n { font-size: 19px; }
}
@media (max-width: 340px) {
  #contrapartidas .ctp-pick i { display: none; }
  #contrapartidas .ctp-agenda a { grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; padding: 7px 8px; }
  #contrapartidas .ctp-agenda__ico { width: 22px; height: 22px; }
  #contrapartidas .ctp-agenda__nm { font-size: 16px; }
}