/* 19 · Experiências e ativações — pôr do sol. Galeria horizontal fixada: primeiro o "menu" (a tabela do
   slide inteira, sobre o céu do poente), depois as sete ativações em tela cheia, varridas pela rolagem, cada
   uma com a marca impressa quando chega. O texto de cada ativação fica no lado livre da foto (os painéis da
   marca nunca ficam sob o texto), sempre com véu do tamanho do bloco. No trilho de baixo, numa placa só: a
   marca, a bola que salta em arco de ativação em ativação e o contador. */
#ativacoes .atv-stage { background: #0a1822; }
#ativacoes .atv-track { position: absolute; left: 0; top: 0; height: 100%; width: 800%; display: flex; }
#ativacoes .atv-panel { position: relative; flex: none; width: 12.5%; height: 100%; overflow: hidden; }

/* 0 · menu sobre o poente */
#ativacoes .atv-sky { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(56% 40% at 70% 74%, rgba(255, 176, 120, .42), rgba(203, 87, 45, .16) 56%, transparent 78%),
    linear-gradient(180deg, #0a1822 0%, #0f2232 20%, #262a3e 38%, #563a46 52%, #9a4e3c 64%, #d06d42 72%, #e78a55 74.6%); }
#ativacoes .atv-sunbox { position: absolute; left: 70%; top: 74.6%; width: 0; height: 0; pointer-events: none; }
#ativacoes .atv-sun { --sun-size: 38vmin; --alt: sin(calc(var(--sun-f, .95) * 180deg)); left: 0; top: 0;
  transform: translate(-50%, -50%) translateY(calc(max(var(--alt), -.3) * -52vh)); transition: transform .6s linear; }
#ativacoes .atv-sea { position: absolute; left: 0; right: 0; top: 74.6%; bottom: 0; pointer-events: none;
  background: linear-gradient(180deg, #3a3039 0%, #1a2331 22%, #0d1b26 60%, #0a1822 100%); box-shadow: 0 -1px 0 rgba(255, 190, 130, .55); }
#ativacoes .atv-iwrap { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-content: center; row-gap: clamp(18px, 3.4vh, 38px); padding-top: calc(var(--hud-h) + clamp(12px, 2.4vh, 28px)); padding-bottom: calc(var(--atv-rail) + clamp(6px, 1.4vh, 16px)); }
#ativacoes .atv-head { grid-column: 1 / 9; display: grid; gap: clamp(8px, 1.2vh, 12px); container-type: inline-size; }
#ativacoes .atv-title { display: grid; font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; line-height: 1.06; letter-spacing: -.012em; color: var(--sand); padding-top: .05em; }
#ativacoes .atv-title span:first-child { font-size: min(calc(7.6cqi * var(--ts, 1)), 8.36cqi); }
#ativacoes .atv-title span:last-child { font-size: min(calc(5cqi * var(--ts, 1)), 5.5cqi); color: var(--sun); letter-spacing: 0; margin-top: .08em; }
#ativacoes .atv-board { grid-column: 1 / 10; box-shadow: var(--shadow-1); background: rgba(10, 24, 34, .9); }
#ativacoes .atv-board th, #ativacoes .atv-board td { padding: clamp(7px, 1.3vh, 13px) clamp(12px, 1.3vw, 18px); vertical-align: middle; }
#ativacoes .atv-board thead th { position: static; }
#ativacoes .atv-board td:first-child { white-space: nowrap; font-family: var(--f-display); font-stretch: 112%; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  font-size: calc((clamp(14.6px, .4vw + 10.4px, 18px)) * var(--ts, 1)); color: var(--sand); }
/* nomes e descrições no mesmo corpo, ≥ 16 px já em 1280 (eram 15,5 e 15,4); o número no círculo (.8 em) fica ≥ 13,2 */
#ativacoes .atv-board td:last-child { color: var(--text-2); font-size: calc((clamp(14.6px, .4vw + 10.4px, 18px)) * var(--ts, 1)); }
#ativacoes .atv-board tr:last-child td { border-bottom: 0; }
#ativacoes .atv-bn { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; margin-right: .8em; border-radius: 50%; font-family: var(--f-mono); font-size: .8em; font-weight: 700; letter-spacing: 0;
  color: var(--sun); box-shadow: inset 0 0 0 1.5px rgba(242, 151, 109, .5); vertical-align: middle; }

