/* 20 · Cotas de patrocínio — crepúsculo, cena fixada. À esquerda o texto (dois passos no mesmo lugar);
   à direita a hierarquia das cinco cotas (placas em escala decrescente) e, depois, a demonstração ao vivo:
   o nome do evento com a marca (Naming Rights) e a marca assinando o evento (Apresenta). Fundo gráfico
   (céu do crepúsculo, sol se pondo atrás dos morros do continente): nenhuma foto, nenhum véu necessário.
   Movimento reduzido: sem troca no mesmo lugar — as duas metades empilhadas, ambas visíveis. */
#cotas .cot-stage { background: #0b1a25; }
#cotas .cot-sky { position: absolute; inset: 0;
  background:
    radial-gradient(60% 46% at 76% 88%, rgba(255, 200, 138, .34), rgba(242, 151, 109, .12) 46%, transparent 72%),
    linear-gradient(180deg, #07121a 0%, #0c1e2a 30%, #16303f 52%, #3a3a48 68%, #7c4a3f 80%, #c0653f 86.6%, #d8804f 88%); }
/* o horizonte (--hz, a partir de baixo): o sol se põe atrás do continente, a oeste da arena. A silhueta dos morros
   (.cot-land, 4/3 de --hz de altura) cobre a metade de baixo do sol; o contorno só acende perto dele. */
#cotas { --hz: 12%; --land: 16%; }
#cotas .cot-sunbox { position: absolute; left: 0; right: 0; bottom: var(--hz); height: 0; pointer-events: none; }
#cotas .cot-sun { --sun-size: clamp(180px, 30vmin, 420px); left: 76%; bottom: 0; margin-left: calc(var(--sun-size) / -2); margin-bottom: calc(var(--sun-size) / -2); opacity: .92; will-change: transform; }
#cotas .cot-land { position: absolute; left: 0; bottom: 0; width: 100%; max-width: none; height: var(--land); display: block; pointer-events: none; }

#cotas .cot-wrap { position: relative; z-index: 2; }
#cotas .cot-lay { height: 100%; align-items: center; padding-top: calc(var(--hud-h) + clamp(14px, 3vh, 36px)); padding-bottom: clamp(52px, 8.6vh, 96px); }

/* ---------- coluna do texto ---------- */
#cotas .cot-copy { display: grid; }
#cotas .cot-step { grid-area: 1 / 1; align-self: center; }
#cotas .cot-step--b { visibility: hidden; opacity: 0; }
#cotas .cot-title { font-size: calc((clamp(30px, 3.1vw, 44px)) * var(--ts, 1)); }
#cotas .cot-lede { max-width: 30ch; }

/* campo "Veja com a sua marca" */
#cotas .cot-try { display: grid; gap: 10px; margin-top: clamp(4px, 1vh, 12px); max-width: 30em; }
#cotas .cot-try__l { font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: calc((clamp(12px, .42vw + 8.6px, 15px)) * var(--ts, 1)); letter-spacing: .14em; text-transform: uppercase; color: var(--sun); }
#cotas .cot-try__row { display: flex; gap: 10px; }
#cotas .cot-try__in { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: rgba(244, 239, 229, .08); box-shadow: inset 0 0 0 1.5px rgba(244, 239, 229, .32); color: var(--sand); font-family: var(--f-body); font-weight: 500; font-size: calc(17px * var(--ts, 1)); letter-spacing: .01em; transition: box-shadow .25s, background .25s; }
#cotas .cot-try__in::placeholder { color: rgba(244, 239, 229, .55); }
#cotas .cot-try__in:hover { box-shadow: inset 0 0 0 1.5px rgba(242, 151, 109, .6); }
#cotas .cot-try__in:focus { outline: none; background: rgba(244, 239, 229, .12); box-shadow: inset 0 0 0 2px var(--sun), 0 0 0 4px rgba(242, 151, 109, .18); }
#cotas .cot-try__go { flex: none; padding: 0 24px; }
#cotas .cot-try__hint { font-size: calc(14px * var(--ts, 1)); line-height: 1.45; color: var(--text-2); } /* text-3: 4,1:1 a 1280 */

/* ---------- coluna da cena ---------- */
#cotas .cot-scene { display: grid; align-self: center; }
#cotas .cot-tiers, #cotas .cot-demo { grid-area: 1 / 1; align-self: center; }

/* a hierarquia: cinco placas, a escala desce com a cota */
#cotas .cot-tiers { display: grid; gap: clamp(8px, 1.3vh, 14px); }
#cotas .cot-tier { --k: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(14px, 1.4vw, 24px); row-gap: 2px; align-items: baseline; padding: calc(clamp(12px, 1.8vh, 24px) * var(--k)) clamp(18px, 1.8vw, 30px); }
#cotas .cot-tier__n { grid-row: 1 / span 2; align-self: center; font-family: var(--f-mono); font-weight: 700; font-size: calc(12px * var(--ts, 1)); letter-spacing: .12em; opacity: .72; }
#cotas .cot-tier__t { font-family: var(--f-display); font-stretch: 122%; font-weight: 900; text-transform: uppercase; line-height: 1.02; letter-spacing: -.01em; font-size: calc((clamp(19px, 1.7vw, 32px)) * var(--k) * var(--ts, 1)); }
#cotas .cot-tier__d { font-size: calc((clamp(14px, .45vw + 10px, 18px)) * var(--ts, 1)); line-height: 1.35; color: var(--text-2); }
#cotas .cot-tier--1 { --k: 1.42; }
#cotas .cot-tier--2 { --k: 1.2; }
#cotas .cot-tier--3 { --k: 1.02; }
#cotas .cot-tier--4 { --k: .9; }
#cotas .cot-tier--5 { --k: .82; }
#cotas .cot-tier--1 .cot-tier__d { color: rgba(16, 38, 51, .82); font-weight: 500; }
/* o número nas placas de cor fica cheio (a .72 caía abaixo de AA: 4,1 no pêssego e 3,7 no terracota) */
#cotas .cot-tier--1 .cot-tier__n, #cotas .cot-tier--2 .cot-tier__n { opacity: 1; }
#cotas .cot-tier--2 .cot-tier__d { color: rgba(244, 239, 229, .9); }
#cotas .cot-tier--1 .cot-tier__d, #cotas .cot-tier--2 .cot-tier__d { font-size: calc((clamp(15px, .5vw + 10px, 19px)) * var(--ts, 1)); }

/* a demonstração: o nome do evento com a marca */
#cotas .cot-demo { display: grid; gap: clamp(12px, 2vh, 22px); visibility: hidden; opacity: 0; }
#cotas .cot-lock { display: grid; gap: clamp(12px, 2.2vh, 24px); padding: clamp(18px, 3vh, 36px) clamp(20px, 2.2vw, 38px); }
#cotas .cot-lock__k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
#cotas .cot-lock__pos { font-family: var(--f-body); font-weight: 500; font-size: calc((clamp(15px, .45vw + 10px, 18px)) * var(--ts, 1)); line-height: 1.3; color: var(--text-2); }
#cotas .cot-mark { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(14px, 1.6vw, 26px); }
#cotas .cot-mark__em { width: clamp(56px, 6.4vw, 118px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .4)); }
#cotas .cot-mark__name { display: grid; grid-template-columns: minmax(0, 1fr); container-type: inline-size; font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; line-height: 1.02; letter-spacing: -.015em; color: var(--sand); }
#cotas .cot-mark__l1 { font-size: min(calc(5.5cqi * var(--ts, 1)), 6.05cqi); white-space: nowrap; }
#cotas .cot-mark__l2 { font-size: min(calc(4.3cqi * var(--ts, 1)), 4.73cqi); white-space: nowrap; color: var(--text-2); margin-top: .1em; }
/* a marca (Naming Rights): o momento-assinatura — a maior linha do letreiro */
#cotas .cot-mark__brand { display: block; margin-top: .2em; font-size: min(calc(7.6cqi * var(--ts, 1)), 8.36cqi); color: var(--sun); }
/* o Apresenta é visivelmente secundário: cartão mais baixo, letreiro a ~0,8 */
#cotas .cot-lock--apresenta { padding-block: clamp(14px, 2.2vh, 26px); gap: clamp(10px, 1.6vh, 18px); }
#cotas .cot-lock--apresenta .cot-mark__em { width: clamp(46px, 5vw, 92px); }
#cotas .cot-lock--apresenta .cot-mark__l1 { font-size: min(calc(4.5cqi * var(--ts, 1)), 4.95cqi); }
#cotas .cot-lock--apresenta .cot-mark__l2 { font-size: min(calc(3.5cqi * var(--ts, 1)), 3.85cqi); }
#cotas .cot-lock--apresenta .cot-mark__pre { font-size: min(calc(3.2cqi * var(--ts, 1)), 3.52cqi); }
#cotas .cot-mark__pre { display: block; margin-bottom: .34em; font-size: min(calc(3.6cqi * var(--ts, 1)), 3.96cqi); }
#cotas .cot-mark__pre [data-brand] { color: var(--sun); }
#cotas .cot-mark__ap { font-stretch: 112%; font-weight: 700; letter-spacing: .06em; color: var(--text-2); }
/* o nome da marca cabe na linha: o JS reduz a letra (medida só quando a marca ou a largura mudam) */
#cotas .cot-fit { display: inline-block; white-space: nowrap; padding-top: .06em; }
#cotas .cot-fit.is-wrap { white-space: normal; text-wrap: balance; overflow-wrap: anywhere; }
/* sem marca digitada: "SUA MARCA" num encaixe tracejado, como uma área de marca a preencher */
#cotas .cot-mark__brand .cot-fit { position: relative; }
html:not(.has-brand) #cotas .cot-mark__brand .cot-fit { padding: .12em .3em .06em; margin-left: -.3em; border-radius: .16em; box-shadow: inset 0 0 0 2px rgba(242, 151, 109, .55); background: rgba(242, 151, 109, .08); }

#cotas .cot-foot { position: absolute; z-index: 2; left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(16px, 3vh, 30px); max-width: min(96ch, 72%); color: var(--text-2); }

.is-tablet #cotas .cot-lock, .is-tablet #cotas .cot-tier { backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (orientation: portrait) {
  #cotas .cot-lay { align-content: center; row-gap: clamp(20px, 3vh, 40px); }
  #cotas .cot-copy, #cotas .cot-scene { --span: 1 / -1; }
  #cotas .cot-lede { max-width: 40ch; }
  /* em pé a coluna é a tela inteira: título e placas medidos por ela (o piso em vw deixava tudo pequeno) */
  #cotas .cot-title { font-size: calc((clamp(40px, 5.8vw, 64px)) * var(--ts, 1)); }
  #cotas .cot-tiers { container-type: inline-size; }
  #cotas .cot-tier__t { font-size: min(calc(3.4cqi * var(--k) * var(--ts, 1)), calc(3.74cqi * var(--k))); }
  #cotas .cot-tier__d, #cotas .cot-tier--1 .cot-tier__d, #cotas .cot-tier--2 .cot-tier__d { font-size: max(calc(18px * var(--ts, 1)), min(calc(2cqi * var(--ts, 1)), 2.2cqi)); }
  #cotas .cot-tier__n { font-size: calc(14px * var(--ts, 1)); }
  #cotas .cot-mark__em { width: clamp(64px, 10vw, 128px); }
}

