/* 01 · HERO · v3 · prefixos .hero (composição) e .hx (a tela)
   Texto no alto, tela larga embaixo. O único ângulo é o de 15°: no itálico da segunda oração, na hachura
   do fundo e no corte que separa tentativa de decisão dentro da tela.
   Ordem do arquivo: composição · fundo em camadas · a tela · abertura · a tela rodando · rolagem e ponteiro.
   Regra: o estado final é o padrão. Abertura só com .js e movimento permitido (animações que terminam
   sozinhas); o resto do movimento só sob .mov (kit) ou sob classes postas por js/01-hero.js. */
.hero{position:relative;isolation:isolate;overflow:hidden;
  /* o hero passa por baixo do cabeçalho (transparente no topo) */
  margin-top:calc(-1*var(--cabecalho-h));
  padding-block:calc(var(--cabecalho-h) + clamp(40px,5.4vw,84px)) clamp(56px,6vw,96px);
  --hero-k:0;                                  /* 0 = camadas andam juntas (empilhado); 1 = profundidades diferentes */
  --hero-tomba:7deg}                           /* quanto a tela entra deitada (só com o kit ativo) */

/* ---------- Composição ---------- */
.hero-rotulo{display:flex;align-items:center;gap:10px;color:var(--texto-2)}
.hero-rotulo b{color:var(--texto-2)}
.hero-rotulo i{flex:none;width:1px;height:12px;background:var(--texto-3);transform:skewX(calc(-1*var(--inclinacao)))}

.hero-titulo{margin-top:clamp(20px,2vw,28px);margin-left:-.04em;
  font:700 clamp(2.125rem,9.6vw,2.75rem)/1.06 var(--f-sans);letter-spacing:-.04em;word-spacing:.04em;color:var(--texto)}
.hero-w{display:inline-block;vertical-align:top}
.hero-w>span{display:inline-block;transform-origin:0 100%}
/* o destaque único: a segunda oração no itálico da marca (sintetizado, como em .t-display) e o ponto laranja */
.hero-em{font-style:italic;font-synthesis:style}
.hero-pt{display:inline-block;margin-left:.02em;color:var(--marca)}
.hero-br-d{display:none}
@media (min-width:720px){
  .hero-titulo{font-size:clamp(2.75rem,5.56vw,5.5rem);line-height:1.03;letter-spacing:-.042em}
  .hero-br-m{display:none}
  .hero-br-d{display:inline}
}

.hero-base{margin-top:clamp(24px,2.6vw,36px)}
.hero-lead{max-width:34em;font:400 var(--t-lead)/1.5 var(--f-sans);color:var(--texto-2);text-wrap:pretty}
.hero-acoes{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-8)}
@media (max-width:479px){.hero-acoes .btn{width:100%}}
@media (min-width:1000px){
  .hero{--hero-k:1;--hero-tomba:13deg}
  /* a frase à esquerda e os botões à direita, na mesma linha de base */
  .hero-base{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e-12)}
  .hero-acoes{flex:none;margin-top:0;padding-bottom:4px}
  .hero-lead{text-wrap:balance}
}
/* com largura para isso, cada frase da linha de apoio ocupa uma linha: uma por produto */
@media (min-width:1280px){
  .hero-lead{max-width:none}
  .hero-lead span{display:block}
}

.hero-palco{position:relative;margin-top:clamp(40px,4.6vw,68px);min-width:0}
.hero-plano{position:relative}

/* ---------- Fundo em camadas ----------
   hachura de 15° (mais clara atrás da tela), três traços longos, e duas luzes laranja:
   .hero-halo fica parada atrás da borda de cima da tela; .hero-luz só existe com ponteiro e segue o cursor,
   junto com uma janela redonda que acende a hachura em laranja por onde ele passa.
   A janela anda com transform e a hachura de dentro anda o mesmo tanto ao contrário, então nada é repintado. */
.hero-fundo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-cam{position:absolute;inset:0}
.hero-hach{position:absolute;inset:0;
  background-image:repeating-linear-gradient(105deg,transparent 0 46px,color-mix(in srgb,var(--c-branco) 7%,transparent) 46px 47px)}