/* 1…7 · as ativações em tela cheia. A câmera é 20% mais larga que o quadro (folga da paralaxe). */
#ativacoes .atv-cam { position: absolute; top: 0; bottom: 0; left: -10%; right: -10%; container-type: size; background: #3b3a40; }
#ativacoes .atv-mock { --W: calc(max(100cqw, 100cqh * var(--mock-ar, 16 / 9)) * var(--z, 1)); --H: calc(var(--W) / (var(--mock-ar, 16 / 9)));
  position: absolute; width: var(--W); height: auto; max-width: none;
  left: clamp(100cqw - var(--W), 50cqw - var(--fx, .5) * var(--W), 0px);
  top: clamp(100cqh - var(--H), 50cqh - var(--fy, .5) * var(--H), 0px); }
#ativacoes .atv-mock > img { color: transparent; }
/* a máscara do painel é PNG em tons de cinza (sem alfa): sem mask-mode luminance o navegador lê o alfa (todo
   opaco) e a tinta passava por cima de quem está na frente da placa. Ver core_requests. */
#ativacoes .mock__ink { -webkit-mask-mode: luminance; mask-mode: luminance; }
/* impressão da marca: o núcleo calcula o corpo supondo ~0,83 em por letra, mas a Archivo 125% ocupa 0,88 —
   "SUA MARCA" passava 6% da placa e era cortado. Na largura 100% (0,72 em) cabe com folga (ver core_requests). */
#ativacoes .mock__panel { font-stretch: 100%; letter-spacing: 0; }
/* hidratação: uma impressão só na testeira, alinhada à esquerda e medida para acabar antes do véu do texto
   (o JS calcula a largura livre; nome longo quebra em duas linhas) */
#ativacoes .mock__panel.is-left { justify-content: flex-start; padding-left: 5%; }
#ativacoes .mock__panel .is-2l { white-space: pre; line-height: .94; text-align: left; }

/* véu de cima só sobre as fotos: a marca do evento no HUD ("de Vôlei de Praia · 2027", pêssego de 13,2 px) caía a
   1,7–2,4:1 sobre a lona e o céu claros (o véu do HUD vai de .86 a .42 e some em 94 px). ~2,2 HUDs de altura
   (141 px; 185 no projetor), escuro onde está a letra do HUD e sumindo antes das placas da marca. */
#ativacoes .atv-slide::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--hud-h) * 2.2); z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 24, 34, .78) 0%, rgba(10, 24, 34, .7) 40%, rgba(10, 24, 34, .36) 64%, rgba(10, 24, 34, .1) 84%, rgba(10, 24, 34, 0)); }

#ativacoes .atv-txt { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end;
  padding-top: calc(var(--hud-h) + clamp(18px, 4vh, 44px)); padding-bottom: calc(var(--atv-rail) + clamp(10px, 2vh, 24px)); }
#ativacoes .atv-block { position: relative; grid-column: 1 / 7; display: grid; gap: clamp(8px, 1.3vh, 14px); container-type: inline-size;
  --vf: calc(150px * var(--ts, 1)); --vfy: calc(170px * var(--ts, 1)); --veil: rgba(10, 24, 34, .9); }
/* véu: uma sombra que cobre o bloco inteiro e vai até a borda da tela do lado do texto, com borda suave para
   dentro da foto (o radial de canto enfraquecia justo onde o bloco começa). Medido: rótulo ≥ 4,5 e corpo ≥ 3
   nas sete paradas. As placas da marca ficam fora dele (o texto mora no lado livre da foto). */
