/* =====================================================================
   22 · juntos — "O que podemos construir juntos?" (p23). O encerramento.

   Três painéis de uma tela cada, sobre um fundo fixo (sticky):
     1 · a pergunta, em cromado, ao lado da foto aérea REAL de Jurerê (p23),
         que sangra no céu, com luz de noite e parallax lento;
     2 · em resumo: quatro números já apresentados, rótulo fiel ao content.md;
     3 · assinatura: logo, "Plano comercial 2027", data e local, as marcas
         da capa (Sportsland · P12 · Hard Rock Cafe) e três ações discretas.
   A foto some na entrada do painel 2: números e assinatura ficam sobre o céu do ato V.
   O estado padrão (sem JS / movimento reduzido) é o estado final e legível:
   o JS só acrescenta a entrada por rolagem e o fundo fixo animado.
   ===================================================================== */

/* sem padding de seção: a classe ch--flush do núcleo (painéis de uma tela cada) */
#juntos {
  --ju-line: rgba(255, 255, 255, .13);
  --ju-text: #d9d4ee;
}

/* ---------------- Fundo fixo: a foto da p23 ---------------- */
/* A foto ocupa a direita e sangra no céu (o céu do ato V fica à mostra atrás da pergunta):
   a foto conserva a luz real da noite e o título fica sobre o escuro, sem véu por cima da foto. */
#juntos .ju-bg {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100lvh;
  margin-bottom: -100vh; margin-bottom: -100lvh;
  overflow: clip; pointer-events: none;
}
#juntos .ju-bg__frame {
  position: absolute; top: 0; bottom: 0; right: 0; left: 42%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 24%, #000 50%), linear-gradient(180deg, transparent 0%, #000 17%, #000 80%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 24%, #000 50%), linear-gradient(180deg, transparent 0%, #000 17%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
#juntos .ju-bg__photo { position: absolute; inset: 0; transform: scale(1.03); transform-origin: 55% 60%; will-change: transform; }
#juntos .ju-bg__img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 12% 50%;
  filter: saturate(.92) brightness(.92) contrast(1.06);
}
/* luz de noite: violeta por cima, sem apagar a luz real da foto (luz quente vinda de foto do evento é permitida) */
#juntos .ju-bg__grade {
  position: absolute; inset: 0; display: block; mix-blend-mode: overlay; opacity: .55;
  background: linear-gradient(180deg, rgba(32, 0, 88, .95) 0%, rgba(120, 0, 240, .45) 55%, rgba(240, 0, 240, .2) 100%);
}

/* ---------------- Painéis ---------------- */
#juntos .ju-panel {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  padding-block: calc(var(--hud-h) + clamp(16px, 4vh, 48px)) clamp(32px, 7vh, 72px);
}

/* 1 · a pergunta */
#juntos .ju-title {
  margin-top: clamp(14px, 2.4vh, 26px);
  font-size: clamp(46px, min(7.6vw, 14.4vh), 150px);
  background: none; /* cada linha pinta o próprio cromado (a linha anima sozinha) */
}
#juntos .ju-l {
  display: block; width: fit-content; padding-right: .08em; /* itálico: a última letra não raspa */
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#juntos .ju-lede {
  margin-top: clamp(18px, 3.4vh, 34px); max-width: 40ch;
  font-size: clamp(18px, .6vw + 11px, 22px); line-height: 1.45; color: var(--ju-text); text-wrap: balance;
}
#juntos .ju-lede__b { color: #fff; }
#juntos .ju-credit {
  position: absolute; bottom: clamp(20px, 4vh, 40px);
  right: max(var(--gutter), (100% - var(--maxw)) / 2 + var(--gutter));
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
}
#juntos .ju-credit::before { content: ''; flex: none; width: 28px; height: 1px; background: currentColor; opacity: .6; }
#juntos .ju-credit__t > span { white-space: nowrap; } /* se faltar largura, quebra no ponto, nunca no meio */

/* 2 · em resumo */
#juntos .ju-n__head { margin-bottom: clamp(32px, 6.5vh, 68px); }
#juntos .ju-n__title {
  margin-top: 16px;
  font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 2.7vw, 46px); line-height: 1.12; padding-top: .06em; color: #fff; text-wrap: balance;
}
#juntos .ju-stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#juntos .ju-stats::before { /* filete neon no topo da faixa: ciano → violeta → magenta */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--violet) 50%, var(--magenta));
  box-shadow: 0 0 10px rgba(120, 0, 240, .7);
  transform: scaleX(var(--ju-rule, 1)); transform-origin: 0 50%; /* o JS desenha o filete com a entrada */
}
#juntos .ju-stat { padding: clamp(22px, 3.4vh, 36px) clamp(14px, 2vw, 32px) 0; border-left: 1px solid var(--ju-line); }
#juntos .ju-stat:first-child { border-left: 0; padding-left: 0; }
#juntos .ju-stat__n {
  display: inline-block; white-space: nowrap;
  font-family: var(--f-mega); font-weight: 400; font-size: clamp(52px, 5.4vw, 96px); line-height: 1.04; padding-top: .06em;
  transform: skewX(-8deg); transform-origin: 0 100%;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .7));
}
#juntos .ju-stat__u {
  margin-left: .16em;
  font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: .34em; letter-spacing: .02em; text-transform: uppercase;
}
#juntos .ju-stat__u--pre { margin-left: 0; margin-right: .14em; }
#juntos .ju-stat__l { margin-top: 12px; max-width: 20ch; font-size: clamp(15px, .5vw + 9px, 18px); line-height: 1.4; color: var(--ju-text); }

