/* ========================================================================== 
   MGX — acabamento de design da versão enxuta

   Esta folha não altera a estrutura nem cria altura. O movimento usa apenas
   opacidade e transform; as superfícies usam os tokens medidos do iHub.
   ========================================================================== */

/* A luz do CTA fica no próprio fundo animado. O halo externo anterior era
   uma caixa posicionada, proibida pela direção visual desta versão. */
.mgx-cta-caixa::before { display: none; }

/* --------------------------------------------------------------------------
   Hero: uma leitura por vez — marca, promessa, contexto, ação e prova.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero.e-parent .elementor-element-8d4fcd6 {
    animation: mgx-design-entra 520ms 80ms cubic-bezier(.16, 1, .3, 1) both;
  }
  .hero.e-parent .mgx-marca-hero {
    animation: mgx-design-varre 900ms 140ms cubic-bezier(.16, 1, .3, 1) both;
  }
  .hero.e-parent .elementor-element-9bd8dd7 {
    animation: mgx-design-entra 700ms 320ms cubic-bezier(.16, 1, .3, 1) both;
  }
  .hero.e-parent .elementor-element-0ef38f6 {
    animation: mgx-design-entra 650ms 480ms cubic-bezier(.16, 1, .3, 1) both;
  }
  .hero.e-parent .elementor-element-5d47307 {
    animation: mgx-design-entra 600ms 620ms cubic-bezier(.16, 1, .3, 1) both;
  }
  .hero.e-parent .mgx-hero-provas {
    animation: mgx-design-entra 600ms 760ms cubic-bezier(.16, 1, .3, 1) both;
  }
}

@keyframes mgx-design-entra {
  /* O CSS herdado deixa três widgets da hero em blur(7px) até a animação
     original terminar. Como esta animação substitui a original, ela também
     precisa encerrar o filtro — caso contrário o texto fica borrado. */
  from { opacity: 0; filter: blur(4px); transform: translateY(16px); }
  to { opacity: 1; filter: none; transform: none; }
}
@keyframes mgx-design-varre {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0); }
}

/* --------------------------------------------------------------------------
   Componentes: azul profundo como massa, azul vivo apenas como sinal.
   -------------------------------------------------------------------------- */
.mgxsit-secao .mgxsit-cartao,
.mgxjanela .mgxfato,
.mgxent .mgxent__item,
.mgxbonus .mgxbonus__item,
.mgxgarantia .mgxgarantia__cartao {
  box-shadow: inset 0 1px 0 rgba(51, 184, 255, 0.12);
  transition:
    transform 260ms cubic-bezier(.16, 1, .3, 1),
    border-color 260ms ease,
    box-shadow 260ms ease;
}

.mgxsit-secao .mgxsit-cartao {
  background:
    linear-gradient(135deg, rgba(0, 85, 145, 0.32), #001929 52%, #000d16);
}
.mgxjanela .mgxfato {
  background:
    linear-gradient(135deg, rgba(0, 85, 145, 0.34), #001929 58%, #000d16);
}
.mgxent .mgxent__item,
.mgxbonus .mgxbonus__item:not(.mgxbonus__item--destaque) {
  background:
    linear-gradient(155deg, rgba(0, 85, 145, 0.34), #001929 48%, #000d16);
}

@media (hover: hover) and (pointer: fine) {
  .mgxsit-secao .mgxsit-cartao:hover,
  .mgxjanela .mgxfato:hover,
  .mgxent .mgxent__item:hover,
  .mgxbonus .mgxbonus__item:hover,
  .mgxgarantia .mgxgarantia__cartao:hover {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(51, 184, 255, 0.48);
    box-shadow: inset 0 1px 0 rgba(51, 184, 255, 0.28), 0 18px 42px -32px rgba(0, 167, 255, 0.9);
  }
}

.mgxjanela .mgxfato a:focus-visible,
.mgxcmp-sanfona > summary:focus-visible,
.mgxfim a:focus-visible {
  outline: 2px solid var(--ihub-azul-claro, #33B8FF);
  outline-offset: 4px;
  border-radius: var(--r-controle, 10px);
}
.mgxcmp-sanfona > summary {
  transition: border-color 220ms ease, background-color 220ms ease, color 220ms ease;
}
.mgxcmp-sanfona > summary:hover {
  background-color: rgba(0, 85, 145, 0.22);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Revelação: o JS marca apenas os componentes próprios da versão enxuta.
   A rede de segurança do script torna tudo visível mesmo se o observador não
   disparar. Nenhuma dimensão participa da animação.
   -------------------------------------------------------------------------- */
html.mgx-design-js [data-mgx-design-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 480ms cubic-bezier(.16, 1, .3, 1) var(--mgx-reveal-delay, 0ms),
    transform 560ms cubic-bezier(.16, 1, .3, 1) var(--mgx-reveal-delay, 0ms),
    border-color 260ms ease,
    box-shadow 260ms ease;
}
html.mgx-design-js [data-mgx-design-reveal].mgx-design-visivel {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  html.mgx-design-js [data-mgx-design-reveal].mgx-design-visivel:is(
    .mgxsit-cartao, .mgxfato, .mgxent__item, .mgxbonus__item, .mgxgarantia__cartao
  ):hover {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.e-parent :is(.elementor-element-8d4fcd6, .mgx-marca-hero, .elementor-element-9bd8dd7,
    .elementor-element-0ef38f6, .elementor-element-5d47307, .mgx-hero-provas),
  html.mgx-design-js [data-mgx-design-reveal] {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
    clip-path: none;
  }
}

/* --------------------------------------------------------------------------
   Revisão de 23/09/2026 (Claude, depois da entrega do Codex)
   A entrada terminava com `filter: blur(0px)` e `transform` identidade
   presos para sempre (preenchimento `both`), porque o estado BASE herdado
   destes blocos é escondido (opacity 0, blur 7px, 80px abaixo) à espera da
   animação da origem. Filtro residual em título grande é o caminho para o
   texto rasterizar mole. Agora o estado base é o final, limpo, e a animação
   só preenche para trás (antes de começar). O botão (02c68c7) ainda rodava a
   animação da origem por cima da do Codex: desligada, o pai já anima.
   -------------------------------------------------------------------------- */
.elementor-3386 .elementor-element:is(.elementor-element-8d4fcd6, .elementor-element-9bd8dd7, .elementor-element-0ef38f6, .elementor-element-02c68c7).elementor-element {
  opacity: 1;
  filter: none;
  transform: none;
}
.elementor-3386 .elementor-element.elementor-element-02c68c7 { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero.e-parent :is(.elementor-element-8d4fcd6, .mgx-marca-hero, .elementor-element-9bd8dd7,
    .elementor-element-0ef38f6, .elementor-element-5d47307, .mgx-hero-provas) {
    animation-fill-mode: backwards;
  }
}

/* --------------------------------------------------------------------------
   23/09/2026 16:45 — CORREÇÃO de defeito que EU criei na revisão acima.
   O hexágono azul do botão é um ::after com z-index -1. Ele só fica atrás do
   texto e NA FRENTE do fundo da hero enquanto algum ancestral forma contexto
   de empilhamento — papel que o filter/transform residual da animação fazia
   sem ninguém saber. Ao limpar o estado final, o hexágono afundou atrás do
   fundo da hero: sobrou texto preto sobre azul-escuro e o reflexo cinza
   ("ilegível", apontado pelo dono). `isolation: isolate` cria o contexto de
   propósito, sem filtro nem transform, em todo botão do construtor.
   -------------------------------------------------------------------------- */
.elementor-widget-button { isolation: isolate; }