/* ==========================================================================
   Ellos Em Breve — front
   Tamanhos: cada elemento usa clamp(mínimo, fluido, máximo). O painel de
   ajustes controla só o MÁXIMO; o mínimo é derivado e o meio escala com a
   largura da tela. Nenhum ajuste no admin quebra a responsividade.
   ========================================================================== */
:root{
  --eeb-grad-1:#3360E1;
  --eeb-grad-2:#7D3CEE;
  --eeb-luz:#65B3FD;
  --eeb-halo:#65B3FD;
  --eeb-destaque:#B63332;
  --eeb-sucesso:#21C55D;

  /* Intensidade do fundo: controla a amplitude do movimento do gradiente e a
     opacidade do halo e das manchas. Nunca mexe nas cores em si, então o
     contraste do texto é o mesmo em qualquer valor. */
  --eeb-int:.85;

  --eeb-logo-max:120px;
  --eeb-h1-max:3.6rem;
  --eeb-lead-max:1rem;
  --eeb-ui-max:.88rem;

  --eeb-logo:clamp(calc(var(--eeb-logo-max) * .64), 20vw, var(--eeb-logo-max));
  --eeb-h1:clamp(calc(var(--eeb-h1-max) * .58), 8.5vw, var(--eeb-h1-max));
  --eeb-lead:clamp(calc(var(--eeb-lead-max) * .88), 3.4vw, var(--eeb-lead-max));
  --eeb-ui:clamp(calc(var(--eeb-ui-max) * .92), 3vw, var(--eeb-ui-max));

  --eeb-display:"Anton",Impact,"Arial Black",sans-serif;
  --eeb-body:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --eeb-ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden}
body.eeb{
  margin:0;
  font-family:var(--eeb-body);
  color:#fff;
  background:#02143f;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --- palco --- */
.eeb__page{
  position:relative;min-height:100svh;display:grid;place-items:center;
  padding:2rem 1.15rem 2.4rem;isolation:isolate;overflow:hidden;
}
/* Fundo — uma camada só. O gradiente em si é o efeito: três paradas, com o
   meio levemente mais fundo que a média das pontas. Isso dá profundidade sem
   brilho. Nada de varredura, reflexo ou blend de tela. */
.eeb__page::before{
  content:"";position:absolute;inset:0;z-index:-4;
  background:linear-gradient(158deg,
    var(--eeb-grad-1) 0%,
    color-mix(in srgb,
      color-mix(in srgb,var(--eeb-grad-1),var(--eeb-grad-2)) 84%,
      #010A2E) 46%,
    var(--eeb-grad-2) 100%);
  /* A intensidade controla quanto o gradiente é maior que a tela — quanto
     maior, mais distância a cor percorre e mais perceptível o movimento. */
  background-size:calc(112% + 78% * var(--eeb-int)) calc(112% + 78% * var(--eeb-int));
  animation:eeb-pan 42s cubic-bezier(.65,0,.35,1) infinite alternate;
}
@keyframes eeb-pan{
  from{background-position:0% 18%}
  to{background-position:100% 82%}
}

/* Halo na base. Assenta a composição e apoia o rodapé. */
.eeb__halo{
  position:absolute;left:50%;bottom:0;z-index:-2;
  width:min(180%,1400px);aspect-ratio:2.4/1;
  transform:translate(-50%,38%);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb,var(--eeb-halo) 78%,#fff) 0%,
    color-mix(in srgb,var(--eeb-halo) 45%,transparent) 42%,
    transparent 72%);
  filter:blur(46px);
  opacity:calc(.42 * var(--eeb-int));
  animation:eeb-halo 18s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes eeb-halo{
  0%,100%{transform:translate(-50%,40%) scale(1);opacity:calc(.34 * var(--eeb-int))}
  50%    {transform:translate(-50%,34%) scale(1.09);opacity:calc(.5 * var(--eeb-int))}
}

.eeb__blob{
  position:absolute;z-index:-2;width:40vmax;aspect-ratio:1;border-radius:50%;
  filter:blur(70px);opacity:calc(.3 * var(--eeb-int));pointer-events:none;
  animation:eeb-drift 26s cubic-bezier(.65,0,.35,1) infinite;
}
.eeb__blob--a{background:var(--eeb-luz);top:-18%;left:-12%}
.eeb__blob--b{background:var(--eeb-grad-2);bottom:-22%;right:-14%;animation-duration:34s;animation-delay:-9s}
.eeb__blob--c{background:var(--eeb-sucesso);top:46%;right:22%;width:20vmax;opacity:calc(.15 * var(--eeb-int));animation-duration:41s;animation-delay:-17s}
@keyframes eeb-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(32px,-18px,0)}}

.eeb__inner{width:100%;max-width:540px;text-align:center;position:relative;z-index:1}

/* --- logo: raio e respiro acompanham o tamanho --- */
.eeb__badge{
  width:var(--eeb-logo);margin:0 auto;background:#fff;
  border-radius:calc(var(--eeb-logo) * .18);
  padding:calc(var(--eeb-logo) * .06);
  box-shadow:0 20px 40px -20px rgba(1,20,60,.6);
  animation:eeb-rise .8s var(--eeb-ease) both,eeb-bob 7s cubic-bezier(.65,0,.35,1) 1s infinite;
}
.eeb__badge img{display:block;width:100%;height:auto}
@keyframes eeb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes eeb-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.eeb__title{
  font-family:var(--eeb-display);text-transform:uppercase;line-height:.92;
  font-size:var(--eeb-h1);margin:1.1rem 0 0;letter-spacing:.005em;
  /* balance distribui as linhas sem deixar órfã; um <br> manual continua
     sendo respeitado e tem prioridade sobre a quebra automática. */
  text-wrap:balance;
  animation:eeb-rise .8s var(--eeb-ease) .1s both;
}
.eeb__title br{line-height:0}
.eeb__title .eeb-mark{
  font-style:normal;display:inline-block;background:var(--eeb-destaque);
  padding:.02em .15em .07em;transform:rotate(-1.2deg);
}