.hero-cam-h>.hero-hach{-webkit-mask-image:radial-gradient(90% 62% at 62% 64%,var(--c-preto) 6%,transparent 72%);mask-image:radial-gradient(90% 62% at 62% 64%,var(--c-preto) 6%,transparent 72%)}
.hero-janela,.hero-luz{display:none}
.hero-traco{position:absolute;top:-10%;height:125%;width:1px;background:color-mix(in srgb,var(--c-branco) 11%,transparent);transform:skewX(calc(-1*var(--inclinacao)));transform-origin:50% 0}
.hero-traco-1{left:86%}
.hero-traco-2{left:118%}
.hero-traco-3{left:57%;opacity:.5}

.hero-halo{position:absolute;z-index:-1;left:50%;top:0;width:min(150%,1700px);height:clamp(300px,44vw,620px);pointer-events:none;
  transform:translate3d(-50%,-46%,0);
  background:
    radial-gradient(34% 20% at 56% 47%,color-mix(in srgb,var(--c-laranja) 30%,transparent),transparent),
    radial-gradient(closest-side,color-mix(in srgb,var(--c-laranja) 17%,transparent),color-mix(in srgb,var(--c-laranja) 6%,transparent) 52%,transparent)}

.mov-ponteiro .hero-luz{display:block;position:absolute;left:0;top:0;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c-laranja) 15%,transparent),color-mix(in srgb,var(--c-laranja) 5%,transparent) 45%,transparent);
  transform:translate3d(var(--fx,50vw),var(--fy,300px),0);
  transition:transform 900ms cubic-bezier(.16,1,.3,1),opacity 600ms var(--curva-entrada)}
.mov-ponteiro .hero.com-foco .hero-luz{opacity:1}
.mov-ponteiro .hero-janela{display:block;position:absolute;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;overflow:hidden;border-radius:50%;opacity:0;
  -webkit-mask-image:radial-gradient(closest-side,var(--c-preto) 12%,transparent);mask-image:radial-gradient(closest-side,var(--c-preto) 12%,transparent);
  transform:translate3d(var(--fx,0px),calc(var(--fy,0px) - var(--hs,0)*70px),0);
  transition:transform 380ms cubic-bezier(.16,1,.3,1),opacity 500ms var(--curva-entrada)}
.mov-ponteiro .hero.com-foco .hero-janela{opacity:1}
.mov-ponteiro .hero-hach-viva{inset:auto;left:320px;top:320px;width:var(--hero-w,100vw);height:var(--hero-h,100vh);
  background-image:repeating-linear-gradient(105deg,transparent 0 46px,color-mix(in srgb,var(--c-laranja-claro) 55%,transparent) 46px 47px);
  transform:translate3d(calc(-1*var(--fx,0px)),calc(var(--hs,0)*70px - var(--fy,0px)),0);
  transition:transform 380ms cubic-bezier(.16,1,.3,1)}

/* ---------- A tela ----------
   Uma janela do produto: barra (produto, alvo, estado, pausa), cabeçalho das duas colunas e quatro tentativas.
   Borda com luz (mais clara em cima), fio laranja no alto e sombra funda embaixo dão o volume. */
.hero-tela{position:relative;margin:0;overflow:hidden;border:1px solid transparent;border-radius:var(--r-superficie);color:var(--texto-2);
  background:
    linear-gradient(180deg,var(--c-sup-2),var(--c-sup-1) 120px,color-mix(in srgb,var(--c-sup-1) 55%,var(--c-preto))) padding-box,
    linear-gradient(180deg,color-mix(in srgb,var(--c-branco) 30%,transparent),color-mix(in srgb,var(--c-branco) 9%,transparent) 34%,color-mix(in srgb,var(--c-branco) 5%,transparent)) border-box;
  box-shadow:0 -28px 100px -36px color-mix(in srgb,var(--c-laranja) 42%,transparent),0 70px 120px -50px var(--c-preto)}
.hero-plano::before{content:"";position:absolute;z-index:1;left:22%;right:14%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--c-laranja-claro) 55%,transparent)}

.hx-barra{display:flex;align-items:center;gap:var(--e-4);min-height:52px;padding:0 4px 0 var(--e-4);border-bottom:1px solid var(--linha)}
.hx-prod{display:flex;align-items:center;gap:10px;min-width:0;margin-right:auto;font-size:var(--t-pequeno);line-height:1;color:var(--texto)}
.hx-prod svg{flex:none}
.hx-prod b{white-space:nowrap}
.hx-alvo{padding-left:12px;border-left:1px solid var(--linha);font:400 var(--t-legenda)/1.6 var(--f-mono);color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-estado{display:flex;align-items:center;gap:10px;font:400 var(--t-rotulo)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2)}
.hx-estado .degrau{--marca:var(--texto)}        /* o degrau acende em branco: nesta tela o laranja é só o achado */
.hx-pausa{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--texto-3);transition:color var(--dur-micro) var(--curva-entrada)}
.hx-pausa:hover{color:var(--texto)}
.hx-pausa:focus-visible{outline-offset:-6px}
.hx-ico-segue,.hx-parada .hx-ico-pausa{display:none}
.hx-parada .hx-ico-segue{display:block}

