/* 12 · Cotas e entregas comerciais — os cinco presentes.
   Palco fixado. Duas camadas de layout:
   · .ct-wrap (a composição FINAL, no fluxo): a linha de cima (.ct-head) com o título na coluna "Entrega" e as vagas
     (.ct-spot) onde as caixas pousam, uma sobre cada coluna de cota; embaixo a tabela (.board) e a observação.
     As colunas da linha de cima e da tabela têm as MESMAS larguras (--c0…--c5).
   · .ct-floorwrap (o chão, absoluto embaixo): as cinco caixas grandes, o nome de cada uma e o cartão que sobe.
   O voo do chão até a vaga é um FLIP medido no JS (refreshInit). O título mora na coluna "Entrega" (o tamanho da
   tabela) e, na primeira parte, o JS o amplia até o token --title-fs do núcleo. Tudo sob #cotas. */
#cotas { --c0: 31.5%; --c1: 15.5%; --c2: 12.5%; --c3: 12.5%; --c4: 15.5%; --c5: 12.5%; }
#cotas .ct-stage { isolation: isolate; }

/* ---- fundo: a árvore e o chão sob a luz, desfocados; véu escuro no alto (título) e leve embaixo ---- */
#cotas .ct-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(70% 60% at 50% 72%, #3a2a12, #0d2415 70%); }
#cotas .ct-bgimg { position: absolute; left: -3%; top: -3%; width: 106%; height: 106%; max-width: none; object-fit: cover; object-position: 50% 62%; filter: blur(5px) saturate(1.06); }
#cotas .ct-bg.has-missing .ct-bgimg { display: none; }
#cotas .ct-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 13, 9, .84) 0%, rgba(5, 13, 9, .5) 26%, rgba(5, 13, 9, .12) 52%, rgba(5, 13, 9, .1) 70%, rgba(5, 13, 9, .6) 100%),
    linear-gradient(90deg, rgba(5, 13, 9, .55) 0%, rgba(5, 13, 9, .2) 38%, rgba(5, 13, 9, 0) 60%),
    /* atrás do título grande (1ª parte): as bolas claras do bokeh no alto à esquerda davam 2,7:1 em "ENTREGAS" no 1920 */
    radial-gradient(ellipse 50% 34% at 21% 17%, rgba(5, 13, 9, .66), rgba(5, 13, 9, .3) 62%, rgba(5, 13, 9, 0)); }
/* na tabela o fundo apaga mais (o JS acende este véu) */
#cotas .ct-veil::after { content: ''; position: absolute; inset: 0; opacity: var(--dim, 0); background: rgba(5, 13, 9, .62); }
#cotas .ct-twinkles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#cotas .ct-tw { position: absolute; animation: twinkle 3.6s ease-in-out infinite; }
/* faíscas na árvore, à direita do título grande (que vai até ~55% da largura) e acima do cartão */
#cotas .ct-tw--1 { --size: clamp(12px, 1.2vw, 24px); left: 63%; top: 15%; }
#cotas .ct-tw--2 { --size: clamp(9px, .8vw, 16px); left: 72%; top: 27%; animation-delay: -1.1s; }
#cotas .ct-tw--3 { --size: clamp(10px, 1vw, 20px); left: 81%; top: 12%; animation-delay: -2.3s; }
#cotas .ct-tw--4 { --size: clamp(8px, .7vw, 14px); left: 90%; top: 30%; animation-delay: -.6s; }
.reduced #cotas .ct-tw { animation: none; }
#cotas .ct-credit { position: absolute; z-index: 6; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(8px, 1.4vh, 16px); }

/* ---- a composição final ---- */
#cotas .ct-wrap { position: relative; z-index: 3; height: 100%; display: grid; align-content: center; align-content: safe center; row-gap: clamp(4px, 1vh, 12px);
  padding-top: calc(var(--top-safe) + clamp(12px, 2.2vh, 26px)); padding-bottom: clamp(12px, 2.4vh, 40px); }
