/* 18 · Visibilidade — hora dourada indo para o pôr do sol (17:29–18:14; o sol ainda no céu). Um tour pela arena com a marca impressa: à esquerda o inventário inteiro
   (Na arena · Na comunicação · Nos pontos de contato) numa placa sólida, sempre legível; à direita uma janela
   com linhas de quadra onde as cenas trocam (m-quadra, m-backdrop, m-tendas, a peça digital, m-orientacao).
   O item que a janela mostra acende na lista e na legenda. "Na comunicação" é um celular em HTML que salta
   para fora da janela, com a programação impressa e a locução. */
#visibilidade .vis-stage { background: #0a1822; }
#visibilidade .vis-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 46% at 84% 78%, rgba(255, 190, 130, .36), rgba(203, 87, 45, .14) 55%, transparent 76%),
    linear-gradient(180deg, #0c1c29 0%, #142c40 20%, #2f3d52 37%, #6c5052 52%, #b8704a 65%, #e6955a 73%, #f8bb7c 77.4%); }
#visibilidade .vis-sunbox { position: absolute; left: 84%; top: 77.4%; width: 0; height: 0; z-index: 1; pointer-events: none; }
#visibilidade .vis-sun { --sun-size: 40vmin; --alt: sin(calc(var(--sun-f, .9) * 180deg)); left: 0; top: 0;
  transform: translate(-50%, -50%) translateY(calc(var(--alt) * -52vh)); transition: transform .6s linear; }
#visibilidade .vis-sea { position: absolute; left: 0; right: 0; top: 77.4%; bottom: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #7c5646 0%, #43393f 12%, #1b2733 42%, #0d1b26 72%, #0a1822 100%); box-shadow: 0 -1px 0 rgba(255, 206, 150, .5); }
#visibilidade .vis-sea::before { content: ''; position: absolute; left: 84%; top: 0; width: 30vmin; height: 46%; transform: translateX(-50%); opacity: .28;
  background: repeating-linear-gradient(180deg, rgba(255, 190, 130, .9) 0 1px, transparent 1px 9px);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 0%, #000 20%, transparent 100%); mask-image: radial-gradient(50% 100% at 50% 0%, #000 20%, transparent 100%); }
#visibilidade .net { z-index: 1; }

#visibilidade .vis-wrap { position: relative; z-index: 3; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: clamp(10px, 2vh, 22px);
  padding-top: calc(var(--hud-h) + clamp(16px, 3.4vh, 40px)); padding-bottom: clamp(14px, 2.6vh, 26px); }
#visibilidade .vis-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; min-height: 0; }
#visibilidade .vis-side { grid-column: 1 / 6; display: grid; gap: clamp(14px, 2.4vh, 26px); align-content: center; min-width: 0; container-type: inline-size; }
#visibilidade .vis-view { grid-column: 6 / 13; min-width: 0; display: grid; gap: clamp(20px, 3vh, 30px); align-content: center; }

/* título: "Visibilidade" grande, "dos patrocinadores" menor em pêssego (medido pela coluna) */
#visibilidade .vis-head { display: grid; gap: clamp(8px, 1.2vh, 12px); }
#visibilidade .vis-head .label { text-wrap: balance; }
#visibilidade .vis-title { display: grid; font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; line-height: 1.04; letter-spacing: -.012em; color: var(--sand); padding-top: .05em; }
#visibilidade .vis-title span:first-child { font-size: min(calc(9.2cqi * var(--ts, 1)), 10.12cqi); }
#visibilidade .vis-title span:last-child { font-size: min(calc(5.5cqi * var(--ts, 1)), 6.05cqi); color: var(--sun); margin-top: .1em; letter-spacing: 0; }

/* o inventário */
/* placa quase sólida: translúcida, o brilho do horizonte vazava e o título do grupo aceso (pêssego, 16 px) caía
   para 3,3:1 */
