/* Banner Halloween 2026 (CssBanner da promocaohome) · base: arquivos do designer (versão 10) */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Libre+Baskerville:wght@700&family=Montserrat:wght@500;600;700&display=swap");

/* =========================================================
   CABEÇALHO · VERSÃO HALLOWEEN
   Usa a MESMA estrutura do header atual do site
   (.header-container > .main-header > .header-logo / .header-buttons).
   Aqui (CssBanner, só carrega na home) vale direto no .header-container,
   sem precisar da classe "eo-hw-header" do designer.
   Resultado: faixa preta fina (60px) com a logo branca,
   Planos | Funcionalidades | Blog à esquerda e Teste grátis | Entrar à direita.
   ========================================================= */
.header-container{
  /* position/top/z-index ficam os do site (fixed-header/sticky-header no scroll) */
  height:60px; background:#000;
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.35);
  font-family:Lato,"Montserrat",system-ui,sans-serif;
}
.header-container .main-header{
  box-sizing:border-box; height:60px; max-width:1100px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.header-container .header-logo{display:flex; align-items:center; height:60px; flex:none}
.header-container .header-logo h1{margin:0; line-height:0; font-size:0}
.header-container .header-logo .h1-invisivel{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.header-container .header-logo a{display:block; line-height:0}
.header-container .header-logo .logo-colorida{display:none}
.header-container .header-logo .logo-branca{display:block; height:32px; width:auto}

.header-container .header-buttons{flex:1; display:flex; align-items:center; justify-content:space-between; margin-left:28px; height:60px}
.header-container .buttons-container{display:flex; align-items:center}
.header-container .button{
  display:inline-flex; align-items:center; gap:6px; margin:0 18px;
  font:700 15px/1 Lato,"Montserrat",system-ui,sans-serif; color:#fff; text-decoration:none;
  cursor:pointer; white-space:nowrap; transition:color .2s ease;
}
.header-container .button-light:hover{color:#ff4aa8}
.header-container .buttons-container:last-child .button:last-child{margin-right:0}
.header-container .button-primary{
  background:#ffcc00; color:#d91778; border-radius:6px; padding:10px 20px; margin:0 14px 0 0;
  transition:background .2s ease;
}
.header-container .button-primary:hover{background:#ffd633; color:#d91778}
.header-container .seta-para-baixo{width:.8em; height:.8em}
.header-container .seta-para-cima{display:none}

/* dropdown Funcionalidades (mesmo comportamento: abre ao passar o mouse) */
.header-container .header-dropdown{position:relative; height:60px; display:flex; align-items:center}
.header-container .dropdown-content{
  display:none; position:absolute; top:60px; left:0; min-width:200px; padding:8px 0;
  background:#fff; border-radius:0 0 6px 6px; box-shadow:0 10px 24px rgba(0,0,0,.25); z-index:30;
}
.header-container .header-dropdown:hover .dropdown-content{display:block}
.header-container .dropdown-content a{display:block; padding:6px 20px; font:600 15px Lato,system-ui,sans-serif; color:#f52569; text-decoration:none}
.header-container .dropdown-content a:hover{background:#fdeaf1}

/* menu hambúrguer (igual ao site: abaixo de 992px) */
.header-container .buttons-container-sm{display:none}
.header-container .menu-hamburguer,
.header-container .menu-hamburguer::before,
.header-container .menu-hamburguer::after{display:block; width:24px; height:3px; background:#fff; border-radius:2px; position:relative}
.header-container .menu-hamburguer::before,
.header-container .menu-hamburguer::after{content:""; position:absolute; left:0}
.header-container .menu-hamburguer::before{top:-7px}
.header-container .menu-hamburguer::after{top:7px}
/* menu aberto: o Index.js coloca .active no .menu-hamburguer e o site vira o ícone num X
   (barra do meio transparente, as outras no centro girando ±45°). As regras acima, de mesma
   especificidade e carregadas depois, fixavam top:-7/7px e o fundo branco -> virava um "<".
   Repete o estado ativo do site com .header-container na frente pra vencer */
.header-container .menu-hamburguer,
.header-container .menu-hamburguer::before,
.header-container .menu-hamburguer::after{transition:all .3s ease-in-out}
.header-container .menu-hamburguer.active{background:transparent}
.header-container .menu-hamburguer.active::before{top:0; transform:rotate(-45deg)}
.header-container .menu-hamburguer.active::after{top:0; transform:rotate(45deg)}

@media (max-width:992px){
  /* no mobile o site transforma o .header-buttons no menu (absolute, left:0, width:100%); a
     margin-left:28px do desktop somava e o menu, mesmo escondido, passava 28px da borda direita
     -> scroll lateral no celular. Cadeia do site (0-3-0) pra vencer a regra de cima */
  .header-container .main-header .header-buttons{margin-left:0}
  .header-container .main-header{padding:0 16px}
  .header-container .header-logo .logo-branca{height:30px}
  .header-container .header-buttons{display:none}
  .header-container .buttons-container-sm{display:flex; align-items:center}
  .header-container #btnMenu{margin:0; padding:12px 4px}
  /* visual do menu mobile. Antes ficava em .header-buttons.active: ao fechar, o script tira o
     .active na hora e o menu voltava pro layout do site (fundo branco, outro top/padding)
     durante os 0.5s da animação de saída -> parecia se desmembrar. Agora vale sempre no mobile
     e o .active só dispara o transform/opacity do site (abre/fecha inteiro). .main-header no
     lugar do .active mantém a mesma especificidade (0-3-0) */
  .header-container .main-header .header-buttons{
    display:flex; flex-direction:column; align-items:stretch; position:absolute; left:0; right:0; top:60px;
    height:auto; margin:0; padding:8px 0 16px; background:#000; border-top:1px solid rgba(255,255,255,.1); z-index:30}
  .header-container .main-header .header-buttons .buttons-container{flex-direction:column; align-items:stretch}
  .header-container .main-header .header-buttons .button{margin:0; padding:14px 20px; justify-content:center}
  .header-container .main-header .header-buttons .header-dropdown{height:auto; flex-direction:column}
  .header-container .main-header .header-buttons .dropdown-content{position:static; box-shadow:none; border-radius:0; width:100%}
  .header-container .main-header .header-buttons .button-primary{margin:8px 20px; padding:14px 20px}
}

/* adaptação pro site: sem a classe eo-hw-header no HTML, o header é tematizado direto
   (este CSS só carrega na home, via CssBanner). No scroll o Index.js coloca .sticky-header
   (fundo branco + logo colorida) e troca o "Teste grátis" pra .button-secondary: mantém o preto */
.header-container.sticky-header{background:#000}
.header-container.sticky-header .button-light{color:#fff}
.header-container.sticky-header .logo-colorida{display:none}
.header-container.sticky-header .logo-branca{display:block}
.header-container .logo-branca{content:url("https://cdn.empresaria.online/Home/promocao-banner/2026/halloween/banner/logo-empresaria-online-branca.png")}
.header-container .button-secondary{
  display:inline-flex; align-items:center; margin:0 14px 0 0; padding:10px 20px; border-radius:6px;
  background:#ffcc00; color:#d91778; font:700 15px/1 Lato,"Montserrat",system-ui,sans-serif; text-decoration:none; white-space:nowrap}
.header-container .button-secondary:hover{background:#ffd633; color:#d91778}

/* "Funcionalidades": o site deixa o .header-dropdown inline-block (cadeia 0-5-0), que vence
   o flex do designer e empurra o botão pra cima; repete a cadeia pra alinhar com Planos/Blog */
@media (min-width:993px){
  .header-container .main-header .header-buttons .buttons-container .header-dropdown{display:flex; align-items:center; height:60px}}

/* o index.css tem `*{font-family:Lato}`, que cai em p/span/em/a do banner e anula a herança
   das fontes do designer; :where() deixa em 0-1-0 pra as classes do designer abaixo seguirem valendo */
.eo-hw :where(*){font-family:inherit}
/* idem pro `h2{text-align:center}` do index.css: o alinhamento vem do container do designer */
.eo-hw :where(h2){text-align:inherit}

/* =========================================================
   BANNER HALLOWEEN · EMPRESÁRIA ONLINE
   Tudo prefixado com .eo-hw para não conflitar com o site.
   --eo-hw-header: altura do header que fica sobre o banner.
   ========================================================= */
.eo-hw{
  --eo-hw-header:60px;
  --pink:#ff2f92; --pink2:#e3007a; --cream:#f8ecdc;
  position:relative; overflow:hidden; isolation:isolate;
  background:#1c0a21 url("https://cdn.empresaria.online/Home/promocao-banner/2026/halloween/banner/hw-topo.webp") center top / 100% calc(var(--eo-hw-header) + 8vw) no-repeat;
  padding-top:var(--eo-hw-header);
  font-family:"Montserrat",Lato,system-ui,sans-serif; color:#fff;
  -webkit-font-smoothing:antialiased;
}
.eo-hw *,.eo-hw *::before,.eo-hw *::after{box-sizing:border-box}
.eo-hw img{max-width:none;border:0}

/* ---------- palco (mantém a proporção da arte) ---------- */
.eo-hw__stage{position:relative; width:100%; max-width:2095px; margin:0 auto; aspect-ratio:2095/751; container-type:inline-size}
.eo-hw__scene{position:absolute; inset:0}
.eo-hw__bg{position:absolute; inset:0; width:100%; height:100%; display:block;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%); mask-image:linear-gradient(to bottom,transparent 0,#000 12%)}
.eo-hw__fx{position:absolute; inset:0; pointer-events:none}
.eo-hw__fx>*{position:absolute; display:block}

.eo-hw__bat img{position:absolute; inset:0; width:100%; height:100%}

/* telas maiores que a arte: funde as laterais */
@media (min-width:2096px){
  .eo-hw__scene{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .eo-hw{background-color:#241029}
}

/* ---------- luzes que tremulam com o vento ---------- */
.eo-hw__light{border-radius:50%; mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,214,140,.95) 0%,rgba(255,150,60,.55) 30%,rgba(255,90,30,.18) 55%,rgba(255,80,30,0) 70%);
  opacity:calc(var(--i) * .6); animation:eo-flicker 2s ease-in-out infinite}
@keyframes eo-flicker{
  0%{opacity:calc(var(--i)*.55);transform:translateX(0) scale(1)}
  13%{opacity:calc(var(--i)*.95);transform:translateX(3%) scale(1.05)}
  27%{opacity:calc(var(--i)*.6);transform:translateX(-2%) scale(.97)}
  41%{opacity:calc(var(--i)*1);transform:translateX(4%) scale(1.07)}
  55%{opacity:calc(var(--i)*.45);transform:translateX(0) scale(.95)}
  72%{opacity:calc(var(--i)*.9);transform:translateX(-3%) scale(1.04)}
  86%{opacity:calc(var(--i)*.62);transform:translateX(1%) scale(.99)}
  100%{opacity:calc(var(--i)*.55);transform:translateX(0) scale(1)}}
.eo-hw__light--abobora-g{left:84.5%;top:58%;width:14.3%;height:40%;animation-duration:2.3s;animation-delay:-0s;--i:0.75}
.eo-hw__light--abobora-p{left:80.3%;top:75%;width:8%;height:22.6%;animation-duration:1.9s;animation-delay:-0.6s;--i:0.7}
.eo-hw__light--vela{left:93.6%;top:57.5%;width:9%;height:25.3%;animation-duration:1.4s;animation-delay:-0.3s;--i:0.85}
.eo-hw__light--lanterna{left:60.4%;top:62%;width:5.6%;height:16%;animation-duration:1.7s;animation-delay:-0.9s;--i:0.8}
.eo-hw__light--caminho-1{left:68.8%;top:63%;width:5.4%;height:15%;animation-duration:2.1s;animation-delay:-0.2s;--i:0.7}
.eo-hw__light--caminho-2{left:80.2%;top:62%;width:5.4%;height:15%;animation-duration:1.6s;animation-delay:-1.1s;--i:0.7}
.eo-hw__light--caminho-3{left:90.9%;top:43%;width:2.4%;height:7%;animation-duration:2.4s;animation-delay:-0.5s;--i:0.6}
.eo-hw__light--castelo{left:91%;top:29%;width:2.6%;height:7.5%;animation-duration:3.1s;animation-delay:-0.8s;--i:0.35}
.eo-hw__light--castelo-2{left:96.3%;top:25%;width:2.4%;height:6.5%;animation-duration:2.7s;animation-delay:-1.4s;--i:0.3}

/* chamas (vela e lanterna) balançando */
.eo-hw__flame{border-radius:50% 50% 46% 46% / 66% 66% 34% 34%; transform-origin:50% 96%;
  background:radial-gradient(ellipse 50% 60% at 50% 70%,#fff 0 30%,#fff1c2 42%,#ffc05a 60%,rgba(255,120,30,.75) 78%,rgba(255,90,20,0) 100%);
  filter:blur(.4px) drop-shadow(0 0 6px rgba(255,170,70,.9)); animation:eo-sway 1.7s ease-in-out infinite}
.eo-hw__flame--vela{ left:97.7%;top:66%;width:0.8%;height:7%; }
.eo-hw__flame--lanterna{ left:62.93%;top:68.3%;width:0.57%;height:3.2%; animation-duration:1.3s; animation-delay:-.4s; mix-blend-mode:screen; opacity:.9}
@keyframes eo-sway{
  0%,100%{transform:skewX(0) scale(1,1)}
  20%{transform:skewX(-8deg) translateX(-6%) scale(.96,1.06)}
  45%{transform:skewX(4deg) scale(1.04,.93)}
  70%{transform:skewX(9deg) translateX(7%) scale(.95,1.08)}
  85%{transform:skewX(-3deg) scale(1.02,.97)}}

/* ---------- placa 15% OFF com defeito ---------- */
/* placa 15% OFF = camada própria (placa + aranha sentada), sobre o fundo sem placa.
   Computador: em cima do chão, entre a cerca e o caminho. No celular fica maior (ver abaixo). */
.eo-hw__sign{ left:56.2%; top:27.3%; width:26.6%; aspect-ratio:1384/1225 }
/* vegetação da frente (recortada do próprio fundo) passando na frente do pé do poste: a placa fica "fincada" */
.eo-hw__chao{ left:54%; top:86%; width:32%; height:14%; pointer-events:none;
  background:url("https://cdn.empresaria.online/Home/promocao-banner/2026/halloween/banner/hw-fundo.webp") 79.412% 100% / 312.5% 714.29% no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%); mask-image:linear-gradient(to bottom,transparent 0,#000 45%)}
.eo-hw__sign>*{position:absolute; display:block}
.eo-hw__placa,.eo-hw__signoff{left:0; top:9.06%; width:100%; height:90.94%}
.eo-hw__signglow{ left:-8%;top:12%;width:116%;height:70%; border-radius:50%; mix-blend-mode:screen; opacity:.4;
  background:radial-gradient(ellipse at center,rgba(255,150,60,.55) 0%,rgba(255,110,40,.2) 40%,rgba(255,90,30,0) 68%);
  animation:eo-glow 6s linear infinite}
.eo-hw__signoff{ opacity:0; animation:eo-off 6s linear infinite}
@keyframes eo-off{
  0%,17.9%{opacity:0} 18%{opacity:1} 19.2%{opacity:0} 20.4%{opacity:.85} 21.4%{opacity:0}
  52.9%{opacity:0} 53%{opacity:1} 54.2%{opacity:.25} 55%{opacity:1} 58.4%{opacity:1} 58.5%{opacity:0}
  59.6%{opacity:.9} 61.9%{opacity:1} 62%{opacity:0} 63%{opacity:.6} 63.8%{opacity:0} 100%{opacity:0}}
@keyframes eo-glow{
  0%,17.9%{opacity:.45} 18%{opacity:0} 19.2%{opacity:.45} 20.4%{opacity:.05} 21.4%{opacity:.45}
  52.9%{opacity:.45} 53%{opacity:0} 54.2%{opacity:.35} 55%{opacity:0} 58.4%{opacity:0} 58.5%{opacity:.5}
  59.6%{opacity:.05} 61.9%{opacity:0} 62%{opacity:.5} 63%{opacity:.15} 63.8%{opacity:.55} 70%,100%{opacity:.45}}

/* ---------- gato (o mesmo das versões anteriores) em cima do pilar; se arrepia quando a placa falha ---------- */
.eo-hw__gato{ left:93.795%;top:41.545%;width:5.537%;height:13.182% }
.eo-hw__cat{ left:92.745%;top:38.216%;width:6.492%;height:17.843%; opacity:0; transform-origin:50% 86%; animation:eo-cat 6s ease-out infinite}
@keyframes eo-cat{
  0%,53%{opacity:0;transform:scale(1)}
  54.5%{opacity:1;transform:scale(1.07,1.16)}
  56%{transform:scale(1.04,1.1)}
  58%{transform:scale(1.07,1.15) rotate(-1deg)}
  60%{transform:scale(1.06,1.13) rotate(1deg)}
  62%{transform:scale(1.07,1.15) rotate(-1deg)}
  64%{transform:scale(1.06,1.13)}
  80%{opacity:1;transform:scale(1.05,1.11)}
  90%{opacity:0;transform:scale(1.01,1.02)}
  100%{opacity:0;transform:scale(1)}}

/* ---------- aranha em cima da placa (movimento sutil, sem teia) ---------- */
.eo-hw__spider{ left:10%;top:.49%;width:34%;height:auto; transform-origin:50% 90%; animation:eo-spider 4.2s ease-in-out infinite}
@keyframes eo-spider{
  0%,100%{transform:rotate(0) translateY(0) scale(1.03)}
  22%{transform:rotate(-2.6deg) translateY(-1.5%) scale(1.03)}
  48%{transform:rotate(.6deg) translateY(0) scale(1.03)}
  70%{transform:rotate(2.8deg) translateY(-1%) scale(1.03)}
  86%{transform:rotate(1deg) translateY(0) scale(1.03)}}

/* ---------- morcegos batendo as asas ---------- */
/* cada asa é recortada só até a borda do corpo (com 1,5% de sobra escondida embaixo dele)
   e gira a partir dessa junta; antes o corte era no meio do morcego e a asa levava
   meia cabeça junto. O corpo (último no HTML) fica por cima e parado. */
/* batida 15% mais rápida que a do designer (30% ficou rápido demais) */
.eo-hw__bat>div{position:absolute; inset:0}
.eo-hw__wing--l{animation:eo-flapL .383s ease-in-out infinite alternate}
.eo-hw__wing--r{animation:eo-flapR .383s ease-in-out infinite alternate}
/* skewY (e não rotate) ancorado na borda do corpo: a linha da junta fica parada e só a ponta
   sobe/desce; o rotate + scaleY inclinava a junta e abria um "V" entre asa e corpo */
@keyframes eo-flapL{0%{transform:skewY(24deg) scaleX(.9)}55%{transform:skewY(0) scaleX(1)}100%{transform:skewY(-20deg) scaleX(.85)}}
@keyframes eo-flapR{0%{transform:skewY(-24deg) scaleX(.9)}55%{transform:skewY(0) scaleX(1)}100%{transform:skewY(20deg) scaleX(.85)}}
@keyframes eo-fly1{0%,100%{transform:translate(0,0)}25%{transform:translate(-6%,10%)}50%{transform:translate(4%,-6%)}75%{transform:translate(8%,8%)}}
@keyframes eo-fly2{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(7%,-9%) rotate(-3deg)}66%{transform:translate(-5%,7%) rotate(3deg)}}
@keyframes eo-fly3{0%,100%{transform:translate(0,0)}50%{transform:translate(-10%,-12%) rotate(-4deg)}}
.eo-hw__bat--1{left:73.5%;top:7%;width:7.828%;height:11.984%;animation:eo-fly1 7s ease-in-out 0s infinite}
.eo-hw__bat--1 .eo-hw__wing{animation-duration:0.404s}
.eo-hw__bat--1 .eo-hw__wing--l{transform-origin:38.5% 55%;clip-path:polygon(0 0,40% 0,40% 81%,30.5% 81%,30.5% 100%,0 100%)}
.eo-hw__bat--1 .eo-hw__wing--r{transform-origin:51.5% 55%;clip-path:inset(0 0 0 50%)}
/* a perna do bat--1 fica à esquerda da faixa do corpo (30,5% a 38,5%): o pé (de 81% pra baixo)
   sai da asa, e o corpo parado cobre do quadril (70%) pra baixo, com a
   borda em diagonal seguindo o contorno da perna. Entre 70% e 81% as duas
   camadas se sobrepõem, então a asa subindo não abre vão entre ela e a perna */
.eo-hw__bat--1 .eo-hw__batbody{clip-path:polygon(38.5% 0,51.5% 0,51.5% 100%,30.5% 100%,30.5% 84%,33.5% 77%,35% 70%,38.5% 70%)}
.eo-hw__bat--2{left:71.6%;top:12.5%;width:2.291%;height:4.794%;animation:eo-fly2 5s ease-in-out 0.4s infinite}
.eo-hw__bat--2 .eo-hw__wing{animation-duration:0.276s}
.eo-hw__bat--2 .eo-hw__wing--l{transform-origin:44% 55%;clip-path:inset(0 54.5% 0 0)}
.eo-hw__bat--2 .eo-hw__wing--r{transform-origin:57% 55%;clip-path:inset(0 0 0 55.5%)}
.eo-hw__bat--2 .eo-hw__batbody{clip-path:inset(0 43% 0 44%)}
.eo-hw__bat--3{left:77%;top:22%;width:6.778%;height:7.989%;animation:eo-fly2 8s ease-in-out 0.7s infinite}
.eo-hw__bat--3 .eo-hw__wing{animation-duration:0.446s}
.eo-hw__bat--3 .eo-hw__wing--l{transform-origin:44.5% 55%;clip-path:inset(0 54% 0 0)}
.eo-hw__bat--3 .eo-hw__wing--r{transform-origin:56.5% 55%;clip-path:inset(0 0 0 55%)}
.eo-hw__bat--3 .eo-hw__batbody{clip-path:inset(0 43.5% 0 44.5%)}
.eo-hw__bat--4{left:62%;top:14%;width:3.914%;height:5.06%;animation:eo-fly1 6s ease-in-out 0.2s infinite}
.eo-hw__bat--4 .eo-hw__wing{animation-duration:0.340s}
.eo-hw__bat--4 .eo-hw__wing--l{transform-origin:43.5% 55%;clip-path:inset(0 55% 0 0)}
.eo-hw__bat--4 .eo-hw__wing--r{transform-origin:56% 55%;clip-path:inset(0 0 0 54.5%)}
.eo-hw__bat--4 .eo-hw__batbody{clip-path:inset(0 44% 0 43.5%)}
.eo-hw__bat--5{left:85%;top:3.5%;width:3.437%;height:5.726%;animation:eo-fly3 6.5s ease-in-out 1.1s infinite}
.eo-hw__bat--5 .eo-hw__wing{animation-duration:0.372s}
.eo-hw__bat--5 .eo-hw__wing--l{transform-origin:37.5% 55%;clip-path:inset(0 61% 0 0)}
.eo-hw__bat--5 .eo-hw__wing--r{transform-origin:57% 55%;clip-path:inset(0 0 0 55.5%)}
.eo-hw__bat--5 .eo-hw__batbody{clip-path:inset(0 43% 0 37.5%)}

/* ---------- aranhas descendo pela teia ---------- */
.eo-hw__drop img{position:absolute; left:0; bottom:0; width:100%; height:auto; transform-origin:50% 0; animation:eo-swing 2.4s ease-in-out infinite alternate}
.eo-hw__drop::before{content:""; position:absolute; left:50%; top:0; bottom:20%; width:1.5px; margin-left:-.75px; background:linear-gradient(rgba(255,190,230,.25),rgba(255,190,230,.8))}
@keyframes eo-swing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

/* ---------- teia do canto e aranhas penduradas (só no computador) ---------- */
.eo-hw__deco{display:none}
.eo-hw__pend{position:absolute; transform-origin:50% 0; --pw:min(4cqw,58px); width:var(--pw)}
.eo-hw__pend img{position:absolute; left:0; bottom:0; width:100%; height:auto}
/* o fio vai do ponto de apoio até dentro do fio desenhado da aranha: nunca solta */
.eo-hw__pend::before{content:""; position:absolute; left:50%; top:0; bottom:calc(var(--pw) * .68); width:2px; margin-left:-1px;
  background:rgba(255,140,210,.85); box-shadow:0 0 4px rgba(255,80,180,.7)}
/* o fim (100%) volta pro mesmo comprimento do início; antes terminava em 1.6 e a aranha
   da teia do canto pulava pra 2.2 ao reiniciar o ciclo */
@keyframes eo-pend-a{0%,10%{height:calc(var(--pw) * 2.2)}45%,60%{height:calc(var(--pw) * 5.6)}100%{height:calc(var(--pw) * 2.2)}}
@keyframes eo-pend-b{0%,10%{height:calc(var(--pw) * 1.3)}45%,60%{height:calc(var(--pw) * 2)}100%{height:calc(var(--pw) * 1.3)}}
@keyframes eo-pend-balanco{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-2deg)}}

/* ---------- textos (desktop: posicionados sobre a arte) ---------- */
.eo-hw__content{--u:min(1cqw,14.4px); position:absolute; left:7.1%; top:4.6%; width:max-content; max-width:44%; display:flex; flex-direction:column; align-items:flex-start; text-align:left; z-index:2}
.eo-hw__badge{align-self:flex-start; margin:0; display:flex; flex-direction:column; align-items:center;
  padding:calc(.55 * var(--u)) calc(2.1 * var(--u)) calc(.5 * var(--u)); border:1.5px solid rgba(255,150,195,.7); border-radius:calc(.9 * var(--u));
  background:linear-gradient(180deg,rgba(45,14,40,.55),rgba(30,8,30,.35));
  box-shadow:0 0 calc(1.2 * var(--u)) rgba(255,60,150,.35), inset 0 0 calc(.8 * var(--u)) rgba(255,60,150,.2)}
.eo-hw__badge-t{font-family:"Cinzel","Libre Baskerville",Georgia,serif; font-weight:700; font-size:calc(2.05 * var(--u)); line-height:1.15; letter-spacing:.05em; color:var(--cream); text-transform:uppercase}
.eo-hw__badge-s{font-size:calc(.95 * var(--u)); font-weight:500; letter-spacing:.22em; color:var(--pink); text-transform:uppercase; line-height:1.4}
.eo-hw__title{margin:calc(1.1 * var(--u)) 0 0; font-family:"Libre Baskerville",Georgia,serif; font-weight:700; font-size:calc(3.28 * var(--u)); line-height:1.08; letter-spacing:-.018em; color:var(--cream); text-shadow:0 calc(.2 * var(--u)) calc(1.2 * var(--u)) rgba(0,0,0,.45)}
.eo-hw__title em{font-style:normal; color:var(--pink)}
.eo-hw__title span{display:block}
.eo-hw__text{margin:calc(1 * var(--u)) 0 0; font-size:calc(1.63 * var(--u)); line-height:1.24; font-weight:500; color:#fbf3f7}
.eo-hw__text strong{color:var(--pink); font-weight:700}
.eo-hw__btn{margin:calc(2 * var(--u)) 0 0; display:inline-flex; align-items:center; justify-content:center; gap:calc(1.4 * var(--u));
  width:calc(27.6 * var(--u)); height:calc(4.7 * var(--u)); border-radius:99px; text-decoration:none; color:#fff !important;
  font-size:calc(1.45 * var(--u)); font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  background:linear-gradient(180deg,#ff4aa8 0%,#f5168a 55%,#e0077b 100%);
  box-shadow:0 0 0 calc(.12 * var(--u)) rgba(255,160,210,.55) inset,0 calc(.5 * var(--u)) calc(1.6 * var(--u)) rgba(255,30,140,.5);
  transition:transform .2s ease,box-shadow .2s ease;   transform-origin:50% 50%; /* pulsa a partir do centro (cresce igual pros dois lados); o designer ancorava na borda esquerda */
  animation:eo-pulse 2.6s ease-in-out infinite, eo-beat 1.6s ease-in-out infinite}
.eo-hw__btn svg{width:calc(1.6 * var(--u)); height:calc(1.6 * var(--u)); transition:transform .2s ease}
.eo-hw__btn:hover{transform:translateY(-2px); box-shadow:0 0 0 calc(.12 * var(--u)) rgba(255,190,225,.8) inset,0 calc(.8 * var(--u)) calc(2.4 * var(--u)) rgba(255,30,140,.7)}
.eo-hw__btn:hover svg{transform:translateX(4px)}
/* pulso: o botão inteiro cresce levemente e volta, sem parar */
@keyframes eo-beat{0%,100%{scale:1}50%{scale:1.06}}
@keyframes eo-pulse{0%,100%{box-shadow:0 0 0 calc(.12 * var(--u)) rgba(255,160,210,.55) inset,0 calc(.5 * var(--u)) calc(1.6 * var(--u)) rgba(255,30,140,.45)}50%{box-shadow:0 0 0 calc(.12 * var(--u)) rgba(255,190,225,.8) inset,0 calc(.5 * var(--u)) calc(2.6 * var(--u)) rgba(255,30,140,.8)}}
.eo-hw__mweb{display:none}

/* telas acima de 2095px: limita o tamanho dos textos */
@container (min-width:2096px){ .eo-hw__content{font-size:initial} }


/* COMPUTADOR (1024px ou mais): texto começa na linha da grade do site (borda esquerda da logo) */
@media (min-width:1024px){
  .eo-hw__content{left:max(32px, calc((100% - 1036px) / 2))}
  /* escurece de leve o lado do texto para leitura */
  .eo-hw__scene::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg,rgba(20,8,26,.55) 0%,rgba(20,8,26,.32) 32%,rgba(20,8,26,0) 52%)}
  .eo-hw__deco{display:block; position:absolute; inset:0; pointer-events:none; z-index:1}
  .eo-hw__teia{position:absolute; left:0; top:0; width:min(17cqw,260px); height:auto}
  /* aranha pendurada na teia do canto (só quando sobra espaço antes do texto) */
  .eo-hw__pend--2{left:calc(min(17cqw,260px) * .14 - var(--pw) / 2); top:calc(min(17cqw,260px) * .672 * .64);
    animation:eo-pend-a 9s ease-in-out -3s infinite, eo-pend-balanco 3.6s ease-in-out infinite}
  /* aranha que desce do topo, ao lado do selo */
  .eo-hw__pend--1{--pw:min(3.4cqw,50px); top:0; left:calc(max(32px, (100cqw - 1036px) / 2) + 22 * min(1cqw,14.4px));
    animation:eo-pend-b 8s ease-in-out infinite, eo-pend-balanco 3.2s ease-in-out infinite}
}
@media (min-width:1024px){
  /* aranha em cima da placa um pouco menor (mantém os pés no mesmo ponto da tábua) */
  .eo-hw__spider{left:14%; top:4.8%; width:28%}
}
@media (min-width:1024px) and (max-width:1199px){ .eo-hw__pend--2{display:none} .eo-hw__teia{width:11cqw} }

/* =========================================================
   TABLET E CELULAR: texto em cima, cena embaixo
   ========================================================= */
@media (max-width:1023px){
  /* fundo contínuo até a faixa preta do cabeçalho (sem a imagem de topo esticada) */
  .eo-hw{background:#1c0a21}
  .eo-hw__stage{aspect-ratio:auto; display:flex; flex-direction:column}
  .eo-hw__content{position:relative; order:1; left:auto; top:auto; width:auto; max-width:none; align-items:center; text-align:center; padding:26px 20px 6px}
  /* recorte da cena: placa 15% OFF no centro, castelo emoldurando à direita */
  .eo-hw__scene{position:relative; order:2; width:182%; margin-left:-81.9%; aspect-ratio:2095/751; margin-top:-2%}
  /* placa maior, descendo até o fim do banner (a base do poste é cortada pela borda) */
  .eo-hw__sign{left:54.5%; top:10%; width:36%}
  /* sem morcegos no celular: brigariam com a placa */
  .eo-hw__bat{display:none}
  /* montinho de vegetação (recortado do próprio fundo) na frente do pé da placa */
  .eo-hw__chao{left:50%; top:84%; width:46%; height:16%;
    background-position:92.593% 100%; background-size:217.39% 625%}
  .eo-hw__scene::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 26% 70% at 72.5% 62%,rgba(28,10,33,0) 60%,rgba(28,10,33,.35) 100%)}
  .eo-hw__bg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%)}
  .eo-hw__badge{align-self:center; margin:0; padding:6px 22px 5px; border-radius:10px; box-shadow:0 0 14px rgba(255,60,150,.35)}
  .eo-hw__badge-t{font-size:26px}
  .eo-hw__badge-s{font-size:11px}
  .eo-hw__title span{display:inline}
  .eo-hw__title em{display:block}
  .eo-hw__title{margin-top:18px; font-size:clamp(24px,6.5vw,40px); max-width:560px}
  .eo-hw__text{margin:12px 0 0; font-size:clamp(15px,4vw,20px); line-height:1.35}
  /* o brilho que pulsa é um ::after com a sombra maior fixa, só a opacidade anima (roda na GPU);
     animar o box-shadow do botão repintava a sombra borrada a cada quadro */
  .eo-hw__btn{position:relative; margin:22px 0 0; width:min(300px,100% - 36px); height:52px; font-size:15px; gap:12px; box-shadow:0 6px 18px rgba(255,30,140,.45); transform-origin:50% 50%; animation:eo-beat 1.6s ease-in-out infinite}
  .eo-hw__btn::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    box-shadow:0 6px 30px rgba(255,30,140,.85); opacity:0; animation:eo-pulse-m 2.6s ease-in-out infinite}
  .eo-hw__btn svg{width:20px; height:20px}
  @keyframes eo-pulse-m{0%,100%{opacity:0}50%{opacity:1}}

  /* desempenho: mix-blend-mode em camada animada obriga o navegador a recompor o fundo inteiro
     (a cena tem 182% da largura da tela) a cada quadro, o que trava celular mais fraco e no iOS
     pode fazer as animações nem começarem. Sobre o fundo escuro o "screen" fica quase igual ao normal */
  .eo-hw__light,.eo-hw__signglow,.eo-hw__flame--lanterna{mix-blend-mode:normal}

  /* teia do canto + aranha presa no centro da teia */
  .eo-hw__mweb{--w:clamp(140px,38vw,200px); display:block; position:absolute; left:0; top:0; width:var(--w); height:calc(var(--w) * .672); pointer-events:none; z-index:-1}
  .eo-hw__mweb-teia{position:absolute; left:0; top:0; width:100%; height:auto; opacity:.95}
  /* o fio nasce num fio da teia (10% / 64% da imagem), ao lado do texto, e o conjunto fio + aranha balança preso nesse ponto */
  /* aranha pendurada presa a um fio da teia (10% / 68% da imagem da teia); o fio entra no fio desenhado da aranha */
  /* a caixa fica sempre no comprimento máximo (2.6) e a descida é feita com transform: a aranha sobe
     1×pw e o fio encolhe na mesma proporção (0.92/1.92 = .479). Antes animava o height -> recalculava
     o layout a cada quadro. Mesma duração e easing nos dois: o fio continua entrando na aranha */
  .eo-hw__drop--m{--pw:calc(var(--w) * .17); position:absolute; left:calc(10% - var(--pw) / 2); top:68%; width:var(--pw);
    height:calc(var(--pw) * 2.6); transform-origin:50% 0;
    animation:eo-pendulo 3.2s ease-in-out infinite}
  .eo-hw__drop--m img{animation:eo-dropm 7s ease-in-out infinite}
  .eo-hw__drop--m::before{bottom:calc(var(--pw) * .68); width:2px; margin-left:-1px; background:rgba(255,140,210,.85); box-shadow:0 0 4px rgba(255,80,180,.7);
    transform-origin:50% 0; animation:eo-dropm-fio 7s ease-in-out infinite}
  @keyframes eo-dropm{0%,10%{transform:translateY(calc(var(--pw) * -1))}45%,60%{transform:translateY(0)}100%{transform:translateY(calc(var(--pw) * -1))}}
  @keyframes eo-dropm-fio{0%,10%{transform:scaleY(.479)}45%,60%{transform:scaleY(1)}100%{transform:scaleY(.479)}}
  @keyframes eo-pendulo{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-2deg)}}
}
/* tablet: recorte mais aberto, placa continua no centro */
@media (min-width:600px) and (max-width:1023px){
  .eo-hw__scene{width:143%; margin-left:-43%}
  /* com o recorte do tablet (143% / -43%) a placa em 54.5% ficava com o centro em 60.7% da tela;
     47.03% põe o centro em 50%. O montinho do pé vai junto (-7.47%) e o background-position
     acompanha (left / 0.54) pra o recorte continuar encaixado no fundo; a vinheta também */
  .eo-hw__sign{left:47.03%}
  .eo-hw__chao{left:42.53%; background-position:78.76% 100%}
  .eo-hw__scene::after{background:radial-gradient(ellipse 36% 70% at 62.03% 60%,rgba(28,10,33,0) 55%,rgba(28,10,33,.3) 100%)}
}

/* acessibilidade: quem prefere menos movimento vê o banner parado. Só no computador: no celular
   a economia de bateria de vários Android (Samsung, Xiaomi...) liga o "remover animações" sozinha
   e o banner ficava parado pra muita gente; lá a animação roda sempre */
@media (prefers-reduced-motion:reduce) and (min-width:1024px){
  .eo-hw *,.eo-hw *::before,.eo-hw *::after{animation:none !important}
}