#ativacoes .atv-block::before { content: ''; position: absolute; z-index: -1; pointer-events: none;
  --fade-x: linear-gradient(var(--vdir), rgba(10, 24, 34, 0) 0, rgba(10, 24, 34, .1) calc(var(--vf) * .2), rgba(10, 24, 34, .36) calc(var(--vf) * .42),
    rgba(10, 24, 34, .66) calc(var(--vf) * .64), rgba(10, 24, 34, .84) calc(var(--vf) * .84), var(--veil) var(--vf));
  --fade-y: linear-gradient(var(--vdiry), transparent 0, rgba(0, 0, 0, .1) calc(var(--vfy) * .2), rgba(0, 0, 0, .38) calc(var(--vfy) * .42),
    rgba(0, 0, 0, .7) calc(var(--vfy) * .64), rgba(0, 0, 0, .92) calc(var(--vfy) * .84), #000 var(--vfy));
  background: var(--fade-x); -webkit-mask-image: var(--fade-y); mask-image: var(--fade-y); }
#ativacoes .atv-slide--l .atv-block::before { left: -50vw; right: calc(-1 * var(--vf)); top: calc(-1 * var(--vfy)); bottom: -50vh; --vdir: 270deg; --vdiry: 180deg; }
#ativacoes .atv-slide--tl .atv-block::before { left: -50vw; right: calc(-1 * var(--vf)); top: -50vh; bottom: calc(-1 * var(--vfy)); --vdir: 270deg; --vdiry: 0deg; }
#ativacoes .atv-slide--r .atv-block::before { left: calc(-1 * var(--vf)); right: -50vw; top: calc(-1 * var(--vfy)); bottom: -50vh; --vdir: 90deg; --vdiry: 180deg; }
#ativacoes .atv-slide--tr .atv-block::before { left: calc(-1 * var(--vf)); right: -50vw; top: -50vh; bottom: calc(-1 * var(--vfy)); --vdir: 90deg; --vdiry: 0deg; }
#ativacoes .atv-slide--r .atv-block, #ativacoes .atv-slide--tr .atv-block { grid-column: 7 / 13; }
#ativacoes .atv-slide--tl .atv-txt, #ativacoes .atv-slide--tr .atv-txt { align-items: start; }
#ativacoes .atv-num { display: flex; align-items: center; gap: 14px; }
#ativacoes .atv-num i { flex: 1; max-width: 120px; height: 1px; background: linear-gradient(90deg, var(--sun), rgba(242, 151, 109, 0)); transform-origin: 0 50%; }
/* o nome: a palavra mais longa (EXPERIMENTAÇÃO, 12,3 em) cabe na coluna */
#ativacoes .atv-name { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; line-height: 1.08; letter-spacing: -.01em; color: var(--sand);
  font-size: min(calc(min(7cqi, 8.4vh) * var(--ts, 1)), 7.7cqi); padding-top: .05em; text-wrap: balance; text-shadow: 0 2px 20px rgba(10, 24, 34, .55); }
#ativacoes .atv-k { margin-top: clamp(4px, 1vh, 10px); }
#ativacoes .atv-exp { font-size: calc((clamp(19px, .9vw + 10px, 25px)) * var(--ts, 1)); line-height: 1.4; color: var(--sand); max-width: 26ch; text-wrap: pretty; text-shadow: 0 1px 12px rgba(10, 24, 34, .6); }
#ativacoes .atv-cr { justify-self: start; margin-top: clamp(2px, .6vh, 8px); }

/* o trilho: placa compacta embaixo à direita — a marca (cápsula), as sete marcas com a bola saltando de uma
   para a outra e o contador. Nada voa por cima da foto. */