.hx-corpo{position:relative}
.hx-acao{display:block;font-size:1.0625rem;line-height:1.3;color:var(--texto)}
.hx-corpo code{display:block;margin-top:4px;font:400 .8125rem/1.4 var(--f-mono);color:var(--texto-3)}
.hx-dir{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:var(--t-pequeno);line-height:1.35;color:var(--texto-2)}
.hx-dir .etiqueta{font-size:.8125rem;height:26px;padding:0 9px}
.hx-linha{position:relative}
.hx-linha+.hx-linha{border-top:1px solid var(--linha)}
.hx-nota{padding:11px var(--e-4);border-top:1px solid var(--linha);font:400 var(--t-legenda)/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}

/* até 719 px: cada tentativa é um bloco; a decisão vem embaixo. O momento laranja é o fio à esquerda da
   tentativa reproduzida, com um banho leve que sai dele. */
@media (max-width:719px){
  .hx-corte,.hx-cab{display:none}
  .hx-linha{padding:var(--e-4)}
  .hx-dir{margin-top:12px}
  .hx-estado-txt{display:none}
  .hx-barra{gap:var(--e-2)}
  .hx-marca::before{content:"";position:absolute;inset:0;pointer-events:none;border-left:3px solid var(--marca);
    background:linear-gradient(90deg,color-mix(in srgb,var(--c-laranja) 15%,transparent),transparent 60%)}
}

/* de 720 px em diante: duas colunas atravessadas pelo corte. A linha i começa em
   y = cabeçalho + i × altura, e a fronteira recua y × tan 15°, acompanhando a diagonal. */
@media (min-width:720px){
  .hero-tela{--hx-h0:44px;--hx-h:80px;--hx-corte:57%;--hx-alt:calc(var(--hx-h0) + 4*var(--hx-h))}
  .hx-barra{padding-left:var(--e-6)}
  .hx-cab,.hx-linha{display:flex;align-items:stretch}
  .hx-cab{height:var(--hx-h0);border-bottom:1px solid var(--linha);font:400 var(--t-rotulo)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3)}
  .hx-linha{height:var(--hx-h)}
  .hx-esq,.hx-dir{min-width:0}
  .hx-esq{position:relative;display:flex;flex-direction:column;justify-content:center;flex:none;
    width:calc(var(--hx-corte) - (var(--hx-h0) + var(--i)*var(--hx-h))*var(--tan15));padding:0 40px 0 var(--e-6)}
  .hx-cab .hx-esq{width:var(--hx-corte)}
  .hx-cab .hx-dir{font:inherit;color:inherit}
  .hx-dir{position:relative;isolation:isolate;flex:1;flex-wrap:nowrap;padding:0 var(--e-4) 0 28px}
  .hx-porque{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hx-corpo code{white-space:nowrap}
  .hx-nota{padding-inline:var(--e-6)}
  .hx-corte{position:absolute;z-index:1;top:0;bottom:0;left:var(--hx-corte);width:1px;background:color-mix(in srgb,var(--c-branco) 34%,transparent);transform:skewX(calc(-1*var(--inclinacao)));transform-origin:top left}
  /* o lado da política tem outra matéria: grade de pontos, recortada pela mesma diagonal */
  .hx-corpo::before{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(color-mix(in srgb,var(--c-branco) 10%,transparent) 1px,transparent 1.3px);background-size:14px 14px;
    clip-path:polygon(var(--hx-corte) 0,100% 0,100% 100%,calc(var(--hx-corte) - var(--hx-alt)*var(--tan15)) 100%);
    -webkit-mask-image:linear-gradient(90deg,var(--c-preto),transparent 88%);mask-image:linear-gradient(90deg,var(--c-preto),transparent 88%)}
  /* o momento laranja: o trecho do corte na tentativa reproduzida e o banho que sai dele */
  .hx-marca .hx-dir::before{content:"";position:absolute;z-index:2;left:-2px;top:0;bottom:0;width:4px;background:var(--marca);transform:skewX(calc(-1*var(--inclinacao)));transform-origin:top left}
  .hx-linha .hx-dir::after{content:"";position:absolute;z-index:-1;left:0;top:0;bottom:0;width:min(100%,460px);opacity:0;pointer-events:none;
    background:linear-gradient(90deg,color-mix(in srgb,var(--c-branco) 16%,transparent),transparent);transform:skewX(calc(-1*var(--inclinacao)));transform-origin:top left}
  .hx-marca .hx-dir::after{opacity:1;background:linear-gradient(90deg,color-mix(in srgb,var(--c-laranja) 30%,transparent),color-mix(in srgb,var(--c-laranja) 7%,transparent) 55%,transparent)}
  /* o pulso que cruza o corte: só existe enquanto a tela roda */
  .hx-linha .hx-esq::after{content:"";position:absolute;right:calc(var(--hx-h)*var(--tan15)/2);top:50%;width:220px;height:1px;background:linear-gradient(90deg,transparent,var(--texto));opacity:0;transform-origin:100% 50%;pointer-events:none}
  .hx-marca .hx-esq::after{height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,var(--marca))}
}
@media (min-width:1100px){
  .hero-tela{--hx-h0:48px;--hx-h:92px;--hx-corte:56%}
  .hx-barra{min-height:56px}
  .hx-prod{font-size:.9375rem}
  .hx-acao{font-size:1.25rem;letter-spacing:-.015em}
  .hx-corpo code{font-size:.875rem;margin-top:6px}
  .hx-esq{padding-left:var(--e-8)}
  .hx-barra,.hx-nota{padding-left:var(--e-8)}
  .hx-dir{gap:16px;padding-left:40px;font-size:1rem}
  .hx-dir .etiqueta{height:30px;padding:0 12px;font-size:.9375rem}
}

