/* Hero premium Universo Bii - 31 agosto 2026 */
.hero-cinematic{
  position:relative;
  isolation:isolate;
  display:block;
  place-items:normal;
  min-height:min(840px,calc(100svh - 72px));
  overflow:hidden;
  color:#fff8e9;
  background:#061326;
}
.hero-cinematic::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(3,13,29,.9) 0%,rgba(4,16,33,.72) 27%,rgba(5,18,37,.2) 55%,rgba(5,16,32,.08) 100%);
  pointer-events:none;
}
.hero-cinematic::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  z-index:3;
  height:34%;
  background:linear-gradient(transparent,rgba(3,10,20,.73));
  pointer-events:none;
}
.hero-cinematic__background,
.hero-cinematic__background img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero-cinematic__background img{object-fit:cover;object-position:center}
.hero-cinematic__copy{
  position:relative;
  z-index:6;
  display:flex;
  min-height:inherit;
  width:min(42%,650px);
  padding:clamp(92px,12vh,145px) 0 76px clamp(28px,6.5vw,118px);
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.hero-cinematic__eyebrow{
  margin:0 0 14px;
  color:#efc77f;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hero-cinematic h1{
  margin:0;
  color:#fff9ed;
  font:600 clamp(4.3rem,7vw,7.7rem)/.82 'Playfair Display',serif;
  letter-spacing:-.075em;
  text-wrap:balance;
  text-shadow:0 8px 32px rgba(0,0,0,.34);
}
.hero-cinematic__lead{
  max-width:460px;
  margin:26px 0 0;
  color:#d7e1e3;
  font-size:clamp(1rem,1.4vw,1.18rem);
  line-height:1.55;
}
.hero-cinematic__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-cinematic__button{
  display:inline-flex;
  min-height:48px;
  padding:12px 19px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(231,190,117,.72);
  border-radius:999px;
  background:#f3d18f;
  color:#102235;
  font-size:.86rem;
  font-weight:850;
  box-shadow:0 16px 34px rgba(0,0,0,.24);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.hero-cinematic__button--ghost{background:rgba(7,24,43,.72);color:#fff6e6;border-color:rgba(255,255,255,.35);backdrop-filter:blur(10px)}
.hero-cinematic__button:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(0,0,0,.34)}
.hero-cinematic__button:focus-visible{outline:3px solid #fff;outline-offset:4px}
.hero-cinematic__cast{position:absolute;inset:0;z-index:4;pointer-events:none}
.hero-cinematic__character{position:absolute;margin:0;filter:drop-shadow(0 24px 24px rgba(0,0,0,.38))}
.hero-cinematic__character img{width:100%;height:100%;object-fit:contain}
.hero-cinematic__character--nabii{z-index:5;left:64%;bottom:0;width:min(27vw,485px);transform:translateX(-50%)}
.hero-cinematic__character--brujbii{z-index:3;right:1.5%;bottom:2%;width:min(18vw,345px)}
.hero-cinematic__character--mabii{display:none}
.hero-cinematic__character--babii{display:none}
.hero-cinematic__character--axbii{z-index:3;left:41%;right:auto;bottom:1%;width:min(11vw,205px)}

@media(max-width:980px){
  .hero-cinematic__copy{width:47%;padding-left:36px}
  .hero-cinematic h1{font-size:clamp(3.7rem,7vw,5.6rem)}
  .hero-cinematic__character--nabii{left:64%;width:28vw}
  .hero-cinematic__character--brujbii{right:1%;width:19vw}
  .hero-cinematic__character--axbii{left:39%;right:auto;width:11vw}
}

@media(max-width:800px){
  .hero-cinematic{
    min-height:max(640px,calc(100svh - 150px));
    background:#061326;
  }
  .hero-cinematic::before{background:linear-gradient(180deg,rgba(3,13,29,.82) 0%,rgba(4,16,33,.62) 28%,rgba(4,16,33,.08) 56%,rgba(3,10,20,.28) 100%)}
  .hero-cinematic::after{height:24%;background:linear-gradient(transparent,rgba(3,10,20,.66))}
  .hero-cinematic__background img{object-position:center}
  .hero-cinematic__copy{
    width:100%;
    min-height:0;
    padding:26px 16px 0;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
  }
  .hero-cinematic h1{font-size:clamp(3rem,15vw,4.6rem);line-height:.84}
  .hero-cinematic__lead{max-width:350px;margin-top:12px;font-size:.84rem;line-height:1.42}
  .hero-cinematic__actions{justify-content:center;margin-top:14px}
  .hero-cinematic__button{min-height:40px;padding:8px 12px;font-size:.7rem}
  .hero-cinematic__cast{top:278px;bottom:8px}
  .hero-cinematic__character--nabii{left:50%;bottom:0;width:min(43vw,285px)}
  .hero-cinematic__character--babii{display:block;left:2%;bottom:0;width:min(22vw,150px)}
  .hero-cinematic__character--brujbii{right:2%;bottom:0;width:min(26.5vw,180px)}
  .hero-cinematic__character--axbii{display:none}
}

@media(max-width:410px){
  .hero-cinematic__copy{padding-left:14px;padding-right:14px}
  .hero-cinematic__actions{gap:8px}
  .hero-cinematic__button{padding-left:12px;padding-right:12px}
}

@media(prefers-reduced-motion:no-preference){
  .hero-cinematic__character--nabii{animation:hero-bii-arrive .8s cubic-bezier(.22,.8,.24,1) both}
  .hero-cinematic__copy{animation:hero-copy-arrive .65s ease-out both}
}
@keyframes hero-bii-arrive{from{opacity:0;transform:translateX(-50%) translateY(22px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes hero-copy-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}