#cotas .ct-head { display: grid; grid-template-columns: var(--c0) var(--c1) var(--c2) var(--c3) var(--c4) var(--c5); align-items: end; }
#cotas .ct-titlecell { position: relative; container-type: inline-size; padding-right: 12px; padding-bottom: 2px; }
#cotas .ct-title-wrap { position: relative; transform-origin: 0 0; }
/* título pelo token do núcleo (.ch-title), com o teto da coluna "Entrega": "COTAS E ENTREGAS" (10,35 em) é a linha que
   não quebra; o JS amplia o título até o --title-fs na primeira parte (as cotas) e ele volta à coluna na tabela */
#cotas .ct-title-wrap { font-size: min(var(--title-fs), calc(100cqi / 10.6)); }
#cotas .ct-title { --title-em: 10.6; }
#cotas .ct-t1, #cotas .ct-t2 { display: block; width: fit-content; }
/* a estrela do deck, pequena, depois de "COMERCIAIS" (a linha curta): gira devagar, nunca sobre letra */
#cotas .ct-star { position: absolute; left: 7.05em; top: 1.2em; --size: .78em; --star8-c: #c3171e; --star8-core: #07120d; animation: spin 90s linear infinite; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.reduced #cotas .ct-star { animation: none; }
#cotas .ct-kicker span { display: inline-block; }
#cotas .ct-kicker { position: absolute; left: 0; top: calc(100% + 8px); white-space: nowrap;
  font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: calc((clamp(13px, .42vw + 9px, 16px)) * var(--ts, 1)); color: var(--gold-2); }
/* vaga da caixa pousada: o tamanho do elemento .gift com --size = --dsize */
#cotas .ct-dock { display: grid; justify-items: center; align-items: end; min-width: 0; }
#cotas .ct-spot { display: block; width: calc(var(--dsize) * 1.36); height: calc(var(--dsize) * 1.34); }
#cotas { --dsize: clamp(40px, min(4.3vw, 7.4vh), 104px); }

/* ---- a tabela ---- */
#cotas .ct-tablebox { display: grid; gap: clamp(6px, 1.2vh, 14px); }
#cotas .ct-board { --py: clamp(3px, .8vh, 10px); table-layout: fixed; font-size: calc((clamp(13px, .3vw + 10.4px, 16.5px)) * var(--ts, 1)); line-height: 1.25; }
#cotas .ct-c0 { width: var(--c0); } #cotas .ct-c1 { width: var(--c1); } #cotas .ct-c2 { width: var(--c2); }
#cotas .ct-c3 { width: var(--c3); } #cotas .ct-c4 { width: var(--c4); } #cotas .ct-c5 { width: var(--c5); }
#cotas .ct-board th, #cotas .ct-board td { padding: calc(var(--py) + 1px) clamp(8px, 1vw, 14px) var(--py); }
/* cabeçalho sem "sticky": no palco fixado ele já está no lugar */
#cotas .ct-board thead th { position: relative; top: auto; padding-top: calc(var(--py) + 6px); padding-bottom: calc(var(--py) + 3px); vertical-align: bottom; }
#cotas .ct-board .board__sec > * { padding: calc(var(--py) + 1px) clamp(8px, 1vw, 14px) calc(var(--py) - 1px); }
#cotas .ct-th { display: block; }
#cotas .ct-board .sold { display: table; margin: 0 auto .4em; }
#cotas .ct-board .yes { width: 1.3em; height: 1.15em; }
#cotas .ct-board .yes svg { width: 1.1em; height: 1.1em; max-width: none; }
#cotas .ct-note { max-width: min(90ch, calc(100% - 330px * var(--ts, 1))); }

