/* JHOO HERO (módulo isolado: tudo dentro de .jh-hero, classes/ids com prefixo jh-). Gerado de src/index.html.
   Hero em página de quadrinho, só preto, branco e cinza.
   Artboard 1600x800 (desktop) / 400x740 (celular), escalado para caber na tela.
   Camadas: quadros com a cidade → calhas brancas → JHOO sólido → adesivo (foto real) → nuvens da frente → legendas. */
.jh-hero{
  --ink:#0b0b0b;
  --ash:#8a8a8a;
  --smoke:#c4c4c4;
  --bone:#f2f2f2;
  --f-letter:"Bangers","Impact","Arial Narrow Bold",sans-serif;
  --f-round:"Nunito","Arial Rounded MT Bold","Helvetica Neue",sans-serif;
  --nav-h:76px;
  --gx:clamp(20px,3vw,48px);
  --edge:clamp(10px,1.1vw,16px);
  color-scheme:dark;
}
.jh-hero,.jh-hero *,.jh-hero *::before,.jh-hero *::after{box-sizing:border-box}
.jh-hero a{color:inherit;text-decoration:none}
.jh-hero button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.jh-hero :focus-visible{outline:2px solid var(--bone);outline-offset:4px}
.jh-hero .jh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.jh-hero{position:relative;width:100%;height:100vh;height:100svh;min-height:480px;font-family:var(--f-letter);color:var(--bone);overflow:hidden;background:var(--ink);isolation:isolate}

/* =================== GLITCH (cópias fatiadas em cinza) =================== */
.jh-hero .jh-gl{position:relative}
.jh-hero .jh-gl::before,.jh-hero .jh-gl::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;background:url(img/jhoo.webp) 0 0/100% 100% no-repeat}
.jh-hero .jh-gl::before{filter:invert(.85)}
.jh-hero .jh-gl::after{filter:invert(.45)}
.jh-hero .jh-gl.jh-glitch::before{opacity:1;animation:jh-glA .5s steps(1,end) both}
.jh-hero .jh-gl.jh-glitch::after{opacity:.9;animation:jh-glB .5s steps(1,end) both}
.jh-hero .jh-gl.jh-glitch>img{animation:jh-glJit .5s steps(1,end) both}
.jh-hero .jh-gl-bars{position:absolute;inset:-8% -10%;pointer-events:none;opacity:0}
.jh-hero .jh-gl-bars i{position:absolute;display:block}
.jh-hero .jh-gl.jh-glitch .jh-gl-bars{opacity:1}
.jh-hero .jh-gl.jh-glitch .jh-gl-bars i{animation:jh-glBar .1s steps(2) infinite alternate}

/* =================== PÁGINA =================== */
@property --jh-r{syntax:"<percentage>";inherits:false;initial-value:0%}
.jh-hero .jh-hq-page{position:absolute;inset:0;background:var(--ink)}
.jh-hero .jh-hq-page::before{content:"";position:absolute;inset:0;opacity:.5;background:radial-gradient(circle,rgba(255,255,255,.16) 1.2px,transparent 1.7px) 0 0/8px 8px}
.jh-hero .jh-stage{position:absolute;left:50%;top:var(--nav-h);width:1600px;height:800px;transform-origin:50% 0;transform:translateX(-50%) scale(var(--s,1))}
.jh-hero .jh-pnl{position:absolute;inset:0;overflow:hidden}
.jh-hero .jh-pnl img{position:absolute;max-width:none;pointer-events:none;user-select:none}
.jh-hero .jh-pnl img.jh-city-m,.jh-hero .jh-pnl img.jh-cloud-m{display:none}
.jh-hero #jh-pnM{clip-path:polygon(132px 8px,1590px 0,1594px 612px,1252px 660px,1240px 800px,380px 800px,388px 676px,86px 636px)}
.jh-hero #jh-pnL{clip-path:polygon(0 14px,116px 10px,70px 628px,0 636px)}
.jh-hero #jh-pnBL{clip-path:polygon(0 652px,72px 644px,372px 690px,366px 800px,0 800px)}
.jh-hero #jh-pnBR{clip-path:polygon(1268px 676px,1594px 628px,1596px 800px,1258px 800px)}
/* fundo: mesma página de mangá contínua atrás de todos os quadros (as calhas é que dividem).
   Zoom maior que o artboard (1600x800) p/ os kanjis ficarem grandes. Mesmo left/top/width em
   todos os painéis = imagem alinhada atravessando os gutters. */
