/* =========================================================
   DSX0 LB3 — HERO DECOR V1
   ========================================================= */

.event-shell{
  background:
    radial-gradient(760px 460px at 73% 23%,rgba(0,120,255,.18),transparent 68%),
    radial-gradient(720px 560px at 92% 52%,rgba(222,20,255,.19),transparent 70%),
    radial-gradient(520px 420px at 15% 62%,rgba(0,216,255,.08),transparent 72%),
    linear-gradient(118deg,#020713 0%,#031326 46%,#09091e 100%) !important;
}

.event-shell::before{
  background:
    linear-gradient(90deg,
      rgba(1,7,18,.99) 0%,
      rgba(1,12,25,.95) 32%,
      rgba(3,16,35,.62) 57%,
      rgba(9,4,25,.12) 100%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 145px,
      rgba(31,183,255,.020) 146px,
      transparent 147px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 82px,
      rgba(222,33,255,.012) 83px,
      transparent 84px
    ) !important;
}

.lb3-hero-eyebrow{
  margin-bottom:16px;
  color:#66b9ff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.34em;
  text-transform:uppercase;
  text-shadow:0 0 16px rgba(53,184,255,.18);
}

.lb3-hero-tagline{
  margin-top:18px;
  max-width:470px;

  color:#eef4ff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.20em;
  line-height:1.55;
  text-transform:uppercase;
}

.lb3-hero-tagline strong{
  color:#27e4ff;
}

.lb3-view-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;

  min-width:310px;
  min-height:52px;
  margin-top:26px;
  padding:0 24px;

  border:1px solid rgba(78,226,255,.88);
  border-radius:9px;

  background:
    linear-gradient(90deg,#27c8ff 0%,#6882ff 50%,#f62bdf 100%);

  color:#07101b !important;
  text-decoration:none !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 26px rgba(33,201,255,.22),
    0 0 34px rgba(235,32,255,.16);

  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}

.lb3-view-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,255,255,.38) 48%,
    transparent 72%
  );
  transform:translateX(-120%);
  transition:transform .45s ease;
}

.lb3-view-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 32px rgba(33,201,255,.30),
    0 0 42px rgba(235,32,255,.23);
}

.lb3-view-btn:hover::before{
  transform:translateX(120%);
}

.lb3-view-btn span{
  font-size:16px;
}

.lb3-view-btn strong{
  font-size:13px;
  font-weight:900;
  letter-spacing:.05em;
}

.lb3-view-btn b{
  margin-left:auto;
  font-size:20px;
}

/* prêmio mais glow */
.pool-box{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 0 32px rgba(45,221,255,.035),
    0 18px 42px rgba(0,0,0,.34),
    0 0 32px rgba(26,210,255,.12),
    0 0 42px rgba(225,25,255,.06) !important;
}

.pool-value{
  text-shadow:
    0 0 14px rgba(31,221,255,.30),
    0 0 32px rgba(31,221,255,.14) !important;
}

/* personagem com mais separação */
#dsxHeroCharacter{
  filter:
    drop-shadow(-22px 0 42px rgba(0,161,255,.24))
    drop-shadow(18px 0 36px rgba(228,24,255,.20)) !important;
}

/* faixa de benefícios */
.lb3-benefits{
  width:min(1460px,calc(100% - 40px));
  margin:0 auto 34px;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  border-left:1px solid rgba(35,154,215,.18);
  border-right:1px solid rgba(35,154,215,.18);
  border-bottom:1px solid rgba(35,154,215,.18);

  background:
    linear-gradient(90deg,
      rgba(3,11,24,.98),
      rgba(4,14,30,.98),
      rgba(7,7,24,.98)
    );

  box-shadow:0 16px 42px rgba(0,0,0,.20);
}

.lb3-benefit{
  min-height:86px;
  padding:18px 24px;

  display:flex;
  align-items:center;
  gap:14px;

  border-right:1px solid rgba(37,100,145,.22);
}

.lb3-benefit:last-child{
  border-right:0;
}

.lb3-benefit-icon{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  color:#62dcff;
  font-size:22px;

  text-shadow:0 0 16px rgba(66,211,255,.25);
}

.lb3-benefit strong,
.lb3-benefit span{
  display:block;
}

.lb3-benefit strong{
  color:#eef8ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.lb3-benefit span{
  margin-top:3px;
  color:#8ea3bf;
  font-size:8px;
  font-weight:700;
  letter-spacing:.11em;
}

/* mobile */
@media(max-width:800px){

  .lb3-hero-eyebrow{
    max-width:64%;
    margin-bottom:10px;
    font-size:7px;
    letter-spacing:.20em;
  }

  .lb3-hero-tagline{
    display:none;
  }

  .lb3-view-btn{
    min-width:220px;
    min-height:44px;
    margin-top:18px;
    padding:0 16px;
  }

  .lb3-view-btn strong{
    font-size:10px;
  }

  .lb3-benefits{
    width:calc(100% - 24px);
    grid-template-columns:1fr 1fr;
  }

  .lb3-benefit{
    min-height:72px;
    padding:12px 14px;
  }

  .lb3-benefit-icon{
    width:30px;
    height:30px;
    font-size:17px;
  }

  .lb3-benefit strong{
    font-size:8px;
  }

  .lb3-benefit span{
    font-size:7px;
  }
}

/* =========================================================
   LB3 HERO — CINEMATIC BACKGROUND
   ========================================================= */

.event-shell{
  background:
    linear-gradient(
      90deg,
      rgba(2,7,18,.97) 0%,
      rgba(2,8,20,.91) 26%,
      rgba(3,10,25,.72) 48%,
      rgba(3,8,22,.28) 70%,
      rgba(4,5,16,.14) 100%
    ),
    linear-gradient(
      180deg,
      rgba(2,6,16,.13) 0%,
      rgba(2,6,16,.26) 100%
    ),
    url('/img/lb3/lb3-hero-bg.png')
    center center / cover no-repeat !important;
}

/* reforça leitura no lado esquerdo */
.event-shell::before{
  background:
    linear-gradient(
      90deg,
      rgba(1,6,17,.98) 0%,
      rgba(1,8,20,.94) 30%,
      rgba(2,10,25,.70) 51%,
      rgba(3,7,20,.22) 72%,
      rgba(4,5,14,.06) 100%
    ) !important;
}

/* glow por cima do cenário */
.event-shell::after{
  width:820px !important;
  height:720px !important;
  right:-160px !important;
  top:-130px !important;

  background:
    radial-gradient(
      circle,
      rgba(238,18,255,.14) 0%,
      rgba(40,114,255,.11) 34%,
      transparent 70%
    ) !important;
}

/* mantém textos acima do fundo */
.event-intro,
.pool-box,
.race-zone,
#dsxHeroCharacter{
  position:relative;
  z-index:5;
}

/* prêmio ganha contraste com o novo cenário */
.pool-box{
  background:
    linear-gradient(
      145deg,
      rgba(5,42,64,.90),
      rgba(2,15,31,.94)
    ) !important;

  backdrop-filter:blur(10px) !important;
}

/* cenário mais vivo no desktop */
@media(min-width:1200px){
  .event-shell{
    background-position:center center !important;
    background-size:cover !important;
  }
}

/* mobile: reposiciona o fundo para não poluir texto */
@media(max-width:800px){
  .event-shell{
    background-position:62% center !important;
  }

  .event-shell::before{
    background:
      linear-gradient(
        90deg,
        rgba(1,7,18,.93) 0%,
        rgba(2,9,22,.77) 55%,
        rgba(4,5,16,.28) 100%
      ) !important;
  }
}