/* Motor de Convites 2.1.3 — Trio responsivo. Última camada após os estilos do tema. */
.character-trio{position:relative;isolation:isolate;max-width:100%;box-sizing:border-box}
.character-trio[hidden],.character-trio .character-position:not(.has-character){display:none!important}
/* Decoração antiga por pseudo-elemento não pode introduzir 4º personagem. */
.character-trio::after{display:none!important;content:none!important}
.character-trio .character-position{
  position:absolute!important;display:block!important;top:auto!important;bottom:0!important;
  transform:none!important;translate:none!important;rotate:none!important;
  inset-inline:auto!important;margin:0!important;padding:0!important;
  opacity:1!important;visibility:visible!important;filter:none!important;
  animation:none!important;transition:none!important;pointer-events:none!important;
  width:34%!important;height:80%!important;z-index:2!important;
}
.character-trio .character-position--left{left:3%!important;right:auto!important}
.character-trio .character-position--center{left:26%!important;right:auto!important;width:48%!important;height:100%!important;z-index:4!important}
.character-trio .character-position--right{right:3%!important;left:auto!important}
.character-trio .character-position img{
  display:block;width:100%!important;height:100%!important;
  max-width:100%!important;object-fit:contain!important;object-position:center bottom!important;
  opacity:1!important;transform:none!important;
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.20));
  animation:none!important;pointer-events:none!important;
}
.character-trio .character-position img[hidden]{display:none!important}
/* Fallback automático para 1 personagem; não pressupõe que seja o central. */
.character-trio[data-count="1"] .character-position.has-character{
  left:25%!important;right:auto!important;width:50%!important;height:100%!important;z-index:4!important;
}
/* Dois: distribuir no centro da faixa sem deixar buraco ou cortar laterais. */
.character-trio[data-count="2"] .character-position.has-character{width:43%!important;height:91%!important}
.character-trio[data-count="2"] .character-position.has-character:first-of-type{left:7%!important;right:auto!important}
.character-trio[data-count="2"] .character-position.has-character:last-of-type{left:auto!important;right:7%!important}
.character-trio[data-count="2"][data-pair="left-center"] .character-position--left{left:7%!important;right:auto!important}
.character-trio[data-count="2"][data-pair="left-center"] .character-position--center{left:auto!important;right:7%!important;height:100%!important}
.character-trio[data-count="2"][data-pair="center-right"] .character-position--center{left:7%!important;right:auto!important;height:100%!important}
.character-trio[data-count="2"][data-pair="center-right"] .character-position--right{left:auto!important;right:7%!important}
.character-trio[data-count="2"][data-pair="left-right"] .character-position--left{left:7%!important;right:auto!important}
.character-trio[data-count="2"][data-pair="left-right"] .character-position--right{left:auto!important;right:7%!important}
/* Faixas fechadas: nenhum personagem invade botões, título ou data. */
.home-characters.character-trio{width:100%;height:clamp(135px,29dvh,275px);min-height:0;margin-block:0 3px;flex-shrink:1;overflow:hidden}
.about-character-stage.character-trio{width:100%;height:clamp(85px,17dvh,135px);min-height:0;overflow:hidden}
.splash-character-stage.character-trio{width:100%;max-width:620px;height:clamp(145px,38dvh,330px);min-height:0;overflow:hidden;pointer-events:none}
/* No vídeo, não se exibe a composição por baixo do filme. */
.splash.splash--video .splash-character-stage.character-trio{display:none!important}
/* Temas com abertura sem vídeo devem poder exibir o trio mesmo quando
   seu CSS histórico foi escrito para uma abertura padrão em vídeo. */
.splash:not(.splash--video) .splash-character-stage.character-trio:not([hidden]){display:block!important}
/* Abertura do Safari utiliza position:absolute; limitar ao espaço entre logo e CTA. */
.splash:not(.splash--video) .splash-character-stage.character-trio{max-height:40dvh}
@media(max-width:390px){
  .home-characters.character-trio{height:clamp(130px,26dvh,210px)}
  .splash-character-stage.character-trio{max-height:35dvh}
  .character-trio .character-position--center{left:25%!important;width:50%!important}
  .character-trio .character-position--left,.character-trio .character-position--right{width:35%!important}
}
@media(max-height:640px){
  .home-characters.character-trio{height:clamp(105px,21dvh,155px)}
  .splash-character-stage.character-trio{height:clamp(125px,30dvh,210px);max-height:30dvh}
}
@media(prefers-reduced-motion:reduce){.character-trio .character-position,.character-trio .character-position img{animation:none!important;transition:none!important}}
/* Abertura: os três personagens entram após o cenário, sem aparecer antes da timeline. */
.splash:not(.splash--video) .character-trio .character-position.has-character{opacity:0!important;transition:opacity .55s ease!important}
.splash.is-characters-in:not(.splash--video) .character-trio .character-position.has-character{opacity:1!important}
.splash:not(.splash--video) .character-trio .character-position--center{transition-delay:.10s!important}
.splash:not(.splash--video) .character-trio .character-position--right{transition-delay:.18s!important}
@media(prefers-reduced-motion:reduce){
  .splash:not(.splash--video) .character-trio .character-position.has-character{opacity:1!important;transition:none!important}
}

/* Compatível com Interaction Engine: preservar flutuação configurada no tema. */
html:not([data-interaction-floating="none"]) .character-trio .character-position img.interaction-floating{
  animation:interactionFloat var(--interaction-float-time) ease-in-out infinite!important;
  animation-delay:var(--interaction-float-delay,0s)!important;
}
@media(prefers-reduced-motion:reduce){
  html:not([data-interaction-floating="none"]) .character-trio .character-position img.interaction-floating{animation:none!important;translate:none!important}
}