/* =====================================================================
   m24-halloween38 — morcegos voando, aranha descendo na teia e mão de
   zumbi. Só vale sob `.m24-halloween38`, que o JS aplica entre 23 e
   31 de outubro.

   ⚠️ DUAS TENTATIVAS FORAM RECUSADAS ANTES, e as duas ensinaram a regra
   que manda aqui:
     1ª — teia no canto + brilho âmbar: "fraco e sem sentido". Era
          enfeite genérico colado num jogo de futebol.
     2ª — esculpir o escudo como abóbora. Comparei o escudo a 1x, 2x e 3x
          lado a lado: **a 41px a cara vira mancha**. Só lê a partir de
          2x, que nenhum jogador vê.

   ⚠️ A REGRA: **vulto lê, detalhe não.** Silhueta de morcego a 26px o
   olho reconhece na hora; cara esculpida a 41px, não. Por isso aqui é
   tudo silhueta, em tamanho que respira.

   ⚠️ NUNCA POR CIMA DE BOTÃO. A camada tem z-index 0 dentro do cartão, e
   a barra, a marca e a pilha de ações sobem para z-index 1. As pílulas
   têm fundo BRANCO OPACO (medido), então o bicho passa ATRÁS delas.
   `pointer-events:none` em tudo: nada rouba clique.

   ⚠️ ZERO IMPACTO DE LAYOUT. A camada é `position:absolute` dentro do
   cartão, que já é `position:relative`.
   ===================================================================== */

.m24-halloween38 .intro-hero-card { position: relative; }

