/* 21 · cotas — "O lugar da sua marca". As quatro cotas como números de peito (Tyvek, alfinetes,
   faixa de chip) lançados no asfalto. Este arquivo descreve o QUADRO FINAL; o JS só anima até ele.
   Tudo sob #cotas. Medidas do peito em cqi (o <li> é o contêiner): nada de vw dentro da grade. */

#cotas .ct-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ---------- chão ---------- */
#cotas .ct-stage { background: #110a13; }
#cotas .ct-bg { position: absolute; inset: 0; background: radial-gradient(90% 80% at 70% 50%, #2a2030 0%, #140c17 70%, var(--ink) 100%); }
#cotas .ct-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; filter: brightness(.44) saturate(.62) contrast(1.06); transform-origin: 62% 50%; }
#cotas .ct-scrim { background: linear-gradient(90deg, rgba(14, 7, 19, .93) 0%, rgba(14, 7, 19, .8) 24%, rgba(14, 7, 19, .34) 44%, rgba(14, 7, 19, 0) 62%); }

/* ---------- composição ---------- */
/* em tela grande a faixa cresce com a ALTURA do quadro (a composição é medida pela altura, nunca por vw) */
#cotas .ct-wrap { max-width: max(1560px, 150svh); position: relative; z-index: 3; height: 100%; display: grid; align-content: center;
  padding-top: calc(var(--hud-h) + clamp(40px, 6vh, 64px)); padding-bottom: clamp(24px, 4.5vh, 52px); }
#cotas .ct-cam { position: absolute; left: var(--gutter); top: calc(var(--hud-h) + clamp(12px, 2.2vh, 22px)); }
#cotas .ct-lay {
  /* altura útil do quadro: a grade dos peitos nunca passa dela (medida pela altura, não pela largura) */
  --avail: calc(100svh - var(--hud-h) - clamp(40px, 6vh, 64px) - clamp(24px, 4.5vh, 52px));
  --bib-ar: 1.3;
  --bgap: clamp(14px, 2.2vh, 26px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto;
  column-gap: var(--gap); row-gap: clamp(18px, 3vh, 32px); align-items: start;
}
#cotas .ct-head { grid-column: 1 / 5; grid-row: 1; align-self: start; container-type: inline-size; display: grid; justify-items: start; gap: clamp(14px, 2vh, 22px); padding-top: 4px; }
#cotas .ct-title { font-size: calc((clamp(48px, 23cqi, 136px)) * var(--ts, 1)); line-height: 1.12; text-wrap: balance; color: var(--offwhite); }
#cotas .ct-notes { grid-column: 1 / 5; grid-row: 2; align-self: end; display: grid; gap: 10px; max-width: 46ch; }
#cotas .ct-notes .footnote { font-size: calc((clamp(13px, .25vw + 10px, 15px)) * var(--ts, 1)); line-height: 1.5; color: var(--text-2); padding-left: 14px; border-left: 2px solid var(--honey); text-wrap: pretty; }
#cotas .ct-notes .footnote + .footnote { border-left-color: var(--acai-light); }

#cotas .ct-bibs {
  grid-column: 5 / 13; grid-row: 1 / span 2; align-self: center; justify-self: end; position: relative;
  width: 100%; max-width: calc(var(--bib-ar) * (var(--avail) - var(--bgap)) + var(--bgap));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bgap);
}