.jh-hero .jh-pnl .jh-city:not(.jh-city-m){left:-200px;top:-20px;width:2000px}
.jh-hero #jh-pnM .jh-cloud{left:-36px;top:720px;width:1672px;animation:jh-cloudDrift 10s ease-in-out infinite alternate}
.jh-hero .jh-gut{position:absolute;left:0;top:0;width:1600px;height:800px;overflow:visible;pointer-events:none}
.jh-hero .jh-gut .jh-k{fill:none;stroke:var(--ink);stroke-width:15;stroke-linejoin:miter}
.jh-hero .jh-gut .jh-w{fill:none;stroke:var(--bone);stroke-width:8;stroke-linejoin:miter}

.jh-hero .jh-word{position:absolute;left:350px;top:58px;width:900px;height:450px;animation:jh-wordFloat 5s ease-in-out infinite}
.jh-hero .jh-word>img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.jh-hero .jh-stk{position:absolute;left:532px;top:280px;width:540px;max-width:none;animation:jh-stkFloat 5s ease-in-out infinite;will-change:translate}
/* card preto atrás do modelo (dá ênfase nele). Fica entre a cidade e o JHOO, ocupa só a área do adesivo
   e flutua junto com ele. A foto real NÃO é alterada: o card é um elemento separado, por trás. */
.jh-hero .jh-stk-card{position:absolute;left:489px;top:320px;width:626px;height:641px;pointer-events:none;
  rotate:-2.5deg;animation:jh-stkFloat 5s ease-in-out infinite;will-change:translate;
  background:url(img/linhas.webp) center/cover no-repeat,var(--ink);
  border:8px solid var(--bone);outline:3px solid var(--ink);
  box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 6px rgba(242,242,242,.35),14px 14px 0 rgba(0,0,0,.9)}

