/* 05 · Um público regional, adulto e altamente mobilizável — a árvore de 2.400 luzes (canvas 2D do capítulo).
   Palco fixado em três faixas (grade da .pb-wrap), como o slide 5: título + parágrafo no alto à esquerda (8 colunas); a
   caixa da árvore/guirlanda à direita (o canvas cobre o palco inteiro; na 1ª parada as luzes cintilam como um céu de
   pontos à direita); o +67% no miolo da guirlanda; os outros três números numa fileira embaixo. A posição natural é o
   quadro final (e o reduzido). Tudo sob #publico. */
#publico .pb-stage { isolation: isolate; }
/* o veludo um pouco mais fundo à direita: as luzes brilham mais no escuro */
#publico .pb-stage::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(46% 62% at 76% 44%, rgba(38, 2, 4, .5), rgba(38, 2, 4, 0) 72%); }
#publico .pb-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; z-index: 1; pointer-events: none; }

/* laço vermelho no alto da guirlanda e a estrela do topo (posição e escala pelo JS) */
#publico .pb-bow { position: absolute; z-index: 2; left: 0; top: 0; width: 200px; height: auto; aspect-ratio: 240 / 170; max-width: none; overflow: visible; color: #d62a2a; opacity: 0; transform-origin: 50% 37.6%;
  filter: drop-shadow(0 6px 12px rgba(20, 2, 4, .55)); will-change: transform, opacity; }
#publico .pb-topstar { position: absolute; z-index: 2; left: 0; top: 0; width: 60px; height: 60px; opacity: 0; --star8-c: #f7c978; --star8-core: #b9772c; will-change: transform, opacity; pointer-events: none; }
#publico .pb-topstar .star8 { position: relative; --size: 100%; width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(255, 214, 140, .95)); }
#publico .pb-topstar__halo { position: absolute; left: -110%; top: -110%; width: 320%; height: 320%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 200, .55), rgba(247, 201, 120, .16) 45%, rgba(247, 201, 120, 0)); }
#publico .pb-topstar__halo { animation: pb-halo 2.4s ease-in-out infinite; }
@keyframes pb-halo { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.84); opacity: .6; } }
.reduced #publico .pb-topstar__halo { animation: none; }

/* ---------- as três faixas ---------- */
#publico .pb-wrap { position: relative; z-index: 3; height: 100%; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  grid-template-rows: auto minmax(0, 1fr) auto; row-gap: clamp(10px, 2vh, 24px);
  padding-top: calc(var(--top-safe) + clamp(10px, 2.6vh, 32px)); padding-bottom: clamp(32px, 4vh, 48px); }
#publico .pb-wrap > * { min-width: 0; }

#publico .pb-head { grid-column: 1 / 9; grid-row: 1; display: grid; gap: clamp(14px, 2.4vh, 28px); align-content: start; container-type: inline-size; transform-origin: 0 0; }
#publico .pb-title-wrap { position: relative; justify-self: start; }
/* o título pelo token do núcleo (.ch-title); --title-em = "UM PÚBLICO REGIONAL," (12,7 em na Josefin 400): o teto pela
   coluna de 8 guarda a quebra em três linhas (60 px no 1440, ~71 no 1920) */
#publico .pb-title { --title-em: 12.8; max-width: none; }
#publico .pb-text { font-size: calc((clamp(16px, .5vw + 11px, 21px)) * var(--ts, 1)); line-height: 1.5; color: var(--cream); max-width: 50ch; text-wrap: pretty; }
#publico .pb-spark { position: absolute; pointer-events: none; }
#publico .pb-spark { animation: twinkle 3.4s ease-in-out infinite; }
#publico .pb-spark--1 { --size: clamp(16px, 1.5vw, 28px); left: 102%; top: 58%; }
#publico .pb-spark--2 { --size: clamp(10px, .9vw, 18px); left: 94%; top: -6%; animation-delay: -1.6s; }
.reduced #publico .pb-spark { animation: none; }