/* ---------- o número de peito ---------- */
#cotas .ct-bib { position: relative; container-type: inline-size; --lift: 0; }
#cotas .ct-bib__rot { position: relative; rotate: var(--rot, 0deg); }
#cotas .ct-bib:hover { z-index: 2; }
#cotas .ct-bib__shake, #cotas .ct-bib__tilt { position: relative; }
#cotas .ct-bib__tilt { transform-style: preserve-3d; will-change: transform; }
#cotas .ct-bib__paper {
  position: relative; aspect-ratio: var(--bib-ar, 1.3); display: flex; flex-direction: column; align-items: flex-start;
  padding: 4.6cqi 8cqi 7.4cqi; border-radius: 1.6cqi; color: var(--ink-text); overflow: hidden;
  background:
    /* dobra horizontal da entrega do kit: aresta clara em cima, sombra embaixo */
    linear-gradient(177.2deg, rgba(255, 255, 255, 0) 0 47.6%, rgba(255, 255, 255, .72) 48.3%, rgba(60, 38, 70, .16) 49.1%, rgba(60, 38, 70, .05) 53%, rgba(60, 38, 70, 0) 60%),
    /* luz de cima e curvatura do papel */
    radial-gradient(120% 90% at 16% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 58%),
    linear-gradient(162deg, rgba(40, 20, 48, 0) 52%, rgba(40, 20, 48, .1) 100%),
    /* fibra do Tyvek: nuvens alongadas, bem leves */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014 .05' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .28 0 0 0 0 .36 0 0 0 -2.2 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)' opacity='.3'/%3E%3C/svg%3E") 0 0 / 100% 100%,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .22 0 0 0 -1.6 .95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E") 0 0 / 140px 140px,
    #f2ede3;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 0 0 1px rgba(40, 20, 48, .06),
    0 2px 3px rgba(0, 0, 0, .5),
    0 calc(16px + var(--lift) * 44px) calc(34px + var(--lift) * 56px) rgba(0, 0, 0, calc(.58 - var(--lift) * .22));
}
/* reflexo do hover (acompanha o ponteiro) */
#cotas .ct-bib__paper::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(60% 70% at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 70%); mix-blend-mode: soft-light; }
#cotas .ct-bib__tilt.is-hover .ct-bib__paper::after { opacity: 1; }

/* faixa do topo = chip de cronometragem: açaí com fio mel; nas cotas abertas acende em mel */
#cotas .ct-bib__band { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: space-between;
  height: 9.6cqi; margin: 0 -8cqi; padding: 0 14cqi; background: var(--acai); color: var(--offwhite);
  font-family: var(--f-mono); font-weight: 700; font-size: calc(2.9cqi * var(--ts, 1)); letter-spacing: .2em; box-shadow: inset 0 -.9cqi 0 var(--honey); }
#cotas .ct-bib__flag { width: 13cqi; height: 4.4cqi; opacity: .9;
  background: repeating-conic-gradient(currentColor 0 25%, transparent 0 50%) 0 0 / 2.2cqi 2.2cqi; }
#cotas .ct-bib__lit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 14cqi;
  background: var(--honey); color: var(--acai-dark); font: inherit; letter-spacing: inherit; box-shadow: inset 0 -.9cqi 0 var(--acai); }

#cotas .ct-bib__num { position: relative; z-index: 1; margin-top: 3cqi; font-family: var(--f-display); font-style: italic; font-weight: 900;
  font-size: calc(28cqi * var(--ts, 1)); line-height: .86; letter-spacing: -.02em; color: var(--acai-dark); font-variant-numeric: tabular-nums; padding-right: .04em; }
#cotas .ct-bib__name { position: relative; z-index: 1; margin-top: 1.6cqi; font-family: var(--f-display); font-style: italic; font-weight: 900;
  text-transform: uppercase; font-size: calc(8.2cqi * var(--ts, 1)); line-height: 1.12; letter-spacing: .005em; color: var(--acai); padding-top: .06em; }
#cotas .ct-bib__desc { position: relative; z-index: 1; margin-top: auto; padding-top: 2.4cqi; max-width: 30ch; font-size: calc((clamp(13px, 3.9cqi, 18px)) * var(--ts, 1)); line-height: 1.38; color: var(--ink-text-2); font-weight: 500; text-wrap: balance; }

/* vendido: o papel perde um tom (a atenção vai para as cotas abertas) */
#cotas .ct-bib__dim { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: rgba(40, 24, 48, .1); }