.jh-hero .jh-capx{position:absolute;display:flex;align-items:center;--fs:36px}
.jh-hero .jh-capx>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jh-hero .jh-capx .jh-sh{fill:rgba(0,0,0,.88)}
.jh-hero .jh-capx .jh-bx{fill:var(--bone);stroke:var(--ink);stroke-width:4;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.jh-hero .jh-capx .jh-bx.jh-dk{fill:var(--ink);stroke:var(--bone)}
.jh-hero .jh-capx>span{position:relative;font:400 var(--fs)/1 var(--f-letter);letter-spacing:.04em;color:var(--ink);white-space:nowrap;transform:skewX(-6deg)}
.jh-hero #jh-cTop{left:470px;top:14px;width:640px;height:64px;justify-content:center;--fs:40px;transform:rotate(-1.6deg)}
.jh-hero #jh-cBw{left:108px;top:404px;width:418px;height:66px;--fs:37px;transform:rotate(-3deg)}
.jh-hero #jh-cBw>span{width:330px;text-align:center}
.jh-hero #jh-cGk{left:140px;top:498px;width:460px;height:66px;--fs:37px;transform:rotate(2deg)}
.jh-hero #jh-cGk>span{width:372px;text-align:center}
.jh-hero #jh-cAl{left:1066px;top:440px;width:430px;height:132px;transform:rotate(-2deg);align-items:center;flex-direction:column;justify-content:center;padding:0 10px 0 78px;gap:8px;--fs:32px}
.jh-hero #jh-cAl>span{line-height:1.02;text-align:center}
.jh-hero #jh-cAl em{position:relative;font:400 calc(var(--fs) * .82)/1 var(--f-letter);letter-spacing:.06em;font-style:normal;background:var(--ink);color:var(--bone);padding:4px 10px 2px;transform:skewX(-8deg);display:inline-block}
.jh-hero #jh-cVer{left:590px;top:752px;width:420px;height:40px;justify-content:center}
.jh-hero #jh-cVer>span{font:900 17px/1 var(--f-round);letter-spacing:.08em;color:var(--bone);transform:none}

.jh-hero .jh-hq-reveal{position:absolute;inset:0;z-index:9;pointer-events:none;background:#030303;--jh-r:140%;
  -webkit-mask-image:radial-gradient(circle at 50% -6%,transparent var(--jh-r),#000 calc(var(--jh-r) + 14%));mask-image:radial-gradient(circle at 50% -6%,transparent var(--jh-r),#000 calc(var(--jh-r) + 14%))}
.jh-hero.jh-pre .jh-hq-reveal{--jh-r:0%}
.jh-hero .jh-hq-film{position:absolute;inset:-4%;z-index:8;pointer-events:none;background:url(img/filme.png) center/cover;mix-blend-mode:screen;opacity:.18;animation:jh-film .6s steps(1,end) infinite}
.jh-hero .jh-grain{position:absolute;inset:0;z-index:15;pointer-events:none;background:url(img/grao.png);opacity:.16;mix-blend-mode:overlay}
/* carimbo: selo de kanji no canto inferior direito (revela junto com a cena) */
.jh-hero .jh-stamp{position:absolute;z-index:7;right:clamp(16px,3vw,56px);bottom:clamp(48px,8vh,96px);
  width:clamp(96px,11vw,178px);height:auto;transform:rotate(-7deg);pointer-events:none;
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.55))}

/* =================== NAVBAR (letreiro de quadrinho) =================== */
.jh-hero .jh-nav{position:absolute;z-index:20;top:0;left:0;right:0;height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:20px;
  padding-left:max(var(--gx),env(safe-area-inset-left,0px));padding-right:max(var(--gx),env(safe-area-inset-right,0px))}
.jh-hero .jh-logo{justify-self:start;display:grid;gap:3px;background:var(--bone);padding:7px 16px 6px;border:3px solid var(--ink);outline:2px solid var(--bone);
  box-shadow:5px 5px 0 rgba(0,0,0,.9);transform:skewX(-8deg) rotate(-1.5deg)}
.jh-hero .jh-logo-name{font:400 clamp(22px,2vw,31px)/1 var(--f-letter);letter-spacing:.03em;color:var(--ink);white-space:nowrap}
.jh-hero .jh-logo-sub{font:400 clamp(10px,.8vw,13px)/1 var(--f-letter);letter-spacing:.32em;color:var(--ink)}
.jh-hero .jh-links{display:flex;gap:clamp(6px,1.2vw,24px);justify-self:center}
.jh-hero .jh-links a{white-space:nowrap;font:400 clamp(15px,1.4vw,23px)/1 var(--f-letter);letter-spacing:.05em;color:var(--bone);padding:7px 12px 5px;transition:color .2s}
.jh-hero .jh-links a.jh-on{background:var(--bone);color:var(--ink);transform:skewX(-10deg);box-shadow:4px 4px 0 rgba(0,0,0,.9)}
.jh-hero .jh-links a:hover:not(.jh-on){color:var(--smoke)}
.jh-hero .jh-cta{justify-self:end}
.jh-hero .jh-cut{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;color:var(--ink);
  font:400 clamp(18px,1.5vw,23px)/1 var(--f-letter);letter-spacing:.05em;padding:10px 20px 8px;
  border:3px solid var(--ink);outline:2px solid var(--bone);box-shadow:5px 5px 0 rgba(0,0,0,.9);transform:skewX(-8deg);transition:color .2s}
.jh-hero .jh-cut::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bone);transition:background .2s}
.jh-hero .jh-cut:hover{color:var(--bone)}
.jh-hero .jh-cut:hover::before{background:var(--ink)}
.jh-hero .jh-cut svg{width:18px;height:18px}
.jh-hero .jh-burger{display:none;width:44px;height:44px;place-items:center;grid-column:3;justify-self:end}
.jh-hero .jh-burger i{display:block;width:22px;height:2px;background:var(--bone);box-shadow:0 7px 0 var(--bone),0 -7px 0 var(--bone)}


/* =================== MENU MOBILE (página de quadrinho) =================== */
.jh-hero .jh-mmenu{position:absolute;inset:0;z-index:30;display:none;flex-direction:column;
  padding:calc(var(--nav-h) + 18px) max(18px,env(safe-area-inset-right,0px)) 22px max(18px,env(safe-area-inset-left,0px));overflow-y:auto}
