/* ============================================================
   BALÕES CARTOON — decoração animada com GSAP + ScrollTrigger
   ------------------------------------------------------------
   Fica num arquivo separado de propósito: é enfeite, não faz parte
   do layout da landing. Dá para remover a linha que carrega este CSS
   e o script /js/baloes.js que a página volta ao que era, sem sobras.

   Os balões são criados pelo JS e vivem DENTRO de seções já existentes.
   Por que isso não mexe no layout:
   · `.tem-baloes` só liga `position: relative` numa seção que já era
     `static` SEM deslocamento — o desenho na tela é idêntico, muda
     apenas o contexto de posicionamento dos filhos absolutos.
   · A camada é `position: absolute` + `pointer-events: none`: não ocupa
     espaço no fluxo nem rouba clique de link nenhum.
   · Fica em `z-index: 0` e o conteúdo da seção sobe para `z-index: 1`,
     então balão nunca passa por cima de texto.
   Se o GSAP não carregar, nada é criado e a página continua como era.
   ============================================================ */
.tem-baloes { position: relative; }
.tem-baloes > .wrap { position: relative; z-index: 1; }

.baloes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.balao { position: absolute; top: 0; left: 0; will-change: transform; }
/* `overflow: visible` porque o cordão tem traço grosso e encosta na
   borda da viewBox — sem isso ele sai cortado no Safari. */
.balao svg { display: block; width: 100%; height: auto; overflow: visible; }

/* O balão entra pela animação de "pop". O estado inicial fica aqui, e não
   só no GSAP, para não existir um quadro com ele em tamanho cheio antes
   do primeiro render da animação. */
.js .balao { opacity: 0; }