#visibilidade .vis-inv { display: grid; gap: clamp(12px, 2vh, 20px); padding: clamp(16px, 2.4vh, 26px) clamp(18px, 1.8vw, 28px); background: rgba(16, 38, 51, .95); }
#visibilidade .vis-group { display: grid; gap: clamp(6px, 1vh, 10px); }
#visibilidade .vis-group + .vis-group { padding-top: clamp(12px, 2vh, 20px); border-top: 1px solid var(--line); }
#visibilidade .vis-gt { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-stretch: 112%; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  font-size: calc((clamp(14px, .35vw + 10.4px, 17px)) * var(--ts, 1)); line-height: 1.2; color: var(--text-2); transition: color .5s; } /* ≥ 16 px já em 1280; o número (.86 em) ≥ 13,2 */
#visibilidade .vis-gn { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; flex: none; font-family: var(--f-mono); font-weight: 700; letter-spacing: 0; font-size: .86em;
  color: var(--sand); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background .5s, color .5s, box-shadow .5s; }
#visibilidade .vis-group.is-on .vis-gt { color: var(--sun); }
#visibilidade .vis-group.is-on .vis-gn { background: var(--sun); color: var(--navy); box-shadow: none; }
#visibilidade .vis-items { display: grid; gap: clamp(2px, .5vh, 5px); padding-left: calc(1.7em + 10px); font-size: calc((clamp(15px, .38vw + 10.4px, 18px)) * var(--ts, 1)); }
#visibilidade .vis-it { position: relative; line-height: 1.36; color: var(--text-3); transition: color .45s; }
#visibilidade .vis-it::before { content: ''; position: absolute; left: -18px; top: .58em; width: 7px; height: 7px; border-radius: 50%; background: rgba(244, 239, 229, .28); transition: background .45s, box-shadow .45s, transform .45s; }
#visibilidade .vis-it.is-on { color: var(--sand); font-weight: 600; }
#visibilidade .vis-it.is-on::before { background: var(--sun); box-shadow: 0 0 0 4px rgba(242, 151, 109, .22), 0 0 12px rgba(255, 200, 138, .6); transform: scale(1.25); }

/* a janela (linhas de quadra em volta) */
#visibilidade .vis-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; }
#visibilidade .vis-win { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow-1);
  background: linear-gradient(180deg, #d9a47a 0%, #c9825a 48%, #3a4450 49%, #1b2b37 100%); }
#visibilidade .vis-scene { position: absolute; inset: 0; opacity: 0; }
#visibilidade .vis-scene[data-s="0"] { opacity: 1; }
#visibilidade .vis-cam { position: absolute; inset: 0; container-type: size; transform-origin: var(--ox, 50%) var(--oy, 50%); }
#visibilidade .vis-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); }
#visibilidade .vis-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. */
#visibilidade .mock__ink { -webkit-mask-mode: luminance; mask-mode: luminance; }
/* impressão da marca: o núcleo supõe ~0,83 em por letra e a Archivo 125% ocupa 0,88 ("SUA MARCA" passava da
   placa e era cortado); na largura 100% (0,72 em) cabe com folga. Ver core_requests. */
#visibilidade .mock__panel { font-stretch: 100%; letter-spacing: 0; }
#visibilidade .vis-blur { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; filter: blur(18px) saturate(1.1) brightness(.55); color: transparent; }
#visibilidade .vis-scene--com::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 80% at 50% 50%, rgba(16, 38, 51, .2), rgba(10, 24, 34, .7)); }

/* Na comunicação: camada que sai da janela (não é recortada) */
#visibilidade .vis-com { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* o celular nasce da janela: pé na base da janela, cabeça acima dela. ~8% mais largo que antes (9 / 18; a altura
   não cresce: em 1280 × 720 a cabeça já chega perto do HUD), para os fatos da tela caberem em 16 px */
#visibilidade .vis-phonebox { position: absolute; left: 62%; bottom: -3%; height: min(138%, 60vh); aspect-ratio: 9 / 18; transform: translateX(-50%); }
#visibilidade .vis-phone { position: absolute; inset: 0; opacity: 0; border-radius: 13% / 6%; padding: 3.2%; container-type: inline-size; /* o padding da tela em cqi mede pelo aparelho */ background: linear-gradient(160deg, #26333d, #0c151c 60%, #1b252d);
  box-shadow: 0 0 0 1.5px rgba(244, 239, 229, .22) inset, 0 30px 70px rgba(0, 0, 0, .55), 0 8px 20px rgba(0, 0, 0, .35); }