.jh-hero .jh-mm-bg{position:absolute;inset:0;background:var(--ink);overflow:hidden}
.jh-hero .jh-mm-bg::before{content:"";position:absolute;left:50%;top:-10%;width:220%;aspect-ratio:1;transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg,rgba(242,242,242,.13) 0 3deg,transparent 3deg 9deg);
  -webkit-mask-image:radial-gradient(circle,transparent 8%,#000 40%);mask-image:radial-gradient(circle,transparent 8%,#000 40%)}
.jh-hero .jh-mm-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(242,242,242,.2) 1.2px,transparent 1.7px) 0 0/7px 7px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 30%,#000);mask-image:linear-gradient(to bottom,transparent 30%,#000)}
.jh-hero .jh-mm-frame{position:absolute;inset:calc(var(--nav-h) + 4px) 8px 8px;border:3px solid var(--bone);outline:4px solid var(--ink);pointer-events:none}
.jh-hero .jh-mm-kick{position:relative;align-self:flex-start;margin:0 0 18px 4px;background:var(--bone);color:var(--ink);font:400 18px/1 var(--f-letter);letter-spacing:.06em;
  padding:6px 12px 4px;border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(0,0,0,.9);transform:rotate(-2deg) skewX(-6deg)}
.jh-hero .jh-mm-list{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:12px}
.jh-hero .jh-mm-list li:nth-child(odd){--rot:-2deg;justify-self:start}
.jh-hero .jh-mm-list li:nth-child(even){--rot:1.6deg;justify-self:end}
.jh-hero .jh-mm-item{position:relative;display:flex;align-items:center;gap:14px;min-width:min(78vw,300px);padding:10px 18px 8px 12px;
  background:var(--bone);color:var(--ink);border:3px solid var(--ink);outline:3px solid var(--bone);box-shadow:6px 6px 0 rgba(0,0,0,.92);
  transform:rotate(var(--rot,0deg)) skewX(-6deg);transition:transform .2s,background .2s,color .2s}