/* 3 · assinatura */
#juntos .ju-end { position: relative; width: min(760px, 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; justify-items: center; text-align: center; }
#juntos .ju-panel--end { overflow: clip; } /* o halo nunca cria rolagem (lateral, nem sobra no fim da página em tela baixa) */
#juntos .ju-end::before { /* halo discreto atrás do logo */
  content: ''; position: absolute; left: 50%; top: 0; z-index: -1; pointer-events: none;
  width: min(760px, 100vw); aspect-ratio: 1.6; transform: translate(-50%, -24%);
  background: radial-gradient(closest-side, rgba(120, 0, 240, .22), rgba(32, 0, 88, .1) 60%, transparent);
}
#juntos .ju-end__logo { height: clamp(116px, 22vh, 214px); width: auto; filter: drop-shadow(0 0 26px rgba(120, 0, 240, .42)); }
#juntos .ju-end__plan {
  margin-top: clamp(16px, 2.8vh, 28px); padding-left: .3em; /* compensa o espaçamento depois da última letra */
  font-family: var(--f-display); font-style: normal; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3em; font-size: clamp(16px, .9vw + 6px, 22px); line-height: 1.2; color: #fff;
}
#juntos .ju-end__meta {
  margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; color: var(--mute);
}
#juntos .ju-end__meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }

/* as marcas da capa: mesma altura de caixa, peso visual acertado à mão por logo */
#juntos .ju-marks {
  width: min(540px, 100%); margin-top: clamp(26px, 4.6vh, 48px); padding-top: clamp(22px, 3.8vh, 38px);
  display: flex; align-items: center; border-top: 1px solid var(--ju-line);
}
#juntos .ju-mark { flex: 1 1 0; height: clamp(50px, 8vh, 72px); display: flex; align-items: center; justify-content: center; }
#juntos .ju-mark + .ju-mark { border-left: 1px solid var(--ju-line); }
#juntos .ju-mark img { width: auto; max-width: 78%; object-fit: contain; opacity: .94; }
/* Sportsland vem em ciano: fica branca como as outras duas, e maior (palavra contra emblema) */
#juntos .ju-mark--sl img { height: 46%; max-width: 84%; filter: brightness(0) invert(1); }
#juntos .ju-mark--p12 img { height: 100%; }
#juntos .ju-mark--hr img { height: 96%; }

/* ações: três botões iguais, no desenho dos botões do HUD */
#juntos .ju-acts { margin-top: clamp(28px, 5vh, 48px); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#juntos .ju-act {
  display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 18px 0 14px;
  font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: #e8e4f7; border: 1px solid rgba(255, 255, 255, .16); background: rgba(10, 6, 24, .55);
  transition: color .2s, border-color .2s, background .2s;
}
#juntos .ju-act b { font-weight: 700; color: var(--cyan); padding-right: 12px; border-right: 1px solid rgba(255, 255, 255, .14); line-height: 22px; }
#juntos .ju-act--home b { color: var(--magenta); }
#juntos .ju-act:hover, #juntos .ju-act:focus-visible { color: #fff; border-color: rgba(0, 216, 248, .6); background: rgba(0, 216, 248, .08); }
#juntos .ju-act--home:hover, #juntos .ju-act--home:focus-visible { border-color: rgba(240, 0, 240, .6); background: rgba(240, 0, 240, .08); }

/* ---------------- Telas baixas e largas (projetor 1280×720) ---------------- */
@media (min-width: 821px) and (max-height: 760px) {
  #juntos .ju-stat__n { font-size: clamp(48px, min(5.4vw, 11vh), 96px); }
}

/* ---------------- Telas muito baixas (celular deitado): a assinatura inteira cabe numa tela ---------------- */
@media (max-height: 540px) {
  #juntos .ju-panel { padding-block: calc(var(--hud-h) + 10px) 18px; }
  #juntos .ju-credit { display: none; } /* sem folga ao lado da frase: o crédito sai */
  #juntos .ju-end__logo { height: max(56px, 16vh); }
  #juntos .ju-end__plan { margin-top: 10px; }
  #juntos .ju-end__meta { margin-top: 4px; }
  #juntos .ju-marks { margin-top: 14px; padding-top: 12px; }
  #juntos .ju-mark { height: 38px; }
  #juntos .ju-acts { margin-top: 14px; }
  #juntos .ju-act { min-height: 40px; }
}