#visibilidade .vis-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 10.5% / 4.9%; background: #f7f3ec; color: var(--navy); container-type: inline-size;
  display: flex; flex-direction: column; padding: 14cqi 0 0; }
#visibilidade .vis-phone__screen::before { content: ''; position: absolute; left: 50%; top: 3.4cqi; width: 30cqi; height: 7cqi; transform: translateX(-50%); border-radius: 99px; background: #0c151c; }
#visibilidade .vis-post__head { display: flex; align-items: center; gap: 3.4cqi; padding: 0 5cqi 3.6cqi; }
#visibilidade .vis-post__av { width: 12cqi; height: 12cqi; flex: none; }
#visibilidade .vis-post__head b { min-width: 0; font-family: var(--f-display); font-stretch: 108%; font-weight: 800; font-size: max(calc(12px * var(--ts, 1)), 5cqi); line-height: 1.15; text-transform: uppercase; letter-spacing: .01em; }
#visibilidade .vis-post__pic { position: relative; aspect-ratio: 4 / 3.1; overflow: hidden; background: #c98b62; flex: none; }
#visibilidade .vis-post__cam { position: absolute; inset: 0; container-type: size; }
#visibilidade .vis-post__play { position: absolute; right: 4cqi; top: 4cqi; display: grid; place-items: center; width: 11cqi; height: 11cqi; border-radius: 50%; background: rgba(10, 24, 34, .66); color: #fff; }
#visibilidade .vis-post__play svg { width: 55%; height: 55%; }
#visibilidade .vis-post__cap { padding: 4.2cqi 5cqi 0; font-size: max(calc(14.6px * var(--ts, 1)), 5.8cqi); line-height: 1.3; color: var(--navy); }
#visibilidade .vis-post__cap b { font-weight: 800; }
#visibilidade .vis-post__meta { padding: 2cqi 5cqi 0; font-family: var(--f-mono); font-size: max(calc(14.6px * var(--ts, 1)), 4.6cqi); line-height: 1.35; letter-spacing: 0; color: var(--slate); }
#visibilidade .vis-post__next { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5cqi; height: 16%; padding: 4cqi 0 0; }
#visibilidade .vis-post__next i { background: linear-gradient(180deg, #d9b18e, #9c6c55); opacity: .5; }

/* folheto ~10% maior (os fatos da programação em 17 px em 1280): sobe acima da janela (o pé não chega à legenda,
   nem com nome longo no ?marca=) e sai um pouco pela esquerda, para não encostar no celular */
#visibilidade .vis-leafbox { position: absolute; left: -1%; top: -4%; width: clamp(236px, 37.4%, 363px); transform: rotate(-5deg); }
#visibilidade .vis-leaf { opacity: 0; display: grid; gap: 8px; padding: 16px 16px 14px; border-radius: 6px; background: #fbf8f2; color: var(--navy); box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
#visibilidade .vis-leaf__k { font-family: var(--f-mono); font-weight: 700; font-size: calc(13.2px * var(--ts, 1)); letter-spacing: .16em; text-transform: uppercase; color: var(--clay-2); }
#visibilidade .vis-leaf__t { font-family: var(--f-display); font-stretch: 118%; font-weight: 900; font-size: calc(15.4px * var(--ts, 1)); line-height: 1.1; text-transform: uppercase; }
#visibilidade .vis-leaf__rows { margin: 2px 0 0; display: grid; gap: 3px; }
#visibilidade .vis-leaf__rows div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--ink-line); font-size: calc(15.4px * var(--ts, 1)); line-height: 1.3; }
#visibilidade .vis-leaf__rows dt { font-weight: 600; }
#visibilidade .vis-leaf__rows dd { margin: 0; font-family: var(--f-mono); color: var(--ink-text-2); white-space: nowrap; }
#visibilidade .vis-leaf__brand { margin-top: 4px; padding: 7px 10px 6px; border-radius: 3px; background: var(--navy); color: var(--sand); text-align: center; line-height: 1.15; text-wrap: balance;
  font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: calc(14.6px * var(--ts, 1)); letter-spacing: .04em; text-transform: uppercase; }