.jh-hero .jh-mm-item b{font:400 15px/1 var(--f-letter);letter-spacing:.04em;background:var(--ink);color:var(--bone);padding:4px 6px 2px;transform:skewX(6deg)}
.jh-hero .jh-mm-item span{font:400 clamp(30px,9vw,40px)/1 var(--f-letter);letter-spacing:.03em;transform:skewX(6deg)}
.jh-hero .jh-mm-item i{margin-left:auto;font:400 26px/1 var(--f-letter);font-style:normal;transform:skewX(6deg)}
.jh-hero .jh-mm-item.jh-on,.jh-hero .jh-mm-item:active{background:var(--ink);color:var(--bone)}
.jh-hero .jh-mm-item.jh-on b,.jh-hero .jh-mm-item:active b{background:var(--bone);color:var(--ink)}
.jh-hero .jh-mm-foot{position:relative;margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.jh-hero .jh-mm-foot small{font:400 15px/1.1 var(--f-letter);letter-spacing:.06em;color:var(--smoke);max-width:14ch}
.jh-hero.jh-menu-open .jh-mmenu{display:flex}
.jh-hero.jh-menu-open .jh-edge,.jh-hero.jh-menu-open .jh-loadbar{visibility:hidden}
.jh-hero.jh-menu-open .jh-mm-bg{animation:jh-fade .25s ease both}
.jh-hero.jh-menu-open .jh-mm-frame{animation:jh-blinkOn .4s steps(1,end) .05s both}
.jh-hero.jh-menu-open .jh-mm-kick{animation:jh-capPop .35s cubic-bezier(.3,1.7,.5,1) .08s both}
.jh-hero.jh-menu-open .jh-mm-list li{animation:jh-mmIn .42s cubic-bezier(.3,1.6,.5,1) calc(.12s + var(--k) * .06s) both}
.jh-hero.jh-menu-open .jh-mm-foot{animation:jh-fade .4s ease .5s both}
@keyframes jh-mmIn{from{opacity:0;transform:translateX(var(--from,-40px)) scale(.7)}to{opacity:1;transform:none}}
.jh-hero .jh-mm-list li:nth-child(even){--from:40px}
/* hambúrguer vira X */
.jh-hero .jh-burger{position:relative;z-index:32}
.jh-hero .jh-burger i{transition:background .2s}
.jh-hero .jh-burger::before,.jh-hero .jh-burger::after{content:"";position:absolute;left:11px;top:calc(50% - 1px);width:22px;height:2px;background:var(--bone);opacity:0;transition:transform .25s,opacity .2s}
.jh-hero.jh-menu-open .jh-burger i{background:transparent;box-shadow:none}
.jh-hero.jh-menu-open .jh-burger::before,.jh-hero.jh-menu-open .jh-burger::after{opacity:1}
.jh-hero.jh-menu-open .jh-burger::before{transform:rotate(45deg)}
.jh-hero.jh-menu-open .jh-burger::after{transform:rotate(-45deg)}
.jh-hero.jh-menu-open .jh-burger{background:var(--bone);border:3px solid var(--ink);outline:2px solid var(--bone);box-shadow:4px 4px 0 rgba(0,0,0,.9)}
.jh-hero.jh-menu-open .jh-burger::before,.jh-hero.jh-menu-open .jh-burger::after{background:var(--ink);left:8px}
.jh-hero .jh-nav{z-index:31}
html.jh-lock{overflow:hidden}
@media (min-width:901px){.jh-hero .jh-mmenu{display:none!important}}
@media (min-width:901px) and (max-width:1180px){.jh-hero .jh-links a{font-size:15px;padding:6px 7px 4px;letter-spacing:.03em}.jh-hero .jh-links{gap:4px}}

/* =================== BORDAS DESFOCADAS (vidro nos 4 lados) =================== */
.jh-hero .jh-edge{position:absolute;z-index:11;pointer-events:none;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.jh-hero .jh-edge.jh-t{left:0;right:0;top:0;height:calc(var(--nav-h) + 4px);background:linear-gradient(to bottom,rgba(5,5,5,.55),rgba(5,5,5,.1));
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.jh-hero .jh-edge.jh-b{left:0;right:0;bottom:0;height:16px;background:linear-gradient(to top,rgba(5,5,5,.5),rgba(5,5,5,0));
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent);mask-image:linear-gradient(to top,#000 30%,transparent)}
.jh-hero .jh-edge.jh-l{left:0;top:0;bottom:0;width:var(--edge);background:linear-gradient(to right,rgba(5,5,5,.45),rgba(5,5,5,0));
  -webkit-mask-image:linear-gradient(to right,#000 30%,transparent);mask-image:linear-gradient(to right,#000 30%,transparent)}
.jh-hero .jh-edge.jh-r{right:0;top:0;bottom:0;width:var(--edge);background:linear-gradient(to left,rgba(5,5,5,.45),rgba(5,5,5,0));
  -webkit-mask-image:linear-gradient(to left,#000 30%,transparent);mask-image:linear-gradient(to left,#000 30%,transparent)}

/* =================== BARRA DE CARREGAMENTO → CTA =================== */
.jh-hero .jh-loadbar{--p:0;position:absolute;z-index:14;left:0;right:0;bottom:0;height:34px;display:block;overflow:hidden;background:var(--ink);border-top:3px solid var(--bone);
  padding-left:max(var(--gx),env(safe-area-inset-left,0px));padding-right:max(var(--gx),env(safe-area-inset-right,0px))}
.jh-hero .jh-lb-row{position:relative;height:100%;display:flex;align-items:center;gap:18px;font:400 21px/1 var(--f-letter);letter-spacing:.05em;white-space:nowrap;color:var(--bone)}
.jh-hero .jh-lb-sp{flex:1;height:15px;border:2px solid var(--bone);transform:skewX(-14deg);
  background:radial-gradient(circle,rgba(0,0,0,.35) 1.1px,transparent 1.5px) 0 0/6px 6px,linear-gradient(90deg,var(--bone) calc(var(--p) * 100%),transparent 0)}
.jh-hero .jh-lb-pct{font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}
.jh-hero .jh-lb-done{display:none;justify-content:center;font-size:23px;gap:14px}
.jh-hero .jh-lb-done i{font-style:normal;color:var(--ash)}
.jh-hero .jh-lb-chip{display:inline-flex;align-items:center;gap:10px;background:var(--bone);color:var(--ink);padding:5px 12px 3px;transform:skewX(-8deg);border:2px solid var(--ink);outline:2px solid var(--bone)}
.jh-hero .jh-lb-chip b{font-weight:400;display:inline-block;transition:transform .25s}
.jh-hero .jh-loadbar.jh-done .jh-lb-load{display:none}
.jh-hero .jh-loadbar.jh-done .jh-lb-done{display:flex;animation:jh-blinkOn .8s steps(1,end) both}
.jh-hero .jh-loadbar.jh-done:hover .jh-lb-chip b{transform:translateX(6px)}
.jh-hero .jh-loadbar.jh-done.jh-zap .jh-lb-done{animation:jh-shakeX .35s steps(3) both}

/* =================== ENTRADA (uma vez) =================== */
.jh-hero.jh-enter .jh-nav{animation:jh-fade .6s ease .1s both}
.jh-hero.jh-enter .jh-pnl{animation:jh-pnlIn .55s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .07s) both}
.jh-hero.jh-enter .jh-gut path{stroke-dasharray:1;stroke-dashoffset:1;animation:jh-draw .9s cubic-bezier(.6,0,.2,1) .1s forwards}
.jh-hero.jh-enter .jh-hq-reveal{animation:jh-lightOn 1.25s steps(1,end) .2s both}
.jh-hero.jh-enter .jh-word{animation:jh-slamIn .5s cubic-bezier(.3,1.5,.5,1) .75s both,jh-wordFloat 5s ease-in-out 1.25s infinite}
.jh-hero.jh-enter .jh-stage{animation:jh-shake .32s steps(4) 1.05s both}
.jh-hero.jh-enter .jh-stk{animation:jh-stickIn .6s cubic-bezier(.3,1.5,.5,1) 1s both,jh-stkFloat 5s ease-in-out 1.6s infinite}
.jh-hero.jh-enter .jh-stk-card{animation:jh-stickIn .6s cubic-bezier(.3,1.5,.5,1) .9s both,jh-stkFloat 5s ease-in-out 1.6s infinite}
.jh-hero.jh-enter .jh-cloud{animation:jh-cloudUp .7s cubic-bezier(.2,.8,.2,1) .9s both,jh-cloudDrift 10s ease-in-out 1.6s infinite alternate}
.jh-hero.jh-enter #jh-cTop{animation:jh-capPop .4s cubic-bezier(.3,1.7,.5,1) 1.15s both}
.jh-hero.jh-enter #jh-cBw{animation:jh-capPop .4s cubic-bezier(.3,1.7,.5,1) 1.3s both}
.jh-hero.jh-enter #jh-cGk{animation:jh-capPop .4s cubic-bezier(.3,1.7,.5,1) 1.42s both}
.jh-hero.jh-enter #jh-cAl{animation:jh-capPop .4s cubic-bezier(.3,1.7,.5,1) 1.55s both}
.jh-hero.jh-enter #jh-cVer{animation:jh-blinkOn .5s steps(1,end) 1.8s both}
/* =================== PULSO (a cada 4,5 s) =================== */
.jh-hero.jh-pulse .jh-hq-reveal{animation:jh-lightDip .8s steps(1,end) both}
.jh-hero.jh-pulse #jh-cAl{animation:jh-capShake .45s steps(4) .9s both}

@keyframes jh-glA{0%{clip-path:inset(6% 0 78% 0);transform:translateX(-6px)}16%{clip-path:inset(44% 0 40% 0);transform:translateX(5px)}32%{clip-path:inset(70% 0 14% 0);transform:translateX(-3px)}48%{clip-path:inset(20% 0 64% 0);transform:translateX(8px)}64%{clip-path:inset(86% 0 2% 0);transform:translateX(-5px)}80%{clip-path:inset(34% 0 52% 0);transform:translateX(2px)}100%{clip-path:inset(100% 0 0 0)}}
@keyframes jh-glB{0%{clip-path:inset(58% 0 26% 0);transform:translateX(6px)}16%{clip-path:inset(12% 0 74% 0);transform:translateX(-8px)}32%{clip-path:inset(80% 0 6% 0);transform:translateX(4px)}48%{clip-path:inset(38% 0 48% 0);transform:translateX(-5px)}64%{clip-path:inset(2% 0 84% 0);transform:translateX(7px)}80%{clip-path:inset(64% 0 22% 0);transform:translateX(-3px)}100%{clip-path:inset(100% 0 0 0)}}
@keyframes jh-glJit{0%{transform:none}20%{transform:translateX(2px) skewX(-4deg)}40%{transform:translateX(-3px)}60%{transform:none;opacity:.75}70%{opacity:1;transform:translateX(1px) skewX(3deg)}100%{transform:none}}
@keyframes jh-glBar{from{transform:translateX(-4%)}to{transform:translateX(5%)}}
@keyframes jh-fade{from{opacity:0}to{opacity:1}}
@keyframes jh-blinkOn{0%{opacity:0}20%{opacity:1}30%{opacity:.2}45%{opacity:1}55%{opacity:.4}65%,100%{opacity:1}}
@keyframes jh-shakeX{0%{transform:none}25%{transform:translateX(-5px) skewX(-8deg)}50%{transform:translateX(4px)}75%{transform:translateX(-2px) skewX(6deg)}100%{transform:none}}
@keyframes jh-film{0%{transform:translate(0,0)}25%{transform:translate(-1.5%,1%)}50%{transform:translate(1%,-1.2%)}75%{transform:translate(-.6%,-.4%)}100%{transform:translate(0,0)}}
@keyframes jh-draw{to{stroke-dashoffset:0}}
@keyframes jh-pnlIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes jh-lightOn{0%{--jh-r:0%}18%{--jh-r:14%}24%{--jh-r:4%}36%{--jh-r:38%}44%{--jh-r:22%}58%{--jh-r:70%}66%{--jh-r:58%}82%{--jh-r:110%}100%{--jh-r:140%}}
@keyframes jh-lightDip{0%{--jh-r:140%}20%{--jh-r:60%}30%{--jh-r:140%}55%{--jh-r:90%}62%,100%{--jh-r:140%}}
@keyframes jh-slamIn{from{opacity:0;transform:scale(1.28) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes jh-shake{0%{translate:0 0}25%{translate:-6px 3px}50%{translate:5px -3px}75%{translate:-3px 2px}100%{translate:0 0}}
@keyframes jh-stickIn{from{opacity:0;transform:scale(.78) rotate(-7deg) translateY(50px)}to{opacity:1;transform:none}}
@keyframes jh-stkFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes jh-wordFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes jh-cloudUp{from{transform:translateY(70px)}to{transform:none}}
@keyframes jh-cloudDrift{from{translate:0 0}to{translate:14px 0}}
@keyframes jh-capPop{0%{opacity:0;scale:.2}100%{opacity:1;scale:1}}
@keyframes jh-capShake{0%{translate:0 0}25%{translate:-6px 0}50%{translate:5px 0}75%{translate:-3px 0}100%{translate:0 0}}

/* =================== CELULAR (artboard 400x740) =================== */
@media (max-width:900px){
  .jh-hero{--nav-h:64px}
  .jh-hero .jh-links,.jh-hero .jh-cta{display:none}
  .jh-hero .jh-burger{display:grid}
  .jh-hero .jh-logo{padding:5px 10px 4px}
  .jh-hero .jh-logo-name{font-size:19px}
  .jh-hero .jh-logo-sub{font-size:9px}
  /* mobile: arte própria (cidade vertical). O artboard ocupa a largura toda (400 de largura, altura = a tela real)
     e o JS (layoutMobile) posiciona JHOO, foto, nuvens e balões conforme a altura disponível. */
  .jh-hero .jh-stage{width:400px;height:740px}
  .jh-hero #jh-pnL,.jh-hero #jh-pnBL,.jh-hero #jh-pnBR{display:none}
  .jh-hero #jh-pnM .jh-city:not(.jh-city-m),.jh-hero #jh-pnM .jh-cloud:not(.jh-cloud-m){display:none}
  .jh-hero #jh-pnM .jh-city-m,.jh-hero #jh-pnM .jh-cloud-m{display:block}
  .jh-hero .jh-word{width:342px;height:171px}
  .jh-hero .jh-stk-card{border-width:4px;outline-width:2px;background-size:cover,auto;
    box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 3.5px rgba(242,242,242,.35),7px 7px 0 rgba(0,0,0,.9)}
  .jh-hero #jh-cTop{width:320px;height:34px;--fs:20px}
  .jh-hero #jh-cBw{width:150px;height:30px;--fs:14.5px}
  .jh-hero #jh-cBw>span{width:112px}
  .jh-hero #jh-cGk{width:166px;height:30px;--fs:14.5px}
  .jh-hero #jh-cGk>span{width:126px}
  .jh-hero #jh-cAl{width:152px;height:76px;padding:0 4px 0 28px;gap:4px;--fs:12px}
  .jh-hero #jh-cVer{width:240px;height:26px}
  .jh-hero #jh-cVer>span{font-size:10.5px;letter-spacing:.06em}
  .jh-hero .jh-loadbar{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  .jh-hero .jh-lb-row{font-size:16px;gap:10px}
  .jh-hero .jh-lb-done{font-size:15px;gap:8px}
  .jh-hero .jh-lb-done i{display:none}
  .jh-hero .jh-lb-chip{padding:3px 7px 2px;gap:6px}
  .jh-hero .jh-stamp{width:76px;right:12px;bottom:48px}
}
@media (prefers-reduced-motion:reduce){.jh-hero *,.jh-hero *::before,.jh-hero *::after{animation:none!important;transition:none!important}}