/* 24 · juntos — a chegada: o filme escurece para a pergunta e estoura em luz para o cartão final. */
#juntos .jt-stage { background: var(--acai-dark); }
#juntos .jt-bg { position: absolute; inset: 0; background: radial-gradient(80% 70% at 70% 40%, #6b3f7e 0%, #2b0f36 60%, var(--ink) 100%); }
#juntos .jt-bg img { width: 100%; height: 100%; object-fit: cover; }
#juntos .jt-film { background: transparent; }
#juntos .jt-scrim { background: linear-gradient(90deg, rgba(14, 7, 19, .88) 0%, rgba(14, 7, 19, .66) 36%, rgba(14, 7, 19, .36) 60%, rgba(14, 7, 19, .1) 80%, rgba(14, 7, 19, 0) 100%); }
#juntos .jt-sun { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background:
    radial-gradient(60% 60% at 78% 34%, rgba(255, 244, 214, 1) 0%, rgba(255, 236, 190, .92) 30%, rgba(245, 238, 224, 0) 70%),
    linear-gradient(180deg, #fbf5e8 0%, var(--offwhite) 55%, #efe1c6 100%); }

#juntos .jt-wrap { position: relative; z-index: 3; height: 100%; }
#juntos .jt-cam { position: absolute; left: var(--gutter); top: calc(var(--hud-h) + 26px); }
#juntos .jt-q { position: absolute; left: var(--gutter); top: 50%; translate: 0 -50%; width: min(1100px, 82%); display: grid; gap: 16px; justify-items: start; }
#juntos .jt-q__t { font-size: calc((clamp(64px, 8.2vw, 156px)) * var(--ts, 1)); text-wrap: balance; }

#juntos .jt-end { position: absolute; inset: calc(var(--hud-h) + 24px) var(--gutter) clamp(56px, 9vh, 96px); color: var(--ink-text); align-content: center; }
#juntos .jt-logo { width: min(520px, 100%); height: auto; }
#juntos .jt-facts { display: grid; gap: 8px; font-size: calc((clamp(16px, .5vw + 11px, 20px)) * var(--ts, 1)); color: var(--ink-text-2); }
#juntos .jt-facts b { color: var(--acai); font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; margin-right: .35em; font-size: 1.15em; }
#juntos .jt-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
#juntos .jt-btn { background: var(--acai); color: var(--offwhite); }
#juntos .jt-btn svg { stroke: currentColor; }
#juntos .jt-contact { display: grid; gap: 2px; font-size: calc(16px * var(--ts, 1)); color: var(--ink-text-2); }
#juntos .jt-contact b { font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: calc(20px * var(--ts, 1)); color: var(--ink-text); letter-spacing: .02em; }
#juntos .jt-contact a { color: var(--acai); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(74, 31, 96, .35); justify-self: start; }
#juntos .jt-contact a:hover { border-bottom-color: var(--acai); }
#juntos .jt-brands { display: flex; align-items: center; gap: 22px; margin-top: 6px; }
#juntos .jt-brands i { width: 1px; height: 34px; background: var(--ink-line); }
#juntos .jt-brand { display: block; height: 30px; background: var(--acai); -webkit-mask: var(--m) left center / contain no-repeat; mask: var(--m) left center / contain no-repeat; }
#juntos .jt-brand--sl { --m: url(../../assets/brand/sportsland-white.webp); width: 150px; }
#juntos .jt-brand--oak { --m: url(../../assets/brand/oakberry-white.webp); width: 120px; height: 36px; }
#juntos .jt-photo { aspect-ratio: 4 / 5; clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); border-radius: 0; box-shadow: none; }
#juntos .jt-photo img { object-position: 50% 40%; }
#juntos .jt-photo .credit { right: 16%; }

#juntos .jt-clock { position: absolute; right: var(--gutter); bottom: clamp(20px, 3.6vh, 36px); font-size: calc(12px * var(--ts, 1)); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-text-2); }
#juntos .jt-clock b { color: var(--acai); font-weight: 700; }

/* tela em pé: o filme é ampliado e a pergunta ocupa a largura toda, sobre a névoa clara do sol —
   o véu cobre a faixa inteira (mais leve à direita) */
@media (max-aspect-ratio: 1/1) {
  #juntos .jt-scrim { background: linear-gradient(90deg, rgba(14, 7, 19, .86) 0%, rgba(14, 7, 19, .64) 55%, rgba(14, 7, 19, .42) 100%); }
}
@media (max-width: 980px) {
  #juntos .jt-photo { display: none; }
  #juntos .jt-q { width: 92%; }
}