/* ---------- Abertura (no carregamento, uma vez) ----------
   0,06 s  rótulo corre da esquerda · 0,12 s  as palavras do título sobem por trás da máscara, inclinadas, uma a uma
   0,65 s  a tela entra por uma cortina de 15° com fio laranja na frente · 0,75 s  frase e botões sobem
   1,25 s  o ponto laranja cai · a luz atrás da tela acende · os traços do fundo se desenham de cima para baixo */
.hero-plano::after{content:"";position:absolute;inset:0;border-left:3px solid var(--marca);opacity:0;pointer-events:none;transform-origin:0 0}
.hero-plano{--hx-lean:150px}                 /* quanto a cortina recua da cabeça ao pé da tela: altura × tan 15° */
@media (prefers-reduced-motion:no-preference){
  /* máscara das palavras: clip-path com folga (acentos em cima, cedilha embaixo, itálico à direita) */
  .js .hero-w{clip-path:inset(-.2em -.3em -.2em -.12em)}
  .js .hero-w>span{animation:hero-palavra 1100ms cubic-bezier(.16,1,.3,1) calc(120ms + var(--w,0)*42ms) both}
  .js .hero-pt{animation:hero-ponto 640ms cubic-bezier(.3,1.55,.5,1) 1250ms both}
  .js .hero-rotulo{animation:hero-rotulo 900ms cubic-bezier(.16,1,.3,1) 60ms both}
  .js .hero-lead{animation:hero-sobe 950ms cubic-bezier(.16,1,.3,1) 750ms both}
  .js .hero-acoes{animation:hero-sobe 950ms cubic-bezier(.16,1,.3,1) 870ms both}
  .js .hero-tela{animation:hero-cortina 1250ms cubic-bezier(.65,0,.35,1) 650ms both}
  .js .hero-plano::after{animation:hero-fio 1250ms cubic-bezier(.65,0,.35,1) 650ms both}
  .js .hero-plano::before{animation:hero-surge 900ms var(--curva-entrada) 1700ms both}
  .js .hero-halo{animation:hero-surge 2000ms var(--curva-entrada) 900ms both}
  .js .hero-cam-h{animation:hero-surge 1800ms var(--curva-entrada) both}
  .js .hero-traco{animation:hero-traco 1500ms cubic-bezier(.16,1,.3,1) 250ms both}
  .js .hero-traco-2{animation-delay:480ms}
  .js .hero-traco-3{animation-delay:700ms}
}
@keyframes hero-palavra{from{transform:translate3d(0,140%,0) skewX(-15deg)}}
@keyframes hero-ponto{0%{opacity:0;transform:translate3d(0,-.9em,0)}22%{opacity:1}100%{opacity:1;transform:none}}
@keyframes hero-rotulo{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translate3d(-8px,0,0)}to{opacity:1;clip-path:inset(0 -1% 0 0);transform:none}}
@keyframes hero-sobe{from{opacity:0;transform:translate3d(-6px,24px,0)}}
@keyframes hero-cortina{
  from{clip-path:polygon(0 0,0 0,calc(0px - var(--hx-lean)) 100%,0 100%)}
  to{clip-path:polygon(0 0,calc(100% + var(--hx-lean)) 0,100% 100%,0 100%)}
}
@keyframes hero-fio{
  0%{opacity:1;transform:translate3d(0,0,0) skewX(-15deg)}
  92%{opacity:1}
  100%{opacity:0;transform:translate3d(calc(100% + var(--hx-lean)),0,0) skewX(-15deg)}
}
@keyframes hero-surge{from{opacity:0}}
@keyframes hero-traco{from{transform:skewX(-15deg) scaleY(0)}}