/* ---------------- Celular ---------------- */
@media (max-width: 820px) {
  /* a foto fica em cima e o texto embaixo: a noite de Jurerê aparece inteira */
  #juntos .ju-bg__frame {
    left: 0; bottom: auto; height: 64%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 58%, transparent 100%);
  }
  #juntos .ju-bg__img { object-position: 30% 50%; }
  /* a pergunta e o crédito empilhados no pé da tela: o crédito entra no fluxo e nunca encosta na frase */
  #juntos .ju-panel--q { align-items: end; align-content: end; padding-bottom: clamp(28px, 5vh, 52px); }
  #juntos .ju-title { font-size: clamp(40px, 12.6vw, 66px); }
  #juntos .ju-lede { font-size: 17px; }
  #juntos .ju-credit {
    position: static; width: 100%; margin-top: clamp(20px, 3.2vh, 30px); padding-inline: var(--gutter);
    align-items: flex-start; font-size: 10px; letter-spacing: .12em; line-height: 1.6;
  }
  #juntos .ju-credit::before { margin-top: .8em; } /* o filete na altura da primeira linha, se quebrar */

  #juntos .ju-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #juntos .ju-stat { padding: 22px 0 0 16px; }
  #juntos .ju-stat:nth-child(odd) { border-left: 0; padding-left: 0; padding-right: 12px; }
  #juntos .ju-stat:nth-child(n+3) { margin-top: 24px; border-top: 1px solid var(--ju-line); }
  #juntos .ju-stat:nth-child(4) { border-left: 1px solid var(--ju-line); }
  #juntos .ju-stat__n { font-size: clamp(42px, 12vw, 60px); }
  #juntos .ju-stat__l { font-size: 14px; }

  #juntos .ju-end__logo { height: clamp(104px, 17vh, 150px); }
  #juntos .ju-end__meta { flex-direction: column; gap: 2px; font-size: 11px; letter-spacing: .12em; }
  #juntos .ju-end__meta i { display: none; }
  #juntos .ju-mark { height: 50px; }
  #juntos .ju-acts { flex-direction: column; align-items: stretch; width: min(340px, 100%); }
  #juntos .ju-act { min-height: 48px; }
}
@media (max-width: 380px) {
  #juntos .ju-credit { gap: 10px; letter-spacing: .07em; }
  #juntos .ju-credit::before { width: 18px; }
}
/* ---------------- Celular deitado: volta o arranjo do computador, compacto ---------------- */
@media (max-width: 820px) and (max-height: 540px) and (orientation: landscape) {
  #juntos .ju-bg__frame {
    left: 42%; bottom: 0; height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 24%, #000 50%), linear-gradient(180deg, transparent 0%, #000 17%, #000 80%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 24%, #000 50%), linear-gradient(180deg, transparent 0%, #000 17%, #000 80%, transparent 100%);
  }
  #juntos .ju-panel--q { align-items: center; padding-bottom: 18px; }
  #juntos .ju-title { margin-top: 8px; font-size: min(7.6vw, 14vh); }
  #juntos .ju-lede { margin-top: 10px; font-size: 15px; }

  #juntos .ju-n__head { margin-bottom: 16px; }
  #juntos .ju-n__title { margin-top: 8px; font-size: 24px; }
  #juntos .ju-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #juntos .ju-stat:nth-child(n) { margin-top: 0; padding: 14px 10px 0; border-top: 0; border-left: 1px solid var(--ju-line); }
  #juntos .ju-stat:nth-child(1) { border-left: 0; padding-left: 0; }
  #juntos .ju-stat__n { font-size: min(5.4vw, 13vh); }
  #juntos .ju-stat__l { margin-top: 6px; font-size: 13px; }

  #juntos .ju-end__meta { flex-direction: row; gap: 4px 12px; }
  #juntos .ju-end__meta i { display: block; }
  #juntos .ju-acts { flex-direction: row; flex-wrap: nowrap; width: auto; gap: 8px; }
  #juntos .ju-act { gap: 8px; padding: 0 12px 0 10px; letter-spacing: .1em; font-size: 11px; }
  #juntos .ju-act b { padding-right: 8px; }
}

/* telefone pequeno deitado (568×320) */
@media (max-height: 340px) {
  #juntos .ju-panel { padding-block: calc(var(--hud-h) + 6px) 10px; }
  #juntos .ju-end__logo { height: 50px; }
  #juntos .ju-end__plan { margin-top: 6px; font-size: 14px; }
  #juntos .ju-marks { margin-top: 10px; padding-top: 8px; }
  #juntos .ju-mark { height: 30px; }
  #juntos .ju-acts { margin-top: 10px; }
  #juntos .ju-act { min-height: 36px; }
}

/* ---------------- Movimento reduzido: sem fundo fixo, a foto fica só atrás da pergunta ---------------- */
.reduced #juntos .ju-bg { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; margin-bottom: 0; }