/* ==========================================================================
   HERO — a nota do TikTok no fundo (23/09/2026, ideia do dono)

   "Tirar o MGX DIGITAL pequeno e colocar no fundo da hero, até atrás do MGX
   DIGITAL gigante, o ícone do TikTok de um jeito bem foda, preenchendo a
   hero." A nota tem a altura da hero e sobra para cima e para baixo; três
   camadas do mesmo desenho repetem o logo do TikTok em tamanho de cenário:
   ciano deslocado para cima-esquerda, rosa para baixo-direita e a da frente
   em vidro (quase transparente, a rede azul aparece por dentro). O traço é
   desenhado na chegada e as duas cores respiram devagar, fora de fase.
   Brilho sem filtro: um segundo traço largo e transparente (filtro em camada
   animada borra — regra da casa).
   ========================================================================== */

/* o logo pequeno do topo sai: a marca gigante já assina a hero */
.elementor-3386 .elementor-element.elementor-element-8d4fcd6 { display: none !important; }

.mgx-hero-nota {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}
.mgx-hero-nota .mgx-hero-nota__defs { position: absolute; inline-size: 0; block-size: 0; }
.mgx-hero-nota .mgx-hero-nota__camada {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  block-size: 124%;
  inline-size: auto;
  aspect-ratio: 1;
  overflow: visible;
  translate: -50% -46%;
}
.mgx-hero-nota use { vector-effect: non-scaling-stroke; }
.mgx-hero-nota .mgx-hero-nota__traco { fill: none; stroke-width: 2px; stroke-linejoin: round; }
.mgx-hero-nota .mgx-hero-nota__brilho { fill: none; stroke-width: 18px; stroke-linejoin: round; opacity: 0.16; }

.mgx-hero-nota .mgx-hero-nota__camada--ciano { transform: translate(-12px, -9px); }
.mgx-hero-nota .mgx-hero-nota__camada--ciano use { stroke: var(--tt-ciano, #25F4EE); }
.mgx-hero-nota .mgx-hero-nota__camada--ciano .mgx-hero-nota__traco { opacity: 0.8; }

.mgx-hero-nota .mgx-hero-nota__camada--rosa { transform: translate(12px, 9px); }
.mgx-hero-nota .mgx-hero-nota__camada--rosa use { stroke: var(--tt-rosa, #FE2C55); }
.mgx-hero-nota .mgx-hero-nota__camada--rosa .mgx-hero-nota__traco { opacity: 0.75; }

.mgx-hero-nota .mgx-hero-nota__vidro { fill: url(#mgx-nota-vidro); stroke: none; }
.mgx-hero-nota .mgx-hero-nota__camada--frente .mgx-hero-nota__traco { stroke: rgba(230, 244, 255, 0.55); }

/* o conteúdo da hero fica acima da nota */
.hero.e-parent > .e-con-inner > :not(.elementor-background-video-container) { position: relative; z-index: 2; }

@media (prefers-reduced-motion: no-preference) {
  /* chegada: a nota sobe de baixo para cima (recorte de pintura, não traço
     tracejado — o tracejado com traço que não escala saía em pedaços) */
  .mgx-hero-nota .mgx-hero-nota__camada { animation: mgx-nota-surgir 1.8s 0.2s cubic-bezier(.65, 0, .35, 1) both; }
  /* depois: as duas cores respiram, fora de fase */
  .mgx-hero-nota .mgx-hero-nota__camada--ciano { animation: mgx-nota-surgir 1.8s 0.2s cubic-bezier(.65, 0, .35, 1) both, mgx-nota-ciano 7s 2.1s ease-in-out infinite alternate; }
  .mgx-hero-nota .mgx-hero-nota__camada--rosa { animation: mgx-nota-surgir 1.8s 0.35s cubic-bezier(.65, 0, .35, 1) both, mgx-nota-rosa 7s 2.3s ease-in-out infinite alternate; }
}
@keyframes mgx-nota-surgir { from { clip-path: inset(100% 0 0 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes mgx-nota-ciano { from { transform: translate(-12px, -9px); } to { transform: translate(-20px, -14px); } }
@keyframes mgx-nota-rosa { from { transform: translate(12px, 9px); } to { transform: translate(20px, 14px); } }

@media (max-width: 47.99rem) {
  .mgx-hero-nota .mgx-hero-nota__camada { block-size: 112%; translate: -50% -44%; }
  .mgx-hero-nota .mgx-hero-nota__camada--ciano { transform: translate(-7px, -5px); }
  .mgx-hero-nota .mgx-hero-nota__camada--rosa { transform: translate(7px, 5px); }
  @keyframes mgx-nota-ciano { from { transform: translate(-7px, -5px); } to { transform: translate(-11px, -8px); } }
  @keyframes mgx-nota-rosa { from { transform: translate(7px, 5px); } to { transform: translate(11px, 8px); } }
}

/* "dá para descer mais esse trecho" (23/09 20h50): botões e pílulas descem,
   o título fica onde está. `translate` (e não margem) para não recentralizar
   o bloco inteiro nem brigar com o transform da animação de entrada. */
.hero.e-parent .elementor-element-5d47307,
.hero.e-parent .mgx-hero-provas {
  translate: 0 clamp(3rem, 12vh, 7rem);
}