/* ---------- movimento reduzido: sem pin, sem troca no mesmo lugar ----------
   A timeline salta para o fim; se a troca continuasse montada, as cinco cotas nunca apareceriam.
   Aqui as duas metades ficam empilhadas (cotas em cima, demonstração embaixo), ambas no estado final. */
.reduced #cotas { --hz: 12svh; --land: 16svh; }
.reduced #cotas .cot-stage { height: auto; min-height: 100svh; background: #07121a; }
.reduced #cotas .cot-sky { inset: auto 0 0 0; height: 100svh; }
.reduced #cotas .cot-lay { height: auto; align-items: start; row-gap: clamp(56px, 10vh, 120px); padding-bottom: calc(var(--land) + clamp(40px, 6vh, 72px)); }
.reduced #cotas .cot-copy, .reduced #cotas .cot-scene { display: contents; }
.reduced #cotas .cot-step, .reduced #cotas .cot-tiers, .reduced #cotas .cot-demo { grid-area: auto; align-self: center; }
.reduced #cotas .cot-step--a { grid-column: 1 / 6; grid-row: 1; }
.reduced #cotas .cot-tiers { grid-column: 6 / 13; grid-row: 1; }
.reduced #cotas .cot-step--b { grid-column: 1 / 6; grid-row: 2; visibility: visible; opacity: 1; }
.reduced #cotas .cot-demo { grid-column: 6 / 13; grid-row: 2; visibility: visible; opacity: 1; }
/* deitado: cada metade ocupa uma tela inteira. A segunda parada (o fim do capítulo) mostra só a demonstração,
   sem o rabo das cotas cortado pelo HUD; a primeira, só as cotas, centradas abaixo do HUD. */
@media (orientation: landscape) {
  .reduced #cotas .cot-lay { --cot-pt: calc(var(--hud-h) + clamp(14px, 3vh, 36px)); --cot-pb: calc(var(--land) + clamp(40px, 6vh, 72px));
    padding-top: var(--cot-pt); padding-bottom: var(--cot-pb); row-gap: var(--cot-pt);
    grid-template-rows: minmax(calc(100svh - var(--cot-pt)), auto) minmax(calc(100svh - var(--cot-pt) - var(--cot-pb)), auto); }
}
@media (orientation: portrait) {
  .reduced #cotas .cot-step--a, .reduced #cotas .cot-tiers, .reduced #cotas .cot-step--b, .reduced #cotas .cot-demo { grid-column: 1 / -1; }
  .reduced #cotas .cot-tiers { grid-row: 2; }
  .reduced #cotas .cot-step--b { grid-row: 3; margin-top: clamp(24px, 4vh, 56px); }
  .reduced #cotas .cot-demo { grid-row: 4; }
}