/* A LP: só a posição de cada peça no palco (era o <style> em linha do protótipo). */
/* ======================= a LP: só a posição de cada peça no palco ======================= */
.poster {
  position: relative; width: 100%; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate;
  container: poster / size; font-variation-settings: "wdth" 100, "wght" 800;
}
.stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100cqw, 177.78cqh); aspect-ratio: 16 / 9; container: stage / inline-size; --u: 1cqw; }
.stage .rule-top { position: absolute; left: 4.6%; right: 4.6%; top: 4.4%; }
.stage .h1 { position: absolute; left: 8.8%; top: 17.5%; font-size: 5.25cqw; }
.stage .who-slot { position: absolute; left: 8.8%; top: 67%; }
.stage .who-slot.is-neutral { top: 66%; }
.stage .flower { position: absolute; left: 48.5%; top: 64%; width: 6.6%; }
.stage .curl { position: absolute; left: 37%; top: 50%; width: 5.6%; }
.stage .services { position: absolute; left: 4.6%; bottom: 4.6%; }
.tick-l { left: 3.7%; top: 23%; height: 13%; }
.tick-r { left: 94.8%; top: 66%; height: 13%; }
.stage .ghost { left: 61%; top: 27%; width: 25%; }
.stage .bubble { left: 52%; top: -15%; }

/* celular e janela em retrato: título em cima, fantasma embaixo */
@container poster (orientation: portrait) {
  .stage { top: 0; transform: translateX(-50%); width: min(100cqw, 56.25cqh); height: 100cqh; aspect-ratio: auto; }
  .stage .rule-top { top: 5cqw; left: 6%; right: 6%; grid-template-columns: auto 1fr auto; font-size: 2.5cqw; }
  .stage .tagline, .stage .brace { display: none; }
  .stage .reel { grid-column: 3; }
  .stage .h1 { left: 7%; top: 18cqw; font-size: 9.2cqw; }
  .stage .badge { left: auto; right: -2.2em; top: -2.6em; font-size: .24em; }
  .stage .who-slot { left: 7%; top: 74cqw; }
  .stage .who-slot.is-neutral { top: 80cqw; }
  .stage .who { --av: 11cqw; --tipf: 3.2cqw; }
  .stage .who-q { font-size: 3cqw; }
  .stage .who .pill { font-size: 3.6cqw; }
  .stage .who-msg { font-size: 3.3cqw; max-width: 86cqw; }
  .stage .av-tip.is-group { font-size: 3.4cqw; }
  .stage .who-out { margin-top: 3cqw; }
  .stage .flower { left: auto; right: 6%; top: 60cqw; width: 13%; }
  .stage .curl { left: auto; right: 5%; top: 40cqw; width: 11%; }
  .stage .swash path { stroke-width: 4.2; }
  .stage .services { left: 7%; right: 7%; bottom: auto; top: 112cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw 5cqw; font-size: 3.4cqw; }
  .tick-l { left: 3%; top: 22cqw; height: 12cqw; }
  .tick-r { left: 95%; top: auto; bottom: 40cqw; height: 12cqw; }
  .stage .ghost { left: 26%; top: auto; bottom: 9%; width: 48%; }
  .stage .bubble { font-size: 3.4cqw; left: 30%; top: -20%; max-width: 100%; }
}


@media (prefers-reduced-motion: reduce) {
  .poster *, .poster *::after { animation: none !important; transition: none !important; }
}