#ativacoes { --atv-rail: clamp(70px, 10vh, 96px); }
#ativacoes .atv-rail { position: absolute; left: 0; right: 0; bottom: 0; height: var(--atv-rail); z-index: 5; pointer-events: none; }
#ativacoes .atv-rwrap { height: 100%; display: flex; align-items: flex-end; justify-content: flex-end; padding-bottom: clamp(14px, 2.4vh, 24px); }
#ativacoes .atv-meter { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 20px); padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(10, 24, 34, .8); box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px rgba(0, 0, 0, .3); }
#ativacoes .atv-path { position: relative; width: clamp(180px, 16vw, 250px); height: 16px; }
#ativacoes .atv-dots { position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; overflow: visible; }
#ativacoes .atv-arc { fill: none; stroke: url(#g-arc); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 7; vector-effect: non-scaling-stroke; opacity: .9; }
#ativacoes .atv-ticks { position: absolute; left: 0; right: 0; bottom: 4px; height: 8px; display: flex; justify-content: space-between; }
#ativacoes .atv-ticks li { width: 8px; height: 8px; border-radius: 50%; background: rgba(244, 239, 229, .32); transition: background .4s, box-shadow .4s; }
#ativacoes .atv-ticks li.is-done { background: var(--sun); }
#ativacoes .atv-ticks li.is-on { background: var(--flare); box-shadow: 0 0 0 4px rgba(242, 151, 109, .28), 0 0 12px rgba(255, 200, 138, .7); }
#ativacoes .atv-rider { position: absolute; left: 0; bottom: 8px; width: 0; height: 0; opacity: 0; will-change: transform; }
#ativacoes .atv-ball { --ball: 20px; max-width: none; position: absolute; left: -10px; bottom: 6px; } /* max-width: none — o svg { max-width: 100% } do núcleo zerava a bola dentro do .atv-rider de largura 0 */
@media (max-resolution: 1.49dppx) { #ativacoes .atv-ball { --ball-word: 0; } } /* 20 px na tela 1×: o nome da Mikasa não sai legível, fica o traço */
/* a marca na placa: sempre UMA linha (quebrada, o nome longo do ?marca= virava bloco de 4 linhas que estourava a
   placa e entrava na trilha). A cápsula tem teto de largura (não estica a placa por cima da impressão no balcão ou
   na moldura) e altura fixa; o JS encolhe a letra do nome até caber (piso = letra do crédito) e, abaixo do piso,
   corta no fim de uma palavra com reticências. */
#ativacoes .atv-brand { flex: none; display: flex; align-items: center; justify-content: center; max-width: 19em; min-height: 1.92em; overflow: hidden; }
#ativacoes .atv-brand__t { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ativacoes .atv-count { display: flex; align-items: baseline; font-family: var(--f-mono); font-weight: 700; letter-spacing: .02em; color: var(--text-2); font-variant-numeric: tabular-nums; line-height: 1; }
#ativacoes .atv-count b { font-size: calc((clamp(20px, 1.5vw, 28px)) * var(--ts, 1)); color: var(--sand); }
#ativacoes .atv-count span { font-size: calc((clamp(14px, 1vw, 18px)) * var(--ts, 1)); margin-left: 2px; }
#ativacoes .atv-foot { grid-column: 1 / 10; color: var(--text-2); }

/* movimento reduzido: sem passeio lateral — o menu e as sete ativações empilhadas, marca já impressa */
.reduced #ativacoes .atv-stage { height: auto; overflow: visible; }
.reduced #ativacoes .atv-track { position: static; width: auto; display: block; }
.reduced #ativacoes .atv-panel { width: auto; height: 100vh; height: 100svh; }
.reduced #ativacoes .atv-rail { display: none; } /* o número de cada ativação já está no texto */

/* baixo (1280 × 720) */
@media (max-height: 760px) and (orientation: landscape) {
  #ativacoes .atv-board th, #ativacoes .atv-board td { padding-block: 6px; }
}

/* retrato (tablet em pé): texto embaixo, largura toda; a foto recortada no painel da marca */
@media (orientation: portrait) {
  /* no retrato o horizonte desce: o rodapé do menu fica sobre o céu escuro, nunca na faixa clara */
  #ativacoes .atv-sky { background:
    radial-gradient(70% 30% at 70% 90%, rgba(255, 176, 120, .42), rgba(203, 87, 45, .16) 56%, transparent 78%),
    linear-gradient(180deg, #0a1822 0%, #0f2232 30%, #262a3e 52%, #563a46 68%, #9a4e3c 80%, #d06d42 87%, #e78a55 90%); }
  #ativacoes .atv-sunbox, #ativacoes .atv-sea { top: 90%; }
  #ativacoes .atv-head { grid-column: 1 / -1; }
  #ativacoes .atv-board { grid-column: 1 / -1; }
  #ativacoes .atv-title span:first-child { font-size: min(calc(8.4cqi * var(--ts, 1)), 9.24cqi); }
  #ativacoes .atv-title span:last-child { font-size: min(calc(5.4cqi * var(--ts, 1)), 5.94cqi); }
  /* ativações em pé: a foto em cima (62% da tela, recorte que guarda as placas inteiras) e o texto embaixo, no
     escuro do poente — sem texto sobre a foto e sem placa cortada */
  #ativacoes .atv-slide { background: linear-gradient(180deg, #0a1822 0%, #14202d 55%, #2a2433 78%, #3b2a33 100%); }
  #ativacoes .atv-cam { top: calc(var(--hud-h) + 8px); bottom: auto; left: -4%; right: -4%; height: 55%;
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
  #ativacoes .atv-block::before, #ativacoes .atv-slide::before { display: none; } /* o HUD fica sobre o fundo escuro, fora da foto */
  #ativacoes .atv-slide .atv-txt { align-items: start; padding-top: calc(var(--hud-h) + 55vh + clamp(24px, 3vh, 44px)); }
  #ativacoes .atv-slide .atv-block { grid-column: 1 / -1; }
  #ativacoes .atv-name { font-size: min(calc(4.4vw * var(--ts, 1)), 7.7cqi); }
  #ativacoes .atv-mock { left: clamp(100cqw - var(--W), 50cqw - var(--fxp, var(--fx, .5)) * var(--W), 0px); }
  /* proteção solar em pé: o quadro mostra ~75% da largura da foto e não cabem o roll-up e o balcão juntos (o recorte
     vai no roll-up, --fxp .58, que fica inteiro de 834 a 1024 de largura); o balcão entra cortado pela borda
     esquerda, dentro da fusão de baixo — placa branca cortada é foto; "…A MARCA" cortado seria erro de montagem */
  #ativacoes [data-mock="a-protecao"] .mock__panel--balcao { visibility: hidden; }
  /* a ressalva caía no brilho pêssego do sol (3,8:1): em pé ela vira o rodapé da tabela, no mesmo navy */
  #ativacoes .atv-board { border-radius: var(--r) var(--r) 0 0; }
  #ativacoes .atv-foot { grid-column: 1 / -1; max-width: none; margin-top: calc(-1 * clamp(18px, 3.4vh, 38px)); padding: 12px clamp(12px, 1.3vw, 18px) 14px;
    background: rgba(10, 24, 34, .9); border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); box-shadow: var(--shadow-1); }
}

