/* ══ hero · "o módulo" (27/10, 3ª rodada) ══
   a cena pintada mora no fundo (o elenco descendo do módulo da Moonworks,
   a Terra no céu), o texto mora à esquerda, no céu e na planície vazia da
   arte, com um véu escuro pra ler. a logo da casa vai na bandeira da cena
   (hero-lua.js calcula onde ela cai na tela e projeta a logo nos quatro
   cantos dela). no celular (e no tablet em pé) o texto vem primeiro e a
   cena desce pra baixo dele, recortada no sapo e na bandeira. */
.hero-lua .hero-sticky {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  min-height: 100svh; height: auto; padding: clamp(104px, 15vh, 150px) max(32px, 6vw) 100px; text-align: left;
  background: #070a1a; overflow: hidden; isolation: isolate;
}
.lua-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lua-bg img, .lua-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ox, 70%) var(--oy, 50%); display: block; }
.lua-bg video { opacity: 0; transition: opacity .8s ease; }
.lua-bg video.is-playing { opacity: 1; }
.hero-lua .hero-sticky::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 62% at 10% 34%, rgba(6,8,20,.88), rgba(6,8,20,.55) 55%, rgba(6,8,20,0) 100%), linear-gradient(to top, rgba(5,7,18,.7), transparent 15%); }