/* a caixa da visualização: da 9ª coluna até a borda da grade, do alto até o pé (os números ficam sob o texto) */
#publico .pb-viz { grid-column: 9 / 13; grid-row: 1 / 4; position: relative; display: grid; align-content: end; justify-items: center; min-height: 0; }
#publico .pb-legend { position: relative; display: grid; justify-items: center; width: 100%; }
#publico .pb-leg { grid-area: 1 / 1; display: flex; justify-content: center; }
#publico .pb-leg__i { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; padding: 7px 14px 6px; border-radius: 999px; background: rgba(38, 2, 4, .5);
  font-family: var(--f-body); font-weight: 500; font-size: calc((clamp(14.6px, .28vw + 10.6px, 17px)) * var(--ts, 1)); line-height: 1.3; letter-spacing: .02em; color: var(--text-2); text-align: center; }
#publico .pb-key-item { display: inline-flex; align-items: center; white-space: nowrap; }
#publico .pb-key { display: inline-block; flex: none; width: .78em; height: .78em; margin-right: .55em; border-radius: 50%; vertical-align: -.05em; }
#publico .pb-key--white { background: radial-gradient(circle, #fff 0 35%, #fff4e2 60%); box-shadow: 0 0 .5em rgba(255, 244, 226, .8); }
#publico .pb-key--gold { background: radial-gradient(circle, #fff1c8 0 22%, #f0a23a 55%); box-shadow: 0 0 .5em rgba(240, 162, 58, .85); }
#publico .pb-key--green { background: radial-gradient(circle, #eafff5 0 22%, #46e3a4 55%); box-shadow: 0 0 .5em rgba(70, 227, 164, .85); }
#publico .pb-key--dim { background: #5a3a2a; box-shadow: inset 0 0 0 1.5px rgba(255, 224, 190, .35); }

/* ---------- o +67% no miolo da guirlanda (o JS põe o centro e o corpo que cabe no círculo) ---------- */
#publico .pb-hero { position: absolute; z-index: 2; left: 50%; top: 40%; transform: translate(-50%, -50%); pointer-events: none; text-align: center; width: max-content; }
#publico .pb-hero__in { display: grid; justify-items: center; will-change: transform, opacity; }
#publico .pb-hero__n { font-family: var(--f-display); font-weight: 700; font-size: calc(90px * var(--ts, 1)); line-height: 1; letter-spacing: 0; padding-top: .1em;
  font-variant-numeric: tabular-nums lining-nums; color: var(--gold-2); white-space: nowrap; }
#publico .pb-hero__l { font-family: var(--f-body); font-weight: 500; font-size: calc((clamp(14.6px, .45vw + 10px, 17.8px)) * var(--ts, 1)); line-height: 1.28;
  color: var(--cream); max-width: 10.6em; text-wrap: balance; margin-top: .3em; text-shadow: 0 1px 6px rgba(38, 2, 4, .8); }

/* ---------- os outros três números ---------- */
#publico .pb-row { grid-column: 1 / 9; grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: baseline; position: relative; border-top-color: transparent; }
/* o fio dourado da fileira se desenha junto com a chegada das luzes (--rule 0 → 1 pelo JS; o reduzido chega em 1) */
#publico .pb-row::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line-gold); transform-origin: 0 50%; transform: scaleX(var(--rule, 1)); }
#publico .pb-stat .stat__n { font-size: calc((clamp(40px, 3.9vw, 60px)) * var(--ts, 1)); white-space: nowrap; }
#publico .pb-stat .stat__l { color: var(--cream); text-wrap: balance; }
#publico .pb-glow { display: inline-block; }
#publico .pb-odo { display: inline-block; }

/* ---------- telas baixas ---------- */
@media (max-height: 760px) {
  #publico .pb-wrap { row-gap: 8px; padding-bottom: 32px; }
  #publico .pb-head { gap: 10px; }
  #publico .pb-text { line-height: 1.45; }
  #publico .pb-stat .stat__n { font-size: calc((clamp(36px, 3.6vw, 56px)) * var(--ts, 1)); }
  #publico .stat-row > .stat { padding-top: 10px; }
}

/* ---------- em pé (tablet 1024 × 1366): título e parágrafo no alto, a árvore no meio, os números embaixo ---------- */
@media (orientation: portrait) {
  #publico .pb-head { grid-column: 1 / -1; }
  #publico .pb-text { font-size: calc(20px * var(--ts, 1)); max-width: 52ch; }
  #publico .pb-viz { grid-column: 1 / -1; grid-row: 2; }
  #publico .pb-row { grid-column: 1 / -1; }
  #publico .pb-stat .stat__n { font-size: calc(46px * var(--ts, 1)); }
}