/* a interface sobe; os bichos ficam atrás dela */
.m24-halloween38 .home-hero-toolbar,
.m24-halloween38 .start-brand,
.m24-halloween38 .intro-actions-center {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------
   A CAMADA — o JS cria, com um filho por bicho.
   ::before/::after dariam só 2 por elemento; aqui são 6.
   --------------------------------------------------------------------- */
.m24-hw-camada38 {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;          /* nada vaza para fora do cartão */
  pointer-events: none;
  border-radius: 18px;       /* o mesmo raio do cartão (medido) */
}
.m24-hw-camada38 span {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   1. MORCEGOS

   Três, em alturas e velocidades diferentes.

   ⚠️ O bater de asa e a travessia são DUAS animações em DOIS elementos
   aninhados. Num elemento só, a segunda sobrescreveria o `transform` da
   primeira e o morcego ou bate asa parado, ou atravessa rígido.
   --------------------------------------------------------------------- */
.m24-hw-voo38 {
  left: -44px;
  top: 0;
  width: 30px;
  height: 14px;
  animation-name: m24HwVoo38;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes m24HwVoo38 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: .9; }
  25%  { transform: translate(100px, -18px); }
  50%  { transform: translate(195px, 12px); }
  75%  { transform: translate(290px, -14px); }
  92%  { opacity: .9; }
  100% { transform: translate(400px, 6px); opacity: 0; }
}

.m24-hw-morcego38 {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 22'%3E%3Cpath fill='%23151c2b' d='M26 4.4c1.5 0 2.4 1 2.8 2.2 1.6-2 3.6-3.4 6.2-4.5 2.9-1.2 5.6-1.6 8.3-1.5-1.5 1.4-2.3 3-2.5 4.9 2-.6 3.9-.5 5.8.3-1.7.9-2.8 2.2-3.4 3.9 1.9.2 3.5 1 4.8 2.4-3.4.2-6 1.3-8.4 3.3-2.1 1.8-3.6 3.9-5.1 6.2-1.3-2.4-3-4-5.4-4.8-1 .6-1.9.9-3.1.9s-2.1-.3-3.1-.9c-2.4.8-4.1 2.4-5.4 4.8-1.5-2.3-3-4.4-5.1-6.2-2.4-2-5-3.1-8.4-3.3 1.3-1.4 2.9-2.2 4.8-2.4-.6-1.7-1.7-3-3.4-3.9 1.9-.8 3.8-.9 5.8-.3-.2-1.9-1-3.5-2.5-4.9 2.7-.1 5.4.3 8.3 1.5 2.6 1.1 4.6 2.5 6.2 4.5.4-1.2 1.3-2.2 2.8-2.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  animation: m24HwAsa38 .32s ease-in-out infinite alternate;
}
@keyframes m24HwAsa38 {
  from { transform: scaleY(1); }
  to   { transform: scaleY(.58); }
}

.m24-hw-voo38.v1 { top: 30px;  animation-duration: 11s; animation-delay: .5s; }
.m24-hw-voo38.v2 { top: 86px;  animation-duration: 15s; animation-delay: 5s; width: 22px; height: 10px; }
.m24-hw-voo38.v3 { top: 148px; animation-duration: 13s; animation-delay: 9s; width: 36px; height: 16px; }

/* ---------------------------------------------------------------------
   2. A ARANHA QUE DESCE NA TEIA

   Desce, para, balança e sobe. O fio cresce junto com ela.

   ⚠️ Fica na faixa DIREITA do cartão, onde não há rótulo por baixo — e
   mesmo assim passa atrás das pílulas.
   --------------------------------------------------------------------- */
.m24-hw-fio38 {
  top: 0;
  right: 40px;
  width: 1px;
  height: 0;
  background: rgba(21, 28, 43, .42);
  animation: m24HwFio38 15s ease-in-out infinite;
}
@keyframes m24HwFio38 {
  0%, 5%    { height: 0; }
  24%, 56%  { height: 104px; }
  34%, 48%  { height: 112px; }
  80%, 100% { height: 0; }
}

.m24-hw-aranha38 {
  top: 0;
  right: 32px;
  width: 17px;
  height: 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg stroke='%23151c2b' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Cpath d='M12 14 L4 9 L1 13'/%3E%3Cpath d='M12 16 L3 16 L0 20'/%3E%3Cpath d='M12 18 L4 22 L2 27'/%3E%3Cpath d='M13 20 L9 26 L10 29'/%3E%3Cpath d='M18 14 L26 9 L29 13'/%3E%3Cpath d='M18 16 L27 16 L30 20'/%3E%3Cpath d='M18 18 L26 22 L28 27'/%3E%3Cpath d='M17 20 L21 26 L20 29'/%3E%3C/g%3E%3Cellipse cx='15' cy='17' rx='5.4' ry='6.2' fill='%23151c2b'/%3E%3Ccircle cx='15' cy='10.5' r='3.6' fill='%23151c2b'/%3E%3C/svg%3E");
  animation: m24HwDesce38 15s ease-in-out infinite;
}
@keyframes m24HwDesce38 {
  0%, 5%    { transform: translateY(-20px); opacity: 0; }
  12%       { opacity: .95; }
  24%, 56%  { transform: translateY(100px); opacity: .95; }
  34%       { transform: translateY(108px) rotate(6deg); }
  48%       { transform: translateY(108px) rotate(-6deg); }
  76%       { opacity: .95; }
  80%, 100% { transform: translateY(-20px); opacity: 0; }
}

/* ---------------------------------------------------------------------
   3. A MÃO DE ZUMBI

   Sobe do rodapé do cartão, agarra o ar e volta. Canto esquerdo, longe
   do botão principal.

   ⚠️ É a mais arriscada das três: mão saindo do chão pode virar piada em
   vez de clima. Por isso só aparece no modo "completo", para ser julgada
   em separado.
   --------------------------------------------------------------------- */
.m24-hw-mao38 {
  bottom: -2px;
  left: 20px;
  width: 32px;
  height: 44px;
  opacity: .88;
  background-position: bottom center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 44'%3E%3Cg fill='%23151c2b'%3E%3Crect x='13' y='24' width='7' height='20' rx='3'/%3E%3Crect x='3.4' y='17' width='4.4' height='27' rx='2.2' transform='rotate(-14 5.6 30)'/%3E%3Crect x='9' y='11' width='4.6' height='33' rx='2.3' transform='rotate(-5 11.3 27)'/%3E%3Crect x='14.8' y='8.5' width='4.7' height='35' rx='2.35'/%3E%3Crect x='20.6' y='12' width='4.6' height='32' rx='2.3' transform='rotate(6 22.9 28)'/%3E%3Crect x='25.4' y='20' width='4.2' height='24' rx='2.1' transform='rotate(17 27.5 32)'/%3E%3C/g%3E%3C/svg%3E");
  animation: m24HwMao38 18s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes m24HwMao38 {
  0%, 10%   { transform: translateY(48px); }
  22%       { transform: translateY(2px); }
  28%       { transform: translateY(2px) rotate(-6deg); }
  34%       { transform: translateY(2px) rotate(5deg); }
  40%       { transform: translateY(2px); }
  52%, 100% { transform: translateY(48px); }
}

/* ---------------------------------------------------------------------
   3b. A PÍLULA "FELIZ HALLOWEEN"

   ⚠️ COR ESCOLHIDA POR MEDIÇÃO, não por gosto: branco sobre #f59e0b dá
   2,15:1 e sobre #d97706 dá 3,19 — os dois REPROVAM no piso de 4,5.
   #b45309 dá 5,02 e ainda é laranja de verdade. Depois de passar a terça
   consertando contraste, não ia abrir exceção para um enfeite.

   ⚠️ Vai DENTRO de .start-brand com `order:-1`, então nasce acima do
   "MODO TREINADOR". Isso ACRESCENTA uma linha e empurra o conteúdo ~26px
   para baixo — é banner, e banner ocupa espaço. Não é quebra de layout:
   nada sai do lugar na horizontal, nada estoura, nada cobre botão.
   --------------------------------------------------------------------- */
.m24-hw-pilula38 {
  order: -1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  padding: 5px 13px;
  border-radius: 999px;
  background: #b45309;
  color: #fff;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(180, 83, 9, .35);
}
/* o morceguinho do rótulo acompanha a tremulação do escudo, bem de leve */
.m24-hw-pilula38 .m24-hw-pilula-icone38 {
  width: 13px;
  height: 6px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 22'%3E%3Cpath fill='%23ffffff' d='M26 4.4c1.5 0 2.4 1 2.8 2.2 1.6-2 3.6-3.4 6.2-4.5 2.9-1.2 5.6-1.6 8.3-1.5-1.5 1.4-2.3 3-2.5 4.9 2-.6 3.9-.5 5.8.3-1.7.9-2.8 2.2-3.4 3.9 1.9.2 3.5 1 4.8 2.4-3.4.2-6 1.3-8.4 3.3-2.1 1.8-3.6 3.9-5.1 6.2-1.3-2.4-3-4-5.4-4.8-1 .6-1.9.9-3.1.9s-2.1-.3-3.1-.9c-2.4.8-4.1 2.4-5.4 4.8-1.5-2.3-3-4.4-5.1-6.2-2.4-2-5-3.1-8.4-3.3 1.3-1.4 2.9-2.2 4.8-2.4-.6-1.7-1.7-3-3.4-3.9 1.9-.8 3.8-.9 5.8-.3-.2-1.9-1-3.5-2.5-4.9 2.7-.1 5.4.3 8.3 1.5 2.6 1.1 4.6 2.5 6.2 4.5.4-1.2 1.3-2.2 2.8-2.2z'/%3E%3C/svg%3E");
  animation: m24HwAsa38 .32s ease-in-out infinite alternate;
}

/* ---------------------------------------------------------------------
   4. O ESCUDO ACESO — o que de fato lê a 41px: cor e luz

   O losango já é amarelo; vira laranja de abóbora. O brilho que gira no
   globo (m24LogoGira38, no ar desde 21/10) fica âmbar.

   ⚠️ Chama de vela NÃO é pulso suave: treme irregular. Os quadros abaixo
   são desiguais de propósito; uma senoide pareceria respiração.
   --------------------------------------------------------------------- */
.m24-halloween38 .flag-diamond {
  background:
    radial-gradient(circle at 50% 62%, #ffb648 0%, #f59e0b 46%, #d97706 100%) !important;
}
.m24-halloween38 .flag-circle::after {
  background: linear-gradient(100deg,
    rgba(255, 170, 40, 0) 32%,
    rgba(255, 200, 90, .95) 50%,
    rgba(255, 170, 40, 0) 68%) !important;
}
.m24-halloween38 .brand-mark {
  animation: m24HwVela38 2.3s ease-in-out infinite;
}
@keyframes m24HwVela38 {
  0%   { box-shadow: 0 0 0 2px rgba(255, 150, 40, .20), 0 3px 14px rgba(255, 120, 20, .30); }
  11%  { box-shadow: 0 0 0 3px rgba(255, 170, 60, .34), 0 5px 20px rgba(255, 140, 30, .48); }
  19%  { box-shadow: 0 0 0 2px rgba(255, 150, 40, .18), 0 3px 12px rgba(255, 120, 20, .26); }
  37%  { box-shadow: 0 0 0 4px rgba(255, 180, 70, .40), 0 7px 24px rgba(255, 150, 40, .56); }
  44%  { box-shadow: 0 0 0 2px rgba(255, 150, 40, .22), 0 4px 15px rgba(255, 120, 20, .32); }
  63%  { box-shadow: 0 0 0 3px rgba(255, 170, 60, .36), 0 6px 22px rgba(255, 140, 30, .50); }
  71%  { box-shadow: 0 0 0 2px rgba(255, 150, 40, .19), 0 3px 13px rgba(255, 120, 20, .28); }
  88%  { box-shadow: 0 0 0 4px rgba(255, 185, 75, .42), 0 7px 26px rgba(255, 150, 40, .58); }
  100% { box-shadow: 0 0 0 2px rgba(255, 150, 40, .20), 0 3px 14px rgba(255, 120, 20, .30); }
}

/* ---------------------------------------------------------------------
   5. O BOTAO "COMECAR CARREIRA" - pedido de 24/10: destruido, velho,
   morto-vivo.  (m24-hw-botao38)

   /!\ MESMA REGRA DE SEMPRE: vulto le, detalhe nao. O botao tem ~330px no
   celular e ~1150px no desktop, 62px de altura - cabe mais que o escudo
   de 41px, mas textura fina some do mesmo jeito. Entao sao tres coisas
   GRANDES: a cor necrosada, o contorno lascado e duas fendas.

   /!\ SELETOR LONGO DE PROPOSITO. Quem pinta o botao hoje e
   `.m24-home-cta-stack>.intro-primary-btn.home-manager-hero-btn:not(
   .m24ol-home-btn)` (0,4,0) com `!important` em cima de raio, padding e
   sombra - repito a cadeia inteira em vez de encurtar, senao o
   `!important` antigo vence o novo (ja aconteceu com o cartao do Online).

   /!\ NAO ANIMO `transform` AQUI. O botao usa `:active{transform:scale(.98)}`
   como feedback de toque, e animacao CSS vence declaracao normal: animar
   transform mataria o unico retorno que o jogador tem ao tocar. O que
   pulsa e a luz das fendas, num pseudo-elemento a parte.

   /!\ A mascara recorta tambem a sombra EXTERNA (ela e desenhada fora do
   border-box). Por isso a elevacao aqui e interna - tentar manter a
   sombra de fora com a mascara ligada deixa um halo cortado, feio.

   /!\ A MASCARA REPETE, NAO ESTICA. Primeiro desenho usei
   `mask-size:100% 100%`: ficou otimo nos 330px do celular e virou uma
   BANDEIRA ondulada nos 688px do desktop e um retangulo quase liso a
   1150px - as mesmas lascas esticadas 3,8x deixam de ser lascas. Com
   `auto 100%` + `repeat-x` a peca mantem o tamanho e so se repete; por
   isso ela e tileavel (o y das pontas casa, senao a emenda vira degrau).
   --------------------------------------------------------------------- */
.m24-halloween38 .m24-home-cta-stack > .intro-primary-btn.home-manager-hero-btn:not(.m24ol-home-btn) {
  position: relative;
  overflow: hidden;
  border: 1px solid #0b170d !important;
  /* ja nasce torto: e o que resta quando o navegador nao tem mascara */
  border-radius: 17px 5px 18px 4px / 5px 17px 4px 18px !important;
  /* /!\ 14px -> 17px: e o respiro que a lasca mais funda precisa. Sem
     isso a mordida come o topo da palavra "Comecar". Custa 6px de
     altura no cartao, nada se move na horizontal. */
  padding: 17px 18px !important;
  background:
    radial-gradient(62% 130% at 13% 132%, rgba(150, 210, 70, .20), transparent 60%),
    radial-gradient(70% 150% at 89% -32%, rgba(9, 18, 11, .55), transparent 62%),
    linear-gradient(180deg, #3f5f3c 0%, #2a4830 48%, #15271a 100%) !important;
  /* carne velha: a elevacao vem de dentro, porque a mascara come a de fora */
  box-shadow:
    inset 0 1px 0 rgba(176, 222, 150, .20),
    inset 0 -12px 20px rgba(0, 0, 0, .42) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 64'%3E%3Cpath fill='%23fff' d='M0 1 50 1 63 10 77 1 95 2 104 9 119 2 184 2 197 9 211 1 243 2 254 10 267 2 300 1 300 63 261 63 249 54 237 63 199 62 189 54 177 63 119 62 109 53 97 62 55 63 45 54 33 62 0 63Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 64'%3E%3Cpath fill='%23fff' d='M0 1 50 1 63 10 77 1 95 2 104 9 119 2 184 2 197 9 211 1 243 2 254 10 267 2 300 1 300 63 261 63 249 54 237 63 199 62 189 54 177 63 119 62 109 53 97 62 55 63 45 54 33 62 0 63Z'/%3E%3C/svg%3E");
  -webkit-mask-size: auto 100%;          mask-size: auto 100%;
  -webkit-mask-repeat: repeat-x;         mask-repeat: repeat-x;
}

/* /!\ Os dois pseudo-elementos ficam em z-index 0 e o conteudo sobe para 1 -
   o MESMO arranjo da camada dos bichos. Sem isso o pseudo-elemento
   posicionado pintaria por cima do texto, porque elemento posicionado
   vence elemento nao posicionado, e "Comecar carreira" sumiria atras da
   rachadura. */
.m24-halloween38 .m24-home-cta-stack > .intro-primary-btn.home-manager-hero-btn:not(.m24ol-home-btn) > svg,
.m24-halloween38 .m24-home-cta-stack > .intro-primary-btn.home-manager-hero-btn:not(.m24ol-home-btn) > .home-manager-hero-copy {
  position: relative;
  z-index: 1;
}

/* as fendas: ancoradas nos cantos, nunca esticadas
   /!\ `background-size: auto 100%` mantem a proporcao pela ALTURA. Esticar
   pela largura faria a mesma rachadura ficar fina no celular e gorda no
   desktop. */
.m24-halloween38 .m24-home-cta-stack > .intro-primary-btn.home-manager-hero-btn:not(.m24ol-home-btn)::before,
.m24-halloween38 .m24-home-cta-stack > .intro-primary-btn.home-manager-hero-btn:not(.m24ol-home-btn)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}
/* a fenda ESCURA pode ir em qualquer lugar: escuro atras de texto branco
   so aumenta o contraste */
.m24-halloween38 .m24-home-cta-stack > .intro-primary-btn.home-manager-hero-btn:not(.m24ol-home-btn)::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 64'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%2382b072' stroke-opacity='.34' stroke-width='1.3' transform='translate(1.3 1)'%3E%3Cpath d='M26 0 29 10 22 17 30 26 24 35 32 45 27 54 34 64'/%3E%3Cpath d='M30 26 44 21 52 25'/%3E%3C/g%3E%3Cg stroke='%23050c05' stroke-opacity='.9' stroke-width='3.4'%3E%3Cpath d='M26 0 29 10 22 17 30 26 24 35 32 45 27 54 34 64'/%3E%3Cpath d='M30 26 44 21 52 25'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 64'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%2382b072' stroke-opacity='.34' stroke-width='1.3' transform='translate(1.3 1)'%3E%3Cpath d='M38 64 34 54 41 45 35 35 40 25 33 14 37 2'/%3E%3Cpath d='M35 35 23 39 15 34'/%3E%3C/g%3E%3Cg stroke='%23050c05' stroke-opacity='.9' stroke-width='3.4'%3E%3Cpath d='M38 64 34 54 41 45 35 35 40 25 33 14 37 2'/%3E%3Cpath d='M35 35 23 39 15 34'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-position: left -6px center, right -8px center;
  background-size: auto 100%, auto 100%;
  opacity: .9;
}
/* O QUE ACENDE: a borda lascada inteira, mais a fenda do lado do icone.

   /!\ A LUZ e quem faz a casca LER. Fenda escura sobre fundo escuro e
   invisivel a 1x - foi o que aconteceu na 2a calibragem, com traco de
   3px: no zoom estava la, na tela do celular sumia. Claro sobre escuro
   lê; escuro sobre escuro, não.

   /!\ MAS A LUZ NAO PODE PASSAR ATRAS DO TEXTO. Calculado: o nucleo do
   traco em `screen` sobre o fundo da (190,235,113) - com branco por cima
   isso da 1,4:1, muito abaixo do piso de 4,5. Nao e teoria: e o mesmo
   erro de contraste que custou a terca inteira na pilula.

   /!\ Tentei primeiro RECORTAR a luz com uma mascara horizontal. Passou
   no contraste e matou o efeito: no celular sobrava um risco atras do
   icone e o botao ficava morto, sem o vivo. A saida foi trocar ONDE a
   luz mora - ela acompanha a BORDA, nos 13px das pontas, e o padding
   vertical e 17px: a luz nunca chega perto de uma letra, e ainda assim
   banha o botao inteiro.

   /!\ O degrade tem de ter ESPESSURA (13px), nao 2px. A mascara corta
   este pseudo-elemento no formato da lasca: com 2px a luz sumiria dentro
   de cada mordida e sobrariam tracinhos soltos. Com 13px ela segue o
   contorno lascado.

   A fenda do lado esquerdo tambem acende porque ali nao ha letra -
   medido: no celular o icone vai ate 20% e o texto comeca em 24%; a
   fenda inteira (com o ramo) para em 16%. */
.m24-halloween38 .m24-home-cta-stack > .intro-primary-btn.home-manager-hero-btn:not(.m24ol-home-btn)::after {
  background-image:
    linear-gradient(180deg, rgba(172, 234, 86, .55) 0, rgba(172, 234, 86, .16) 7px, rgba(172, 234, 86, 0) 13px),
    linear-gradient(0deg, rgba(172, 234, 86, .46) 0, rgba(172, 234, 86, .14) 7px, rgba(172, 234, 86, 0) 13px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 64'%3E%3Cg fill='none' stroke='%23c3f85c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 0 29 10 22 17 30 26 24 35 32 45 27 54 34 64'/%3E%3Cpath d='M30 26 44 21 52 25'/%3E%3C/g%3E%3C/svg%3E");
  background-position: top left, bottom left, left -6px center;
  background-size: 100% 13px, 100% 13px, auto 100%;
  filter: blur(1.1px);
  mix-blend-mode: screen;
  opacity: .62;
  animation: m24HwPulso38 3.4s ease-in-out infinite;
}
/* /!\ Quadros desiguais, como a chama de vela do escudo: uma senoide
   pareceria respiracao saudavel, e a ideia aqui e o contrario. */
@keyframes m24HwPulso38 {
  0%   { opacity: .46; }
  14%  { opacity: .78; }
  21%  { opacity: .52; }
  43%  { opacity: .92; }
  52%  { opacity: .55; }
  69%  { opacity: .74; }
  78%  { opacity: .48; }
  91%  { opacity: .88; }
  100% { opacity: .46; }
}

/* o icone perde o branco de plastico e fica esverdeado de doente */
.m24-halloween38 .m24-home-cta-stack > .intro-primary-btn.home-manager-hero-btn:not(.m24ol-home-btn) > svg {
  color: #d7f3a8 !important;
  background: rgba(150, 210, 70, .16) !important;
  box-shadow: inset 0 0 0 1px rgba(150, 210, 70, .26) !important;
}

/* /!\ Existe `text-shadow:none!important` varrendo `.home-manager-hero-btn`.
   Para o brilho entrar e preciso cadeia maior + !important - nao e
   preguica, e a unica forma de vencer. O texto continua BRANCO: o
   contraste sobre #3f5f3c (o tom mais claro do gradiente) e 7,4:1. */
.m24-halloween38 .m24-home-cta-stack > .intro-primary-btn.home-manager-hero-btn:not(.m24ol-home-btn) .home-manager-hero-title {
  text-shadow: 0 0 11px rgba(150, 210, 70, .42) !important;
}
.m24-halloween38 .m24-home-cta-stack > .intro-primary-btn.home-manager-hero-btn:not(.m24ol-home-btn) .home-manager-hero-sub {
  color: rgba(226, 240, 214, .92) !important;
  -webkit-text-fill-color: rgba(226, 240, 214, .92);
}

/* hover/ativo continuam os do jogo; so o brilho muda de cor */
.m24-halloween38 .m24-home-cta-stack > .intro-primary-btn.home-manager-hero-btn:not(.m24ol-home-btn):hover:not(:disabled) {
  filter: brightness(1.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(176, 222, 150, .26),
    inset 0 -12px 20px rgba(0, 0, 0, .38) !important;
}

/* /!\ No desktop o botao tem 688px (e ate 1150px em tela larga): duas
   fendas nas pontas deixam um vazio liso no meio, e a luz muda de lado.
   Medido no jogo a 1280px: o texto para em 59% da largura, entao a
   metade direita esta livre - e e la que a luz acende, com uma terceira
   fenda. No celular as tres se encostariam, por isso so aqui. */
@media (min-width: 720px) {
  .m24-halloween38 .m24-home-cta-stack > .intro-primary-btn.home-manager-hero-btn:not(.m24ol-home-btn)::before {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 64'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%2382b072' stroke-opacity='.34' stroke-width='1.3' transform='translate(1.3 1)'%3E%3Cpath d='M26 0 29 10 22 17 30 26 24 35 32 45 27 54 34 64'/%3E%3Cpath d='M30 26 44 21 52 25'/%3E%3C/g%3E%3Cg stroke='%23050c05' stroke-opacity='.9' stroke-width='3.4'%3E%3Cpath d='M26 0 29 10 22 17 30 26 24 35 32 45 27 54 34 64'/%3E%3Cpath d='M30 26 44 21 52 25'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 64'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%2382b072' stroke-opacity='.34' stroke-width='1.3' transform='translate(1.3 1)'%3E%3Cpath d='M33 0 36 12 28 20 35 30 30 41 37 52 32 64'/%3E%3Cpath d='M35 30 47 26 54 30'/%3E%3C/g%3E%3Cg stroke='%23050c05' stroke-opacity='.9' stroke-width='3.4'%3E%3Cpath d='M33 0 36 12 28 20 35 30 30 41 37 52 32 64'/%3E%3Cpath d='M35 30 47 26 54 30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 64'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%2382b072' stroke-opacity='.34' stroke-width='1.3' transform='translate(1.3 1)'%3E%3Cpath d='M38 64 34 54 41 45 35 35 40 25 33 14 37 2'/%3E%3Cpath d='M35 35 23 39 15 34'/%3E%3C/g%3E%3Cg stroke='%23050c05' stroke-opacity='.9' stroke-width='3.4'%3E%3Cpath d='M38 64 34 54 41 45 35 35 40 25 33 14 37 2'/%3E%3Cpath d='M35 35 23 39 15 34'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-position: left -6px center, 78% center, right -8px center;
    background-size: auto 100%, auto 100%, auto 100%;
  }
  .m24-halloween38 .m24-home-cta-stack > .intro-primary-btn.home-manager-hero-btn:not(.m24ol-home-btn)::after {
    background-image:
      linear-gradient(180deg, rgba(172, 234, 86, .55) 0, rgba(172, 234, 86, .16) 7px, rgba(172, 234, 86, 0) 13px),
      linear-gradient(0deg, rgba(172, 234, 86, .46) 0, rgba(172, 234, 86, .14) 7px, rgba(172, 234, 86, 0) 13px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 64'%3E%3Cg fill='none' stroke='%23c3f85c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 0 29 10 22 17 30 26 24 35 32 45 27 54 34 64'/%3E%3Cpath d='M30 26 44 21 52 25'/%3E%3C/g%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 64'%3E%3Cg fill='none' stroke='%23c3f85c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M33 0 36 12 28 20 35 30 30 41 37 52 32 64'/%3E%3Cpath d='M35 30 47 26 54 30'/%3E%3C/g%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 64'%3E%3Cg fill='none' stroke='%23c3f85c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M38 64 34 54 41 45 35 35 40 25 33 14 37 2'/%3E%3Cpath d='M35 35 23 39 15 34'/%3E%3C/g%3E%3C/svg%3E");
    background-position: top left, bottom left, left -6px center, 78% center, right -8px center;
    background-size: 100% 13px, 100% 13px, auto 100%, auto 100%, auto 100%;
  }
}

/* a mão só no modo completo */
.m24-halloween38:not(.m24-hw-completo38) .m24-hw-mao38 { display: none; }

/* ---------------------------------------------------------------------
   ⚠️ MOVIMENTO REDUZIDO: os bichos somem (eles SÃO movimento), a cor e a
   luz do escudo ficam. Quem pediu para não animar não leva susto.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .m24-hw-camada38 { display: none; }
  .m24-hw-pilula38 .m24-hw-pilula-icone38 { animation: none; }
  .m24-halloween38 .brand-mark {
    animation: none;
    box-shadow: 0 0 0 3px rgba(255, 170, 60, .34), 0 5px 20px rgba(255, 140, 30, .48);
  }
  .m24-halloween38 .flag-circle::after { animation: none; }
  .m24-halloween38 .m24-home-cta-stack > .intro-primary-btn.home-manager-hero-btn:not(.m24ol-home-btn)::after { animation: none; opacity: .68; }
}