/* a bandeira: uma caixa do tamanho do pano, projetada nos 4 cantos */
.lua-flag { position: absolute; left: 0; top: 0; width: 100px; height: 60px; transform-origin: 0 0; display: grid; place-items: center; opacity: 0; transition: opacity .4s ease; }
.lua-flag.is-placed { opacity: 1; }
/* a logo pintada no pano: multiply pra herdar a sombra do tecido */
.flag-logo { display: block; width: 84%; height: auto; fill: #1f2a5c; opacity: .92; mix-blend-mode: multiply; }

.hero-lua .debut-copy { position: relative; z-index: 2; width: 100%; max-width: 620px; padding: 0; margin: 0; }
.hero-lua .debut-eyebrow { margin-bottom: 22px; font-size: 9px; }
.hero-lua .hero-title { font: 400 clamp(46px, 4.7vw, 80px)/.98 var(--disp); letter-spacing: -.035em; margin: 0; text-shadow: 0 4px 30px rgba(4,6,18,.6); }
.hero-lua .hero-title em { font-style: italic; color: #d6ff00; }
.hero-lua .hero-desc { margin: 24px 0 0; max-width: 500px; color: #d3d6e0; text-wrap: pretty; }
.hero-lua .hero-desc strong { color: #fff; }


.hero-lua .debut-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 34px; }
.hero-lua .debut-proof { margin-top: 0; color: #e3e6ef; }
.hero-lua .debut-bottom { z-index: 3; color: #b9c0ca; }

@media (max-height: 800px) and (min-width: 761px) {
  .hero-lua .hero-sticky { padding-top: 104px; padding-bottom: 84px; }
  .hero-lua .hero-title { font-size: clamp(44px, 4.6vw, 72px); }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .hero-lua .debut-copy { max-width: 470px; }
  .lua-bg { --ox: 78%; }
}
/* tablet em pé (28/10): a arte em cover numa tela alta mostra só 40% da
   largura e o texto caía em cima do módulo. aqui o texto vem primeiro e a
   cena desce inteira pra baixo dele, como no celular, mas em tamanho de
   tablet */
@media (min-width: 761px) and (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .hero-lua .hero-sticky { padding: clamp(120px, 12vh, 150px) 6vw 0; min-height: 0; }
  .hero-lua .hero-sticky::before { display: none; }
  .lua-bg { position: relative; order: 2; inset: auto; width: calc(100% + 12vw); margin: 36px -6vw 0; height: min(64vw, 58svh); --ox: 72%; --oy: 72%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%); }
  .hero-lua .debut-copy { order: 1; max-width: 640px; }
  .hero-lua .hero-title { font-size: clamp(58px, 8.4vw, 84px); }
  .hero-lua .hero-desc { font-size: 17px; max-width: 540px; }
  .hero-lua .debut-eyebrow { font-size: 10px; }
  .hero-lua .debut-cta { font-size: 15px; gap: 28px; }
  .hero-lua .debut-proof { font-size: 12px; min-height: 44px; display: flex; align-items: center; }
  .hero-lua .debut-bottom { display: none; }
}
/* celular deitado: a tela é baixa e larga, a arte entra inteira e o módulo
   fica no meio. o texto encolhe pra caber na metade da esquerda */
@media (max-height: 520px) and (min-width: 561px) and (orientation: landscape) {
  .hero-lua .hero-sticky { padding: 88px 5vw 36px; }
  .hero-lua .debut-copy { max-width: 42vw; }
  .hero-lua .debut-eyebrow { margin-bottom: 12px; }
  .hero-lua .hero-title { font-size: clamp(26px, 4vw, 36px); }
  .hero-lua .hero-desc { margin-top: 12px; font-size: 12px; line-height: 1.5; max-width: 40vw; }
  .hero-lua .debut-actions { margin-top: 18px; gap: 18px; }
  .hero-lua .debut-cta { min-height: 44px; padding-block: 0; font-size: 14px; }
  .hero-lua .debut-bottom { display: none; }
  .hero-lua .hero-sticky::before { background: radial-gradient(70% 90% at 0% 40%, rgba(6,8,20,.9), rgba(6,8,20,.6) 55%, rgba(6,8,20,0) 100%); }
}
@media (pointer: coarse) { .hero-lua .debut-proof { min-height: 44px; display: inline-flex; align-items: center; } }
@media (max-width: 760px) {
  /* no celular: texto primeiro, a cena desce pra baixo dele.
     03/11: --ox 90% → 85%. a 90% o Rubinho, pendurado na perna esquerda
     da nave, saía cortado ao meio na borda; a 85% ele entra inteiro, a nave
     fica no centro e a placa da moonworks continua lida na direita */
  .hero-lua .hero-sticky { justify-content: flex-start; padding: 104px 22px 0; min-height: 0; }
  .hero-lua .hero-sticky::before { display: none; }
  .lua-bg { position: relative; order: 2; inset: auto; width: calc(100% + 44px); margin: 10px -22px 0; height: clamp(380px, 118vw, 540px); --ox: 85%; --oy: 82%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%); }
  .hero-lua .debut-copy { order: 1; }
  .hero-lua .hero-title { font-size: clamp(40px, 11vw, 56px); line-height: 1; }
  .hero-lua .debut-eyebrow { margin-bottom: 18px; font-size: 10px; letter-spacing: .1em; }
  .hero-lua .hero-desc { font-size: 13px; }
  .hero-lua .debut-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-lua .debut-proof { justify-content: center; min-height: 44px; display: flex; align-items: center; font-size: 11px; }
  .hero-lua .debut-bottom { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lua-bg video { display: none; } }
/* 14/11 · hero "o estúdio na Lua": o set fica à direita e o céu escuro à
   esquerda segura o texto. no celular a cena desce inteira, centrada no set. */
.lua-bg { --ox: 62%; --oy: 60%; }
@media (max-width: 760px) { .lua-bg { --ox: 66%; --oy: 70%; height: clamp(300px, 92vw, 460px); } }
@media (min-width: 1181px) {
  /* o texto fica na faixa de céu à esquerda, sem encostar na caixa do set */
  .hero-lua .hero-desc { max-width: 430px; }
  .hero-lua .debut-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* 14/11 · a hero agora diz o que a moonworks é, numa frase longa: corpo menor */
.hero-lua .hero-title { font-size: clamp(34px, 3.35vw, 58px); line-height: 1.03; letter-spacing: -.025em; }
.hero-lua .hero-title em { display: inline; }
@media (min-width: 1181px) { .hero-lua .debut-copy { max-width: 560px; } .hero-lua .hero-desc { max-width: 440px; margin-top: 20px; } }
@media (max-width: 760px) { .hero-lua .hero-title { font-size: clamp(31px, 8.6vw, 42px); line-height: 1.04; } }
.hero-lua .hero-title { text-wrap: balance; }