.eeb__lead{
  font-size:var(--eeb-lead);line-height:1.6;opacity:.94;margin:.9rem auto 0;max-width:42ch;
  text-wrap:pretty;
  animation:eeb-rise .8s var(--eeb-ease) .2s both;
}
.eeb__lead .eeb-strong{font-style:normal;font-weight:600}

/* --- contador --- */
.eeb__count{
  display:flex;gap:.5rem;justify-content:center;margin:1.3rem 0 0;
  animation:eeb-rise .8s var(--eeb-ease) .25s both;
}
.eeb__count div{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:12px;padding:.5rem .8rem;min-width:4.2rem;
}
.eeb__count b{
  display:block;font-family:var(--eeb-display);font-weight:400;line-height:1;
  font-size:calc(var(--eeb-h1) * .38);font-variant-numeric:tabular-nums;
}
.eeb__count span{font-size:calc(var(--eeb-ui) * .78);opacity:.7;text-transform:uppercase;letter-spacing:.08em}

/* --- formulário --- */
.eeb__form{margin:1.5rem auto 0;max-width:400px;animation:eeb-rise .8s var(--eeb-ease) .3s both}
.eeb__row{display:flex;gap:.45rem;flex-wrap:wrap}
.eeb__form input[type=email]{
  flex:1 1 180px;min-width:0;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);border-radius:12px;padding:.78rem .95rem;
  color:#fff;font:inherit;font-size:var(--eeb-ui);
  transition:border-color .35s var(--eeb-ease),background .35s var(--eeb-ease);
}
.eeb__form input[type=email]::placeholder{color:rgba(255,255,255,.6)}
.eeb__form input[type=email]:focus{outline:0;border-color:#fff;background:rgba(255,255,255,.18)}
.eeb__form button{
  flex:0 0 auto;background:var(--eeb-destaque);color:#fff;border:0;border-radius:12px;
  padding:.78rem 1.2rem;font:inherit;font-size:var(--eeb-ui);font-weight:600;cursor:pointer;
  box-shadow:0 6px 0 0 rgba(0,0,0,.28);
  transition:transform .4s var(--eeb-ease),filter .4s var(--eeb-ease);
}
.eeb__form button:hover{transform:translateY(-2px);filter:brightness(1.07)}
.eeb__form button:active{transform:translateY(4px);box-shadow:0 2px 0 0 rgba(0,0,0,.28)}
.eeb__form button:focus-visible,.eeb__form input:focus-visible{outline:3px solid #fff;outline-offset:3px}

.eeb__note{display:block;font-size:calc(var(--eeb-ui) * .82);opacity:.62;margin-top:.5rem;line-height:1.45}
.eeb__erro{
  margin:.6rem 0 0;font-size:calc(var(--eeb-ui) * .88);
  background:rgba(0,0,0,.24);border-radius:10px;padding:.5rem .7rem;
}
.eeb__ok{
  display:none;align-items:center;gap:.5rem;justify-content:center;margin:0;
  background:color-mix(in srgb,var(--eeb-sucesso) 16%,transparent);
  border:1px solid var(--eeb-sucesso);border-radius:12px;
  padding:.78rem .95rem;font-size:var(--eeb-ui);
}
.eeb__form.is-done .eeb__row,
.eeb__form.is-done .eeb__note{display:none}
.eeb__form.is-done .eeb__ok{display:flex}

/* honeypot fora da tela, sem display:none (bot ignora none) */
.eeb__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* --- links --- */
.eeb__links{
  display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin:1.3rem 0 0;
  animation:eeb-rise .8s var(--eeb-ease) .4s both;
}
.eeb__links a{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:.5rem .9rem;color:#fff;text-decoration:none;
  font-size:calc(var(--eeb-ui) * .95);font-weight:500;
  transition:background .35s var(--eeb-ease),transform .35s var(--eeb-ease);
}
.eeb__links a:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.eeb__links a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.eeb__links a.is-wa{background:var(--eeb-sucesso);border-color:var(--eeb-sucesso)}
.eeb-i{width:1.15em;height:1.15em;flex:none}

.eeb__foot{
  margin-top:1.6rem;text-wrap:pretty;font-size:calc(var(--eeb-ui) * .8);opacity:.55;line-height:1.6;
  animation:eeb-rise .8s var(--eeb-ease) .5s both;
}

@media (prefers-reduced-motion:reduce){
  .eeb__page::before,.eeb__halo,.eeb__blob,.eeb__badge,
  .eeb__title,.eeb__lead,.eeb__form,.eeb__links,.eeb__foot,.eeb__count{animation:none!important}
  .eeb__form button,.eeb__links a{transition:none}
}

/* Sem color-mix (navegadores antigos): tudo em cor plana. */
@supports not (color: color-mix(in srgb,#000 50%,#fff)){
  .eeb__halo{background:radial-gradient(ellipse at 50% 50%,var(--eeb-halo) 0%,transparent 70%)}
  .eeb__page::before{background:linear-gradient(158deg,var(--eeb-grad-1),var(--eeb-grad-2))}
  .eeb__ok{background:rgba(255,255,255,.12)}
}