/* ---- o chão: as cinco caixas ---- */
#cotas .ct-floorwrap { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; top: auto; height: auto; pointer-events: none; padding-bottom: clamp(40px, 6.4vh, 68px); }
#cotas .ct-floor { position: relative; container-type: inline-size; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; }
#cotas .ct-slot { --size: clamp(74px, min(9.2vw, 14.4vh), 230px); display: grid; justify-items: center; row-gap: clamp(4px, .8vh, 10px); }
#cotas .ct-gpos { position: relative; z-index: 1; line-height: 0; transform-origin: 50% 100%; }
#cotas .ct-gbob, #cotas .ct-gdrop { line-height: 0; }
#cotas .ct-namebox { line-height: 0; }
#cotas .ct-name { display: inline-block; padding: 6px 13px 4px; border-radius: 999px; background: rgba(7, 18, 13, .72); box-shadow: inset 0 0 0 1px rgba(233, 162, 75, .32);
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; line-height: 1.15; white-space: nowrap;
  font-size: calc((clamp(13px, .42vw + 9.2px, 17px)) * var(--ts, 1)); color: var(--cream); }

/* o cartão que sobe da caixa: largo (a lista de entregas é a informação de venda), sobre as quatro vagas à venda
   (20–100% do chão: não cobre a etiqueta da cota vendida), no vão entre o título e o chão (--lift, medido no JS);
   a fita desce do cartão até a boca da caixa da cota (--rx = o meio da vaga, na largura do cartão) */
#cotas .ct-cardpos { position: absolute; z-index: 3; left: 20%; right: 0; bottom: calc(100% + var(--lift, calc(var(--size) * .1))); }
#cotas .ct-slot--ouro { --rx: 12.5%; } #cotas .ct-slot--prata { --rx: 37.5%; } #cotas .ct-slot--exp { --rx: 62.5%; }
/* Stand (3 entregas): uma coluna só, no lado da caixa dele (52–100% do chão) */
#cotas .ct-slot--stand { --rx: 79.2%; }
#cotas .ct-slot--stand .ct-cardpos { left: 52%; }
#cotas .ct-cardsink { position: relative; }
#cotas .ct-card { position: relative; padding: calc(clamp(10px, 1.6vh, 18px) + 4px) calc(clamp(16px, 1.5vw, 26px) * var(--ts-screen, 1)) clamp(8px, 1.3vh, 16px); border-radius: 8px; color: var(--ink);
  background: radial-gradient(120% 70% at 30% 0%, #fffaf1, #f6ead3 70%), #f6ead3;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(185, 119, 44, .45); }
/* faixa de cetim dourada no alto do cartão */
#cotas .ct-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 8px 8px 0 0; background: linear-gradient(90deg, #8a5418, #e9a24b 20%, #ffe6b0 50%, #e9a24b 80%, #8a5418); }
/* a ponta de fita que desce até a caixa (atrás do cartão, na frente da caixa) */
#cotas .ct-card::after { content: ''; position: absolute; z-index: -1; left: var(--rx, 50%); top: 100%; width: clamp(7px, calc(var(--size) * .075), 14px); height: calc(var(--lift, calc(var(--size) * .1)) + var(--size) * .42); margin-left: calc(clamp(7px, calc(var(--size) * .075), 14px) / -2);
  background: linear-gradient(90deg, #8a5418, #e9a24b 22%, #ffe6b0 50%, #e9a24b 76%, #8a5418); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
#cotas .ct-card__k { display: block; font-family: var(--f-body); font-weight: 600; letter-spacing: .14em; font-size: calc(13px * var(--ts, 1)); color: #8a5418; line-height: 1.2; }
#cotas .ct-card__h { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; padding-top: .1em; margin-bottom: .3em;
  font-size: calc((clamp(19px, 1.2vw + 5px, 28px)) * var(--ts, 1)); color: var(--wine); }
/* duas colunas (de cima para baixo e depois a segunda), --rows linhas por coluna (no HTML) */
#cotas .ct-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 5), auto); grid-auto-columns: minmax(0, 1fr); column-gap: calc(30px * var(--ts, 1)); }
#cotas .ct-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: .3em 0 .24em; border-top: 1px dashed rgba(185, 119, 44, .38);
  font-size: calc((clamp(15px, .5vw + 9.5px, 18.5px)) * var(--ts, 1)); line-height: 1.28; font-weight: 500; color: var(--ink); }