/* carimbo VENDIDO: borda dupla, tinta signal, levemente irregular, girado */
#cotas .ct-stamp { position: absolute; z-index: 5; right: 6cqi; top: 22cqi; width: 50cqi; rotate: -11deg; mix-blend-mode: multiply; pointer-events: none; }
#cotas .ct-bib[data-cota="apresenta"] .ct-stamp { rotate: -7deg; top: 21cqi; right: 7cqi; }
#cotas .ct-stamp__ink { width: 100%; height: auto; overflow: visible; color: var(--signal); opacity: .95; }
#cotas .ct-stamp rect { fill: none; stroke: currentColor; stroke-width: 7; }
#cotas .ct-stamp .ct-stamp__in { stroke-width: 2.6; }
#cotas .ct-stamp text { fill: currentColor; text-anchor: middle; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc(74px * var(--ts, 1)); letter-spacing: 4px; }

/* selo mel das cotas disponíveis */
#cotas .ct-seal { position: absolute; z-index: 5; right: 6cqi; top: 22cqi; display: inline-flex; align-items: center; gap: 1.8cqi;
  padding: 1.5cqi 3.4cqi 1.2cqi; font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: calc(4.6cqi * var(--ts, 1)); line-height: 1.1; letter-spacing: .02em;
  color: var(--acai-dark); background: var(--honey); white-space: nowrap;
  clip-path: polygon(1.6cqi 0, 100% 0, calc(100% - 1.6cqi) 100%, 0 100%); }
#cotas .ct-seal i { width: 2cqi; height: 2cqi; border-radius: 50%; background: var(--acai-dark); box-shadow: 0 0 0 .7cqi rgba(40, 5, 50, .18); animation: live 1.6s ease-in-out infinite; }
#cotas .ct-bib__glow { position: absolute; inset: -3px; z-index: -1; border-radius: calc(1.6cqi + 3px); pointer-events: none;
  box-shadow: 0 0 0 2px var(--honey), 0 0 38px 6px rgba(244, 178, 35, .38), 0 0 90px 10px rgba(244, 178, 35, .16); }

/* alfinetes nos quatro cantos (o furo e a haste passam por baixo do papel) */
#cotas .ct-pin { position: absolute; z-index: 5; width: 17cqi; height: 5.1cqi; overflow: visible; pointer-events: none; filter: drop-shadow(0 .5cqi .35cqi rgba(20, 10, 24, .45)); }
#cotas .ct-pin--tl { left: -.6cqi; top: 4.2cqi; rotate: -34deg; }
#cotas .ct-pin--tr { right: -.6cqi; top: 4.2cqi; rotate: 34deg; scale: -1 1; }
#cotas .ct-pin--bl { left: -.6cqi; bottom: 2.4cqi; rotate: 32deg; }
#cotas .ct-pin--br { right: -.6cqi; bottom: 2.4cqi; rotate: -32deg; scale: -1 1; }

/* ---------- tablet em pé e janelas estreitas: título em cima, peitos 2×2 grandes, notas embaixo ---------- */
@media (max-aspect-ratio: 1/1), (max-width: 980px) {
  #cotas .ct-wrap { align-content: center; }
  #cotas .ct-lay { grid-template-rows: auto auto auto; row-gap: clamp(22px, 3vh, 40px); }
  #cotas .ct-head { grid-column: 1 / -1; grid-row: 1; grid-template-columns: auto 1fr; align-items: end; column-gap: 24px; }
  #cotas .ct-title { font-size: calc((clamp(46px, 9cqi, 104px)) * var(--ts, 1)); }
  #cotas .ct-sub { padding-bottom: .5em; }
  #cotas .ct-bibs { grid-column: 1 / -1; grid-row: 2; max-width: none; justify-self: stretch; }
  #cotas .ct-notes { grid-column: 1 / -1; grid-row: 3; max-width: 72ch; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 900px) {
  #cotas .ct-head { grid-template-columns: 1fr; }
}

/* ---------- movimento reduzido ---------- */
.reduced #cotas .ct-seal i { animation: none; }