/* ---------- A tela rodando ----------
   js/01-hero.js põe .hx-roda na moldura e, em cada linha, .t1 (a tentativa entra e a rota é digitada),
   .t2 (o pulso parte e cruza o corte) e .t3 (a decisão é carimbada). Sem .hx-roda: tudo no estado final.
   Quando a tentativa reproduzida é carimbada, o palco recebe .hx-evento por um instante: a luz atrás da tela sobe. */
.hx-roda .hx-acao{opacity:0;transform:translate3d(-12px,0,0)}
.hx-roda .hx-corpo code{position:relative;width:fit-content;align-self:flex-start;opacity:0;
  clip-path:inset(-2px calc(100% - (var(--k,0) + 1)*1ch) -2px 0)}        /* --k = letras já digitadas */
.hx-roda .hx-corpo code::after{content:"";position:absolute;left:0;top:.14em;bottom:.14em;width:1ch;background:var(--texto-2);transform:translate3d(calc(var(--k,0)*1ch),0,0)}
.hx-roda .hx-dir .etiqueta{opacity:0;transform-origin:0 50%}
.hx-roda .hx-porque{opacity:0}
.hx-roda .t1 .hx-acao{opacity:1;transform:none;transition:opacity 260ms var(--curva-entrada),transform 560ms cubic-bezier(.16,1,.3,1)}
.hx-roda .hx-corpo .t1 code{opacity:1}
.hx-roda .hx-corpo .t2 code{clip-path:none}
.hx-roda .hx-corpo .t2 code::after{opacity:0}
.hx-roda .t3 .hx-dir .etiqueta{opacity:1;animation:hx-carimbo 420ms cubic-bezier(.2,1.6,.4,1) both}
.hx-roda .t3 .hx-porque{opacity:1;transition:opacity 320ms var(--curva-entrada) 180ms}
.hx-apaga .hx-lista{opacity:0;transition:opacity 340ms var(--curva-saida)}
.hx-estado .degrau.ativo>i{animation-iteration-count:infinite}          /* há controle de pausa nesta tela */
@media (max-width:719px){
  .hx-roda .hx-marca::before{opacity:0}
  .hx-roda .hx-marca.t3::before{opacity:1;transition:opacity 500ms var(--curva-entrada)}
}
@media (min-width:720px){
  .hx-roda .t2 .hx-esq::after{animation:hx-pulso 480ms cubic-bezier(.5,0,.9,.45) both}
  .hx-roda .hx-linha .hx-dir::after{opacity:0}
  .hx-roda .t3 .hx-dir::after{animation:hx-clarao 820ms var(--curva-saida) both}
  .hx-roda .hx-marca.t3 .hx-dir::after{animation:hx-banho 1100ms var(--curva-saida) both}
  .hx-roda .hx-marca .hx-dir::before{transform:skewX(calc(-1*var(--inclinacao))) scaleY(0)}
  .hx-roda .hx-marca.t3 .hx-dir::before{transform:skewX(calc(-1*var(--inclinacao))) scaleY(1);transition:transform 460ms cubic-bezier(.16,1,.3,1)}
}
.hero-halo::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(44% 30% at 54% 48%,color-mix(in srgb,var(--c-laranja) 34%,transparent),transparent)}
.hx-evento .hero-halo::after{animation:hx-clarao 1500ms var(--curva-saida) both}
@keyframes hx-pulso{
  0%{opacity:0;transform:translate3d(-240px,0,0) scaleX(.25)}
  18%{opacity:1}
  78%{opacity:1;transform:translate3d(0,0,0) scaleX(1)}
  100%{opacity:0;transform:translate3d(30px,0,0) scaleX(.12)}
}
@keyframes hx-carimbo{0%{opacity:0;transform:scale(1.5)}55%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes hx-clarao{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@keyframes hx-banho{0%{opacity:0}14%{opacity:1;filter:brightness(1.9)}100%{opacity:1;filter:brightness(1)}}

/* ---------- Rolagem e ponteiro (só com o kit ativo) ----------
   --hr  0 → 1 do topo da página até o hero prender (a tela se endireita)
   --hs  0 → 1 enquanto a seção seguinte cobre o hero            --mx, --my  −1 → 1, posição do ponteiro no hero
   O hero fica preso; se for mais alto que a janela, só prende quando a base dele chega à base da janela
   (top negativo), então nada fica coberto sem ter sido visto. */
.mov .hero.hero-fixo{position:sticky;top:min(0px,calc(100vh - var(--hero-h,100vh)));top:min(0px,calc(100svh - var(--hero-h,100svh)))}
.mov .hero.hero-coberto{opacity:0;pointer-events:none}
.mov .hero-in{opacity:calc(1 - var(--hs,0)*.78)}
.mov .hero-cam-h{transform:translate3d(0,calc(var(--hs,0)*70px),0)}
.mov .hero-cam-t{transform:translate3d(calc(var(--mx,0)*-16px),calc(var(--hs,0)*-70px),0)}
.mov .hero-topo,.mov .hero-plano{will-change:transform}
.mov .hero-topo{transform:translate3d(calc(var(--mx,0)*-6px),calc(var(--hr,0)*var(--hero-k)*-26px + var(--hs,0)*-60px + var(--my,0)*-4px),0)}
.mov .hero-palco{perspective:1900px;perspective-origin:50% 0;transform:translate3d(0,calc(var(--hs,0)*(-40px - var(--hero-k)*70px)),0)}
.mov .hero-plano{transform-origin:50% 0;
  transform:translate3d(calc(var(--mx,0)*8px),0,0) rotateX(calc((1 - var(--hr,0))*var(--hero-tomba) + var(--my,0)*-1.2deg)) rotateY(calc(var(--mx,0)*1.8deg))}
/* luz laranja que corre pela superfície da tela junto com o ponteiro */
.mov-ponteiro .hero-tela::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 500ms var(--curva-entrada);
  background:radial-gradient(520px circle at var(--tx,80%) var(--ty,0%),color-mix(in srgb,var(--c-laranja) 10%,transparent),transparent 70%)}
.mov-ponteiro .hero.com-foco .hero-tela::before{opacity:1}
@media (max-width:479px){.hx-estado{display:none}}
/* sem o botão de pausa (sem JS ou movimento reduzido) o estado não encosta na borda da tela */
@media (min-width:480px){.hx-estado{padding-right:20px}.hx-pausa{margin-left:-20px}}

/* ---------- Primeira dobra ----------
   Em tela larga o hero inteiro (texto, botões e a tela completa) cabe na janela: as medidas verticais
   passam a seguir a altura da janela (vh), com piso para não ficar ilegível em janelas baixas. */
@media (min-width:1000px) and (min-height:600px){
  .hero{display:flex;min-height:100vh;min-height:100svh;
    padding-block:calc(var(--cabecalho-h) + clamp(16px,3.6vh,72px)) clamp(14px,2.8vh,56px)}
  .hero-in{display:flex;flex-direction:column;justify-content:center;width:100%}
  .hero-titulo{margin-top:clamp(10px,2vh,28px);font-size:clamp(2.5rem,min(5.56vw,7.9vh),5.5rem)}
  .hero-base{margin-top:clamp(12px,2.4vh,36px)}
  .hero-palco{margin-top:clamp(18px,3.8vh,68px)}
  .hero-tela{--hx-h0:clamp(30px,4.2vh,48px);--hx-h:clamp(46px,6.5vh,92px)}
  .hx-barra{min-height:clamp(40px,5.4vh,56px)}
  .hx-pausa{height:clamp(40px,5.4vh,44px)}
  .hx-acao{font-size:clamp(1rem,2.3vh,1.25rem);line-height:1.25}
  .hx-corpo code{margin-top:clamp(1px,.5vh,6px);font-size:clamp(.75rem,1.6vh,.875rem)}
  .hx-dir .etiqueta{height:clamp(24px,3.4vh,30px);font-size:clamp(.8125rem,1.7vh,.9375rem)}
  .hx-nota{padding-block:clamp(6px,1.1vh,11px)}
}