#cotas .ct-list li b { flex: none; font-family: var(--f-display); font-weight: 700; letter-spacing: .02em; color: var(--wine); white-space: nowrap; padding-top: .1em; }
/* entrega incluída sem quantidade: a estrela dourada no lugar do valor (como o "X" da tabela) */
#cotas .ct-list li:not(:has(b))::after { content: ''; flex: none; align-self: center; width: .95em; height: .95em; background: var(--gold-3);
  -webkit-mask: var(--sparkle-mask) center / contain no-repeat; mask: var(--sparkle-mask) center / contain no-repeat; }
/* a etiqueta da cota vendida */
#cotas .ct-slot--nr .ct-cardpos { left: 10%; right: auto; width: auto; transform: translateX(-50%) rotate(-5deg); bottom: calc(100% + var(--size) * .22); }
#cotas .ct-card--tag { display: grid; justify-items: start; row-gap: .1em; white-space: nowrap; padding: .62em 1.05em .45em 1.9em; border-radius: 6px; line-height: 1.1;
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: calc((clamp(13px, .5vw + 8px, 18px)) * var(--ts, 1)); }
#cotas .ct-card--tag::before { left: .8em; right: auto; top: 50%; width: .5em; height: .5em; margin-top: -.25em; border-radius: 50%; background: var(--pine-3); box-shadow: 0 0 0 3px var(--gold); }
#cotas .ct-tag__sold { color: var(--red); }
#cotas .ct-tag__dot { display: none; }
#cotas .ct-tag__who { color: var(--ink); }

/* ---- telas baixas (1280 × 720, iPad deitado 1180 × 820): tabela mais justa — a tabela inteira e a observação cabem
   com 28 px de folga no pé (o laço da costura do 13 sobe ~11 px) sem empurrar o título para baixo do HUD ---- */
@media (max-height: 860px) {
  #cotas .ct-board { --py: clamp(2px, .46vh, 5px); font-size: calc((clamp(12.5px, .3vw + 10px, 15px)) * var(--ts, 1)); }
  #cotas .ct-board thead th { padding-top: calc(var(--py) + 4px); padding-bottom: calc(var(--py) + 2px); }
  #cotas .ct-wrap { padding-bottom: 28px; }
  #cotas .ct-list li { padding: .16em 0 .12em; }
  #cotas .ct-card__h { margin-bottom: .15em; }
}

/* 1280 × 720: sem a linha fina (o cartão precisa do vão inteiro entre o título e o chão) */
@media (max-height: 760px) { #cotas .ct-kicker { display: none; } }

/* ---- em pé (tablet 1024 × 1366): mais altura, caixas proporcionais à largura ---- */
@media (orientation: portrait) {
  #cotas { --c0: 31%; --c1: 14%; --c2: 12.5%; --c3: 12.5%; --c4: 17.5%; --c5: 12.5%; --dsize: clamp(40px, 6vw, 80px); }
  #cotas .ct-slot { --size: clamp(70px, 12.5vw, 160px); }
  /* em pé o vão entre o título e o chão é alto: cartão com 88% da coluna, uma coluna só, letra maior */
  #cotas .ct-cardpos { left: 6%; right: 6%; }
  #cotas .ct-slot--ouro { --rx: 27.3%; } #cotas .ct-slot--prata { --rx: 50%; } #cotas .ct-slot--exp { --rx: 72.7%; } #cotas .ct-slot--stand { --rx: 95.4%; }
  #cotas .ct-slot--stand .ct-cardpos { left: 6%; }
  #cotas .ct-list { grid-auto-flow: row; grid-template-rows: none; }
  #cotas .ct-list li { font-size: calc(16px * var(--ts, 1)); }
  #cotas .ct-board { --py: 9px; }
}