/* a locução encosta no pé do celular, sobre as miniaturas: mais alta, cobria a última letra de "janeiro" em 1280 */
#visibilidade .vis-voicebox { position: absolute; right: -3%; bottom: 1%; transform: rotate(-3deg); }
#visibilidade .vis-voice { opacity: 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px; background: rgba(10, 24, 34, .9);
  box-shadow: inset 0 0 0 1.5px rgba(242, 151, 109, .55), 0 14px 34px rgba(0, 0, 0, .4); color: var(--sand);
  font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: calc(13px * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; }
#visibilidade .vis-voice svg { width: 20px; height: 20px; color: var(--sun); }
#visibilidade .vis-voice__eq { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
#visibilidade .vis-voice__eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--sun); transform-origin: 50% 50%; animation: vis-eq 1s ease-in-out infinite; animation-play-state: paused; }
#visibilidade .vis-voice__eq i:nth-child(2) { animation-delay: -.3s; } #visibilidade .vis-voice__eq i:nth-child(3) { animation-delay: -.6s; }
#visibilidade .vis-voice__eq i:nth-child(4) { animation-delay: -.15s; } #visibilidade .vis-voice__eq i:nth-child(5) { animation-delay: -.45s; }
#visibilidade.is-com .vis-voice__eq i { animation-play-state: running; }
@keyframes vis-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.reduced #visibilidade .vis-voice__eq i { animation: none; transform: scaleY(.7); }

/* legendas sob a janela: uma por cena */
#visibilidade .vis-caps { display: grid; }
/* legenda em placa quase sólida: ela atravessa a linha do horizonte pintada e ficava com dois tons */
#visibilidade .vis-cap { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .6s var(--ease-out);
  background: rgba(10, 24, 34, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#visibilidade .vis-cap.is-on { opacity: 1; transform: none; }
#visibilidade .vis-cap b { text-wrap: balance; }

#visibilidade .vis-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
#visibilidade .vis-foot .footnote { color: var(--text-2); }

/* movimento reduzido: cortes secos (sem transição) */
.reduced #visibilidade .vis-it, .reduced #visibilidade .vis-it::before, .reduced #visibilidade .vis-cap, .reduced #visibilidade .vis-gt, .reduced #visibilidade .vis-gn { transition: none; }

/* baixo (1280 × 720): o inventário em duas colunas por grupo */
@media (max-height: 800px) and (orientation: landscape) {
  #visibilidade .vis-items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; padding-left: 0; }
  #visibilidade .vis-it { padding-left: 14px; line-height: 1.3; }
  #visibilidade .vis-it::before { left: 0; }
}

/* paisagem estreita (1024 × 768): a janela tem ~530 × 300 e não cabem folheto e celular lado a lado no tamanho
   cheio — o folheto encolhe a partir do canto (o celular manda nos fatos de 16 px) e o celular vai mais à direita */
@media (max-width: 1100px) and (orientation: landscape) {
  #visibilidade .vis-leafbox { transform: rotate(-5deg) scale(.8); transform-origin: 0 0; top: -6%; }
  #visibilidade .vis-phonebox { left: 67%; }
}

/* retrato (tablet em pé): cabeçalho e inventário em cima (grupos lado a lado), janela embaixo */
@media (orientation: portrait) {
  #visibilidade .vis-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: clamp(26px, 3.6vh, 44px); align-content: center; }
  #visibilidade .vis-side, #visibilidade .vis-view { grid-column: 1 / -1; }
  #visibilidade .vis-title span:first-child { font-size: min(calc(7.4cqi * var(--ts, 1)), 8.14cqi); }
  #visibilidade .vis-title span:last-child { font-size: min(calc(4.4cqi * var(--ts, 1)), 4.84cqi); }
  #visibilidade .vis-inv { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  #visibilidade .vis-group + .vis-group { padding-top: 0; border-top: 0; padding-left: 20px; border-left: 1px solid var(--line); }
  #visibilidade .vis-gt { align-items: flex-start; }
  #visibilidade .vis-items { padding-left: 14px; }
  #visibilidade .vis-it::before { left: -14px; }
  #visibilidade .vis-phonebox { height: min(118%, 40vh); }
  #visibilidade .vis-sunbox, #visibilidade .vis-sea::before { left: 70%; }
}