/* Hora dourada (revisão final, 26/09/2026): as fotos das ativações são de tarde clara, mas o relógio da arena
   aqui vai de 18:15 a 19:13, entre o poente do 18 e o crepúsculo do 20. Uma graduação quente cobre foto e marca
   impressa juntas (a tinta pega a mesma luz) e esquenta/escurece de cena em cena, acompanhando o sol. */
#ativacoes .atv-slide { --gold: .22; --sep: .07; --br: .98; }
#ativacoes .atv-slide[data-i="2"] { --gold: .27; --sep: .09; --br: .965; }
#ativacoes .atv-slide[data-i="3"] { --gold: .32; --sep: .11; --br: .95; }
#ativacoes .atv-slide[data-i="4"] { --gold: .37; --sep: .13; --br: .93; }
#ativacoes .atv-slide[data-i="5"] { --gold: .42; --sep: .15; --br: .91; }
#ativacoes .atv-slide[data-i="6"] { --gold: .47; --sep: .17; --br: .885; }
#ativacoes .atv-slide[data-i="7"] { --gold: .52; --sep: .19; --br: .86; }
#ativacoes .atv-mock { filter: sepia(var(--sep)) saturate(1.08) brightness(var(--br)); }
#ativacoes .atv-cam::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(180deg, rgba(255, 176, 110, var(--gold)) 0%, rgba(242, 151, 109, calc(var(--gold) * .8)) 50%, rgba(140, 62, 40, calc(var(--gold) * .9)) 100%); }
.reduced #ativacoes .atv-mock { filter: sepia(var(--sep)) saturate(1.08) brightness(var(--br)); }